CSS
Tutor - Lesson 1
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 it
<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.