CSS Overrides Tutorial
←... CSS Style Blocks Tutorial
CSS Overrides...
A CSS "override" is a very easy way to sort of temporarily "change your mind" about a style that you've implemented.
Let's assume that you don't want all of the text in every paragraph to be red. One way you could do it is to override your style by inserting some inline style like you did before. Add this...
<head>
<title>ChangRox.com</title>
<style type="text/css">
p {color: red;}
body {background-color: beige;}
</style>
</head>
<body>
<p>Hello World!</p>
<p style="color: blue;">Welcome to ChangRox.com!</p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh. See that? Even though you previously stated that all text inside paragraph tags should be red, your inline style overrides it and takes control.
Hopefully, you're also starting to see why it's important to close all of your HTML tags when using CSS. If you didn't have a closing </p> tag at the end of the second paragraph, the blue color would have run into the next paragraph and continued until an appropriate closing tag was found.
"But, how do I change just a little part of a paragraph?", you ask. Well, using the <span> tag, it's just as easy. Add this...
<head>
<title>ChangRox.com</title>
<style type="text/css">
p {color: red;}
body {background-color: beige;}
</style>
</head>
<body>
<p>Hello <span style="color: green;">World!</span></p>
<p style="color: blue;">Welcome to ChangRox.com!</p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh and now the word "World" is green. As you can tell, overrides can be useful, but mostly only if you're planning on having only ONE occurrence of the override. For multiple occurrences you'll want to create a CSS "class". I'll show you how in the next lesson.
© 2008 - 2011 fapmaster.com