CSS Mulitiple Declarations
I do declare!
Until now, we've been using styles in their most basic form and it's probably just slightly difficult to see why CSS is going to save you time, but the power of CSS is about to become crystal clear...
Using Multiple CSS Declarations...
In the previous tutorial we added the class, crrt, to the <strong> tag in order to output bold red text. While that's just fine for one occurence, it would never do to write that all out every time we wanted bold red text. Instead, we'll make a class that includes ALL of the style attributes that we care to use.
Add this new class to your code...
<head>
<title>ChangRox.com</title>
<style type="text/css">
body {background-color: silver; font-family: Arial;}
.crrt {color: red;}
.dingleberries {color: red; font-weight: bold;}
</style>
</head>
<body>
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="crrt">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
See, I told you you could name it "dingleberries!" Just like the style that changed our background color and font, notice how we now have TWO style declarations in the same class. Implement it by changing the span class to the class that we just created...
<head>
<title>ChangRox.com</title>
<style type="text/css">
body {background-color: silver; font-family: Arial;}
.crrt {color: red;}
.dingleberries {color: red; font-weight: bold;}
</style>
</head>
<body>
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh and you'll see that we've killed two birds with one stone in that we can use our new class every time we want red text, that is also bold, displayed.
Multiple, Multiple Declarations...
Well, not really. Just one "multiple" will suffice. The point is that you can use as many declarations as you want! If you want the text to be bold, red, and italic, add this to the dingleberries class...
<head>
<title>ChangRox.com</title>
<style type="text/css">
body {background-color: silver; font-family: Arial;}
.crrt {color: red;}
.dingleberries {color: red; font-weight: bold; font-style: italic;}
</style>
</head>
<body>
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh to see the result. The list of things you could add to the dingleberries class is almost endless. If you wanted it to display the text as bold, red, italic and underlined you would just add it to the class like this... .dingleberries {color: red; font-weight: bold; font-style: italic; text-decoration: underline;} and on, and on, and on...
In fact, as you become more comfortable with CSS and learn more of it, your classes WILL start to become very long and involved. Which is why we need to take a break and talk about good coding practices.
© 2008 - 2011 fapmaster.com