Cascading Style Sheets (CSS) – Getting Started

There are four ways a style can be applied to a web page. 
Only the first method is presented in this Getting Started 
article. The other methods are mentioned so you're aware 
they exist.

     1. Styles are specified through the use of an external 
        file, a method called "external style sheet" or 
        "linked style sheet." This is the method you'll 
        learn in this article. There is one file on your 
        site that specifies the styles. Then, one line in 
        each of your web pages links to that file. To change 
        the style on all your web pages, simply change the 
        external file.

     2. Styles are specified in the HEAD area of each page 
        the style is applied to. This method is called 
        "embedded style sheet."

     3. A style is specified in the actual HTML tag where 
        the style is applied. This is called an "inline 
        style."

     4. A combination of embedded and external style sheets. 
        For this, each page has an embedded style sheet. 
        Within the embedded style sheet are certain codes 
        that import one or more external style sheets. This 
        method is called "imported style sheet."

To create an external style sheet, make a file named 
mysite.css with the following three lines:

BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: sans-serif;
   }

Upload mysite.css to the same directory on your server where 
you have your main index page.

Now, in the source code of one or more of your web pages, 
in the HEAD area, put this line (make a backup of the pages 
before changing, in case you want to restore to the 
original):



(The above assumes your web page is in the same directory 
as the style sheet file, but that situation isn't required. 
The HREF="__________" URL can be a relative URL or an 
absolute http://... URL.)

That's all there is to it. Every page with the above line in 
the HEAD area will have it's text "magically" converted to a 
sans-serif font.

Okay, there may be just a bit more to it than that. If you 
currently have FONT tags specified in the source code of 
your web pages, then those will need to be removed so the 
CSS style can do its job.

Once all FONT tags removed from your page, let's experiment 
a bit. In the mysite.css file, change the font from 
sans-serif to serif:

   font-family: serif;

Like magic, all your text is converted to a serif font.

A paragraph about definitions: The "font-family: serif;" 
line is a style element. Styles can have other elements, 
like size and color, and some of those are addressed below. 
Each style element has two parts, as you've noticed. The 
first part is called the "property" and the second part is 
called the "value." The property is followed by a colon and 
the value is followed by a semi-colon. The property must be 
specified before the value, and they must appear together. 
Thus, "font-family: serif;"

So far, we've specified the generic sans-serif and serif 
fonts. These allow the browser to use its default sans-serif 
or serif font.

You can, however, specify exact font names, and if the font 
name is available on the user's computer then it will be 
used. Arial and Helvetica are common sans-serif fonts for PC 
and Mac desktop computers. To control the exact font name to 
be used, with backups in case the one you specify isn't 
available on the user's computer, list the font names in 
order of preference, separated with a comma. Example:

   font-family: arial,helvetica,sans-serif;

The above line in the style sheet will cause the browser to 
use font Arial if it's available on the user's computer. If 
Arial is not available, Helvetica will be used. If neither 
Arial nor Helvetica are available, the browser will choose a 
sans-serif font that is available. And if no sans-serif font 
is available, the browser will use its internal default 
font, whatever that may be.

While you're changing the font family specifications, let's 
also specify the font size and text color. Your mysite.css 
file can now have these five lines:

BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: arial,helvetica,sans-serif;
   font-size: 14px;
   color: #000000;
   }

The above specifies a font size of 12 pixels ("px") in 
height. Font sizes can also be specified in points ("pt") 
and other measurements. However, use the pixel measurement; 
pixel measurement maintains the most consistent size among 
different monitors and operating systems.

The above also specifies a text color. The color can be 
specified either as a hexadecimal number preceeded with a 
"#" character (like the example) or by a color name such as 
"black".

Once you upload the above style sheet, your pages will have 
black, 12 pixel sized text, Arial font. Change the color to

   color: blue;

and suddenly all your text is blue. Change the size to 

   font-size: 55px;

and your text is huge.

Just one simple change in mysite.css changes every page that 
has the one-line  tag in the HEAD 
area.

By now, you've probably been wondering about the 

BODY, TD, P, LI, BLOCKQUOTE { 

line in file mysite.css. That is a list of tags that the 
style will effect, tags separated with a comma. In this 
case, it effects the BODY tag (which is everything in the 
page BODY that doesn't otherwise have a style), the TD tag 
(table data cell), the P tag (paragraph), and the BLOCKQUOTE 
tag.

Let's add another style, one for the H1 tag. Your mysite.css 
file should now have these twelve lines:

BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: arial,helvetica,sans-serif;
   font-size: 14px;
   color: #000000;
   }

H1 {
   font-size: 36px;
   font-weight: bold;
   text-align: center;
   color: red;
   background: blue;
   }

The above will cause the H1 text to be 36 pixels in size, 
bold, centered, colored red, and with a blue background. The 
font face will be Arial because that's what's specified for 
BODY, and H1 didn't specify any different.

Once you upload mysite.css, all your web page's H1 text will 
be the specified style.

A note about degradation: Some users have style sheets off 
in their browsers. Some browsers are unable to process style 
sheets at all. Although the percentage of those is likely to 
be tiny, it's still a good idea to design your style sheets 
so your pages degrade gracefully for such users. In other 
words, if you're going to specify a font size of 24px, 
that's closer to a non-style sheet H2 size than it is to 
H1 or H5. So, if you can, use H2 for that particular font 
size because it would degrade with more grace than H1 or H5 
would in that situation.

Your mysite.css file can contain specifications for any HTML 
tag. The file can be named something else, if you wish, 
although by convention it should have the .css file name 
extension.

Yes, there is a lot more to be learned. Even with just this 
small amount of knowledge, however, you have the ability to 
specify the font attributes for any and all HTML tags that 
contain visible text -- throughout your site. Except one.

The one exception is the anchor tag, often referred to as 
the "A" link tag, the tag you use when you create a link on 
a web page. The A tag can have three different styles, one 
for each of it's states: link, active, and visited. To see 
how it works, change your mysite.css style sheet file so it 
has these thirty lines:

BODY, TD, P, LI, BLOCKQUOTE { 
   font-family: arial,helvetica,sans-serif;
   font-size: 14px;
   color: #000000;
   }

H1 {
   font-size: 36px;
   font-weight: bold;
   text-align: center;
   color: red;
   background: blue;
   }

A:link {
   color: yellow;
   background: red;
   font-weight: bold;
   }

A:active {
   text-decoration: underline;
   }

A:visited {
   color: red;
   background: yellow;
   font-style: italic;
   text-decoration: line-through;
   }

With the above, your linked text will be bold, colored 
yellow, and with a red background. When the link is active 
(while it's being clicked on), it will be underlined. Once 
the linked page has been visited, the text will be italic 
and have a line through it, the text color will be red, and 
the background will be yellow.

Note that the "active" and "visited" behave differently in 
different browsers. If you specify font changes in the 
"active" style, the change might or might not display. 
Changing the font style to italic in the "visited" style 
causes the font to be italic; however, in some browsers the 
font weight remains bold as specified in the "link" style 
and in other browsers the font weight becomes normal.

Another A tag style you may wish to utilize is "hover" 
style. This style becomes effective when the mouse cursor 
hovers above the linked text. The "hover" style works in 
IE 5+ and in Netscape 6+. The style has no effect for 
browsers that don't support "hover". Here is an example 
"hover" style:

A:hover {
   text-decoration: none;
   color: purple;
   background: pink;
   font-size: 22px;
   font-weight: bold;
   }

The above causes any underlines or line-throughs to 
disappear, turns the linked text color purple with a pink 
background, changes the text size to 22 pixels, and makes 
the text bold.

Some of the styles demonstrated in the examples cause 
dramatic effects. They serve to demonstrate possibilities. 
Your actual implementation will probably be more pleasant 
to the eyes.