CSS Classes

When using classes in CSS, you need to specify it as an extension to the normal CSS code you use and then use this extension in your HTMl code t make it work.

Here is an example on this:

 

p.one{ color: green; }

p.two{ color: orange; }

 

Here we are specifying two classes – p.one and p.two. One and two are classes specify for the paragraph tag ‘p’.  p.one sets the font color to green and p.two sets the font color to orange.

 

Here how the classes define is used on HTML:

<html>

<body>

<p>This paragraph is normal and has not class defined for it.</p>
<p class=”one”>This is a paragraph that uses the p.one CSS code!</p>

<p class=”two”>This is a paragraph that uses the p.two CSS code!</p>

Output

This is a normal paragraph.

 

This is a paragraph that uses the p.first CSS code!

 

This is a paragraph that uses the p.second CSS code!

Now, if you have a situation in which there is a value specified for the paragraph tag and you also have classes defined for the tag, the classes you define will override the value set for the paragraph tag.


Here a look at this:

p{ color: blue; font-size: 28px; }

p.one{ color: orange; }

 

In the CSS code we have defined a class for the paragraph tag, in which font color is set as orange. Here we have also set values for the paragraph tag color as blue and font size as 28px.

 

Now using the class in HTML we have the following code:

 

</html>

<body>

<p>This is a normal paragraph.</p>

<p class =”one”>This paragraph is assigned to the p.one class!</p>

 

Output

 

This is a normal paragraph.

This paragraph is assigned to the p.one class!

css.php