Formatting Your Styles

Now that you know what a Cascading Style Sheet is and where to place it, we should discuss the formatting of your styles. Let's take another look at a snippet from a cascading style sheet. Remember to include your style and /style (both in <>) tags within your top-of-the-page or stand-alone page style sheets.

h1 {font-family:Arial;
font-size: 3em;
font-weight: bold;
text-align:center;
background-color:black;
color:yellow;}

The first portion of the style we notice is the h1. Each style "chunk" of a style sheet always begins with a named element, that is, you list the HTML command you want the style applied to. In this case, we're formatting the style of the H1 level headings of our documents.

The next keystroke we notice is the { brace. After naming the element to apply the style to, we always include all variables for the style within two anchor braces {}. Browsers see the braces as inclusion begin and end points for the styles.

Now comes the variables themselves. CSS includes any number of variables. Two word variables, such as font-family are always hyphenated. Single word variables like color do not require a hyphen or any other sort of punctuation.

The first variable in our code sample, font-family, lets the browsers know that what follows applies to the font family of (the HTML element before the {) H1 commands. Variable names (such as font-family) are always followed by a : (colon).

The colon designates that a style for the aforementioned variable. In the case of our font-family: variable that style is Arial.

The colon after the variable may be followed by a space, but the space is not necessary.

In the style designation h1 {font-family:Arial;} your visitors' browsers will apply the font face Arial to all of the H1 commands of your HTML document.

In many cases, you want to make more than one style designation for a given HTML element. To do that, you place a ; (semicolon) at the end of your first designation (ie., after the word Arial). You may then type subsequent commands. To make your code easier to follow you may want to include optional Returns at the end of each style line, as I have done in the style sample.

Each HTML element style "block" must end with a } (Close brace). The last style definition neednot have a semicolon after it, but you are free to decide whether or not to include it. For example the styles:

h1 {font-family:Arial;
font-size: 3em;
font-weight: bold;
text-align:center;
background-color:black;
color:yellow;}

AND

h1 {font-family:Arial;
font-size: 3em;
font-weight: bold;
text-align:center;
background-color:black;
color:yellow}

render the same response, though the semicolon after the style yellow has been omitted in the second example.

Subsequent tutorials will go through different elements and variables, showing you the exciting ways to format your web pages using CSS.