CSS tutorials - part 2

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.

CSS tutorials - Part 3

Table of Contents

HTML references		Graphics design references
HTML tag reference chart HTML color code chart Web safe color palette chart Browser compatibility chart		GIF vs JPEG, which is better? Photoshop references