We know how to make a large heading...
<h2>Section 1</h2>
We know how to make it red...
<h2><font color="#ff0000">Section 1</font></h2>
We know how to make it italic...
<h2><font color="#ff0000"><i>Section 1</i></font></h2>
We know how to make the font face arial...
<h2><font color="#ff0000" face="arial"><i>Section 1</i></font></h2>
If we wanted to make every heading on the page look like this, we could add these tags to every H2 heading. But, there is another way...
Save this as page.html...
<html> <head> <title></title> </head> <body> <h2>Section 2</h2> </body> </html>
Now add a pair of STYLE tags in the head section...
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
VIEW IT (no change)
Add the element that you wish to "style", and add a pair of curly brackets {}...
<html>
<head>
<title></title>
<style type="text/css">
h2 {}
</style>
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
VIEW IT (no change)
Designate that all h2 elements be red...
<html>
<head>
<title></title>
<style type="text/css">
h2 { color:#ff0000; }
</style>
</head>
<body>
<h2>Section 2</h2>
</body>
</html>
#ff0000 is the hex code for red. If this is news to you, then you might wish to put down this CSS Tutor and brush up on basic HTML. You'll find more colors here.
Pretty cool, ain't it?
In the interest of preventing potential problems, it's a good idea to specify color as a hex code like we did above. The browser will also understand many colors by name name (red, blue, aquamarine, etc), but for our purposes, let's stick with hex codes.
You'll find the color property (along with other properties) under CSS Properties in the CSS reference included with this tutorial. That reference can be found by following the CSS Reference link near the bottom of every page in this tutorial.
I suppose now would be a good time to talk about browser compatability. Most commonly used browsers support CSS. The very few that don't will still show everything, you'll just lose the fancy colors and such... but the page is still readable.
Keep in mind CSS support in newer browsers is not always consistent. Each major browser, not to mention different versions of the same browser, can be a little different in their CSS support. Here and there on the web you'll find charts on what browser supports what property. For most common things, they are pretty close. Also, if you have heeded previous advice from me and design your pages loosely, you'll find that minor differences don't have much of an effect. As usual, the advice is the same... check your pages in more than one browser and at a few resolutions. You might also wish to remove the style rules and see what your page would look like minus CSS.
| CSS Tutor |
| Lessons: Intro 1 2 3 4 5 6 CSS Reference |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
