LESSON 04 – MORE ON CSS

ONE TAG TYPE, TWO DIFFERENT RULES

Lets say you have two paragraphs on your webpage. You want the first one to be blue and the second one to be pink. So we need to apply different CSS rules for <p> tags. Here’s how:

STEP 1

In the CSS, you will provide two rules. However, there has to be a way to differentiate the two different rules. To do this, we put a class specification after the tag name.

p.class1{color:blue}

p.class2{color:pink}

Note that the words “class1” or “class2” could be anything. You can pick “coco” and “nut” if you want to.

STEP 2

In your html document, in the tag in question, you must now specify the class of the tag. For example:

<p class="class1">

By specifying “class1”, we are saying that this paragraph should be blue.

THE <div> HTML TAG

The <div> tag simply specifies a section in an html document. It is useful because you can specify CSS rules on div tags.