id and class sample

Return

These elements are contained in the body of the page:

        <p id="george">
          This is the one and only <q>george</q> paragraph.
        </p>
        <p class="smith">
          This is a <q>smith</q> paragraph.
        </p>
        <p class="smith">
          This is a <q>smith</q> paragraph.
        </p>
        <p id="betty" class="smith">
          This is the one and only <q>betty</q> paragraph.
          It is also one of the <q>smith<q> paragraphs.
        </p>
        <div class="smith">
            This is a <q>smith</q> division.
        </div>

The style sheet contains the following style specifications:


            p		{ font-size:         x-large; }

            #george	{ color:             red;     }

            #betty	{ color:             blue;    }

            .smith	{ background-color:  silver   }

In the style sheet:
The p selector applys the font-size: x-large; to all p elements.
Selectors that start with # means they look for the id.
#george applys the color: red; to the element with the id george
Selectors that start with dot (.) means they look for the class.
.smith applys the background-color: silver; to all elements with the class smith
Note that one paragraph has both the id betty and the class smith

This is the one and only george paragraph.

This is a smith paragraph.

This is the one and only betty paragraph. It is also one of the smith paragraphs.

This is a smith division.

Return