CSS Style Blocks Tutorial
CSS Style Blocks...
Using inline style is pretty easy, but if you had to add it to every paragraph it would become pretty tedious.
Fact of the matter is, that the only practical use for inline style is when you know something is going to only happen ONE time.
If you need something to happen more than once, (and most likely, you will) you'll want to use style "blocks."
Remove the inline style that you previously added, then add the following between the <head></head> tags of your page like this...
<head>
<title>ChangRox.com</title>
<style type="text/css">
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Welcome to ChangRox.com!</p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh. Pretty slick, huh? Let's break it down...
CSS Explained...
The <style type="text/css"> and </style> tags instruct the browser that what we're writing between them are CSS style blocks.
The "p" (referred to as a "selector") in "p {color: red;}" refers to the p in the <p> paragraph tag. Every time the browser encounters <p> it implements the CSS that you specified. Part of the beauty of CSS is that you can affect virtually ALL HTML tags in the same manner! Add the following and you'll see what I mean...
<head>
<title>ChangRox.com</title>
<style type="text/css">
p {color: red;}
body {background-color: beige;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Welcome to ChangRox.com!</p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh. Do you see how that works? Just like with the <p> tag, the "body" part of "body {background-color: beige;}" refers to the <body> tag. It's just that simple!
But what if 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. Click the link to find out how.
© 2008 - 2011 fapmaster.com