|
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.one{ color: blue; }
p.two{ color: red; }
HTML Code:
<p>This is a normal paragraph.</p>
<p class="one">This is a paragraph that uses the p.first CSS code!</p>
<p class="tow">This is a paragraph that uses the p.second CSS code!</p>
You can use CSS classes with any HTML element. if we had already defined a value for the default <p> tag, the CSS class for any <p> tag will override the default <p> 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.
CSS Code:
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
HTML Code:
<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>
|
