How to Create CSS Classes

You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example that sometimes you want the font to be large and white, while other times you would prefer the font to be small and black. CSS would not be very useful if it did not allow you to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the use of classes.

The Format of Classes

 

Using classes is simple. You just need to add an extension to the typical CSS code and make sure you specify this extension in your HTML. Let’s try this with an example of making two paragraphs that behave differently. First, we begin with the CSS code, note the red text.

 

CSS Code:


p.first{ color: blue; }
p.second{ color: red; }

 

HTML Code:


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

<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>

...

 
Display:

Display:

This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code! The p.test1 paragraph remained the same size, but it’s color changed.

This is a paragraph that uses the p.test2 CSS code! The p.test2 paragraph remained the same color, but it’s size changed.

You can use CSS classes with any HTML element! However, what happens if we had already defined a value for the default

tag, would this cause any problems for classes of the paragraph tag?

Well, when this happens the CSS class for any

tag will override the default

CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used.

It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes. Please see the example below for a visual of this tricky topic.

 

CSS Code:




p{ color: red; font-size: 20px; } 
p.test1{ color: blue; } 
p.test2{ font-size: 12px; }

 

HTML Code:




<html>
<body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>

...

 

Display:

This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code! The p.test1 paragraph remained the same size, but it’s color changed.

This is a paragraph that uses the p.test2 CSS code! The p.test2 paragraph remained the same color, but it’s size changed.