CSS Tutorial
CSS ALREADY???
The nerds are pulling their hair out right now because I'm not following the "proper" order.
You see, the "proper" order is to introduce you to an HTML tag, explain it in exhaustive detail, repeat a hundred or so times for every conceivable HTML tag, most of which you'll never use, until you're so mind-numbingly bored that you quit and go back to WYSIWYG.
I'm confident that once you understand what's going on, you'll have no trouble at all in finding and implementing the code of your choosing... when you actually need it, so that's why I'm skipping all of that. You startin' to feel me?
Into The Fray...
Back in the old pre-CSS days, to change a font color we did it like this...
<head>
<title>ChangRox.com</title>
</head>
<body>
<p><font color="red">Hello World!</font></p>
</body>
</html>
There are all sorts of HTML tags to change how the page looks, but compared to CSS, using HTML to effect web page presentation just plain sucks and shouldn't be done. So... guess what? At the risk of sending the nerds into a frenzy, I'm not even going to tell you one bit more about it!
Just so we have something more to work with, add the following code...
<head>
<title>ChangRox.com</title>
</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. See what the paragraph tags are doing? If we had put a lot more text between the paragraph tags you would see three separate (bigger) blocks of text instead of just lines.
Getting Started With CSS...
The simplest way to implement CSS is to use what's called "inline" style. Add this code...
<head>
<title>ChangRox.com</title>
</head>
<body>
<p style="color: red;">Hello World!</p>
<p>Welcome to ChangRox.com!</p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh. Now the first paragraph is red. "Big deal," you say, "The <font> tag could have done that." You're 100% correct. But stick with me. It's about to get interesting...
CSS Style Blocks Tutorial... →
© 2008 - 2011 fapmaster.com