December 11, 2015

Using Class And Id

If an element has an id it will refer to only one element of that page whereas  if that  element has a class it can refer to several elements. According  to rules each element can  have only one ID and should  be used  only once.

Your code will not pass the validation if you use the same ID on more than one element.

I case of a class you can use the same on multiple elements.

If you want to use style over and over again on different types
of element in more than one places you need to use a class selector.

A styling that needs to be applied over and over to a different types of elements on a page you should use a class selector.
You can also use a span to apply a style to a specific word or more using a class selector.

A (.) dot refers to a class
example .class

A (#) hash refers to an id
example #id

Below is an example to show an explanation between classes and ids using some various style rules.

HTML
        <html>
        <body>
        <p class="sentence">This sentence has a class selector</p>

        <p>The underline <span class="underline sentence bold">word</span> in this paragraph
        is important.</p>

        <div id="content">
        <p class="red">This is RED color with a class selector.</p>
        <p class="green">This is GREEN color with a class selector.</p>
        <p class="orange">This is ORANGE color with a class selector.</p>

        </div>
        </body>
        </html>

CSS
        .sentence {
        font-size:30px;
        }

        .underline {
        text-decoration:underline;
        background-color:yellow;
        font-style:italic;
        }

        .bold {
        font-weight:bold;
        }

        #content p:hover  {
            color: gray;

        }

        #content {
        font-size:30px;
        cursor:pointer;
        margin:none;
        }

        .red {
        color:red;
        }

        .green {
        color:green;
        }

        .orange {
        color:orange;
        }



RESULT


This sentence has a class selector
The underline word in this paragraph is important.
This is RED color with a class selector.
This is GREEN color with a class selector.
This is ORANGE color with a class selector.


END...

No comments :

Post a Comment