You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example, 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:
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!
You can use CSS Classes with any HTML element! However, what happens if we had already defined a value for the base <p> tag? Well, what happens is the HTML element first takes on the style defined by the base and then the styles defined by the class. If the CSS class uses a CSS attribute already defined by the base CSS then the formatting defined by the class will be the value that is used.
It may be easier to imagine that the base CSS code is the starting look that all HTML elements will have 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.
Remember, CSS code in classes will override the general CSS code. p.test1 overrides p!
http://www.tizag.com/cssT/class.php
|
|
||||||||||||||||||||
|
Home •
Watched Topics •
Register •
Search•
Directory FAQ • Memberlist • Usergroups • Log in• Stores • Items • Bank |
||||||||||||||||||||
|
THE PHP FORUM.NET IS HIRING MODERATORS.
PLEASE SEND A PRIVATE MESSAGE TO PRATAMISHUS IF YOU WANT TO EARN SOME EXTRA CASH (Registered users only).
|
||||||||||||||||||||
|
Powered by phpBB © phpBB Group � Design by phpBBStyles.com | Styles Database |
||||||||||||||||||||
|
|
|