Menu

CSS tutorials

Style sheets have been around the web for a few years now, but have only been widely used recently, as browser support with 4.0 browsers and higher grew. Internet explorer supported style sheets with version 4 of their browser, while Netscape didn’t fully support CSS until version 6.

Style sheets benefit both the webmaster and visitors of the site. For the webmaster, style sheets allow font and layout control to be called from a single text file on the site ( or in the header of each page ), allowing for much greater control of style. By calling this information from a single text file, webmaster can easily change layout and font style from within 1 file, instead of having to edit potentially hundreds of documents to make changes. CSS also benefits the visitors to the site, allowing for much smaller file sizes and faster download times. CSS also gives a clean, standard format for the entire site.

In the following pages I will give you methods of implementing CSS on your site.

To get started, all you will need to create your style sheets is a simple text editor, or access to your HTML documents source code, if you choose to put the CSS information into your headers of each page. Personally I would recommend the later of the two. OK lets get on with it.

Now keep in mind if you wish to call the sheet from your page, instead of include the CSS code into each page, you need to insert this into your <HEAD></HEAD> or your HTML documents.

<link rel=”stylesheet” href=”http://www.path-to-your-css.com/filename.css” type=”text/css”>

As you can see above, your CSS filename needs to end with a .css.

Basic link appearance

Insert this into your css file:

A:link
A:visited
A:hover
A:active

These will define link properties. A:link defines the color or the normal link, A:visited defines the color of a visited link, A:hover defines the color of the link while your mouse is over it, and A:active defines the color of an active link. Lets take a look at the format…

A:link {color: purple}

Will make your links purple in color. Lets take a look at the color scheme I used for my CSS links:

A:link {color: navy}
A:visited {color: purple}
A:hover {color:teal}
A:active {color:navy}

These are the 16 colors you can use that are taken from the Windows color palette:

Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

To give your links a background color, you can type this:

A:link {background-color: blue}

To get rid of the underlining in your links, you can type this in your CSS file:

A:link {text-decoration: none}

So for example, to put it all together, if you wanted unvisited links to be blue in color, with no underlining and a red background, you would need a line in your CSS file like this:

A:link {color: blue; text-decoration: none; background-color: red}

Got it so far? Great. Lets move on to fonts.

Controlling Fonts

Controlling fonts is one of the great things with CSS. Lets take a look at this piece of CSS code:

BODY { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 2px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000000; text-decoration: none}

The above may seem a bit confusing at first, but if you look at it piece by piece, it makes sense.

The BODY tag defines that the text in the body of each page uses the Verdana font. If the Verdana font isn’t on the users computer, it will use Arial next, and so on. The 2px defines the pixel size of the font, in this case 2 pixels. Normal defines the font style, as opposed to italic and oblique. Next is font weight, the weight of a font is how bold it is. The font-weight property affects how heavily text is drawn on a page.

Font-weight may take two kinds of values, keywords and numerical values.

You may use the following keywords: normal, bold, bolder, lighter.
bolder specifies that the text should be one degree bolder than the surrounding text (the parent element).
lighter specifies that the text should be one degree lighter than the surrounding text.

Font-weight can also be specified using numerical values: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Each value is one degree bolder than the previous. Normal is equivalent to 400. Bold is equivalent to 700.

Text transform is set as none above..other possible values are:

capitalize, where every word is capitalized (the first letter is in capital letters).
uppercase, where every letter is in uppercase.
Lowercase, where every letter is in lowercase.

Color is set to #000000 above, or black. The hex value can be set to any valid color using the HTML color chart.

Text decoration can be set to none, or a list of one or more of underline, overline, line-through, or blink. If you use more then one value, separate them with spaces.

Lets take a look at some CSS examples. The first example is this site, this is my CSS file…id1.css, that I used for this site:

BODY { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 2px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000000; text-decoration: none; background-image: none; letter-spacing: normal; text-align: left; word-spacing: normal}
A:link {color: navy}
A:visited {color: purple}
A:hover {color:teal}
A:active {color:navy}

<style type=”text/css”>
BODY { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #CCCCCC; text-decoration: none; background-color: #000000; background-image: none}
</style>

I will be keeping this up to date as more information and the CSS standards are updated.

Leave a Reply

Your email address will not be published. Required fields are marked *