CSS Basics

Style sheets can get complex depending on how involved the formatting of your web pages is. Fortunately, the basics are straight-forward. Style sheets consist of rules that are applied to text associated with specified mark-up tags. The following style rule for a level 1 heading contains the most commonly used attributes found in style sheets.

<style>
h1 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 20pt;
    font-weight: bold;
    font-decoration: underline;
    color: red;
    background-color: transparent;
}
</style>

Like all style sheets that are placed directly in a web page, this one is enclosed by <style> tags, which would be inserted in the head section of the HTML file. The rule begins with the mark-up identifier, in this case h1. The style attributes belonging to the follow enclosed by braces, { and }. The name of each attribute is followed immediately by a colon. The value assigned to the attribute is then listed and followed by a semicolon. The above example contains six attributes, which are described below.

font-family: Defines the font to be used. It is a common practice to list more than one font, since the first one listed may not be supported on the computer displaying the page. Arial is a standard font on computers running Microsoft Windows, while Helvetica is used on the Apple Macintosh. A generic family name like serif, sans-serif, or monospace should also be given if none of the named fonts is available on the computer.
font-size: The size can be given in points, which is abbreviated pts. The text in the current paragraph is set to 10pt. Be careful not to specify a size that is too small to read. Anything smaller than 10pt is unreadable on some systems.
font-weight: This is often used to specify boldfacing of text. Other possible values include normal, bold, bolder, and lighter.
text-decoration: Possible values include none, underline, overline, line-through, and blink. That last one should be avoided like the plague.
color: Specifies the text color. You can use one of the 140 named colors or specify the color number in RGB format.
background-color: Similar to color, except it applies to the screen area behind the text. In this example, it is set to transparent so the regular background color or image will be displayed.

There are many other style attributes controlling such feature as line spacing and margins, but those shown above are sufficient for the majority of formatting done in most web pages.