Page Formatting Using Style Sheets  pwp home  >   Reference Library  >   Advanced  >  Style Sheets page formating

In our first installment of style sheets, we covered the basics of how to add style sheets to your web page and how they can provide additional formatting control and design flexibility. In this article, we'll discuss in more detail, and give examples of, some of the specific features and properties of style sheets.

The attributes listed in the Quick Reference allow you to control such things as font color, font size, font style, spacing between paragraphs, leading, and much more. These attributes give you precise control over how your page is displayed in a style sheet aware browser such as Netscape Communicator and Internet Explorer v3.0 and above.

There are several ways that you can apply style sheets to your HTML elements: you can define them for specific HTML tags such as headings (Hn), table rows and cells (TR and TD), paragraphs (P), and items in lists (LI); you can define a style sheet "class" and then apply that class to an HTML tag; or you can define different classes for the same HTML tag, with each class having a slight variation (such as color, font size, or font style).

To demonstrate this, let's start off by defining a simple style sheet for an H1 heading. For this example, we'll assume that you're using an embedded style sheet inside a STYLE tag that is placed within the HEAD section of your web page. In this example, we'll specify that all H1 headings on a page should use a size of 15pt, Arial as the font style, and be maroon in color. Notice that the attributes are separated by semicolons (;):

H1 {font-size: 15pt; font-family: Arial; color: maroon}

Now each time you use the <H1> tag on your page, it will be displayed as defined by this style sheet.

Another method of defining a style sheet is to define a "generic" style sheet class. Once a generic class has been defined, it can be used for other HTML tags on your page. Classes are defined by using a period (.) followed by a unique name of your choosing that's used to identify that class. Using the example above, we could define a style sheet class called "maroon":

.maroon {font-size: 15pt; font-family: Arial; color: maroon}

To then apply this style sheet to a H1 heading, you'd do something like the following, with the end result being the same as in the first example:

<H1 CLASS="maroon">This is a maroon heading</H1>

If you wanted to apply this style sheet to another HTML tag, such as a paragraph, you'd do something like this:

<P CLASS="maroon"> This paragraph would have maroon Arial text 15pt high, the same as the H1 examples above. </P>

Now, let's say that you want to use that you want to use multiple H1 tags on your page, but you want each one to be a different color and/or font size and/or different font style. You can do this by either defining a generic class, or you can define additional class variations for the H1 tag. To define different classes for the same HTML tag, you'd do something like this:

H1.maroon {font-size: 15pt; font-family: Arial; color: maroon} H1.blue {font-size: 17pt; font-family: Arial; color: blue} H1.green {font-size: 19pt; font-family: Courier; color: green}

Then, in order to apply these styles to headings on your page, you'd do this:

<H1 CLASS="maroon">This is a maroon heading</H1> <H1 CLASS="blue">This is a blue heading with 17pt type</H1> <H1 CLASS="green">This is a green heading with Courier 19pt type</H1>

The above examples demonstrate only a couple of the attributes that are available when defining a style sheet for an HTML element. The following example demonstrates a more complicated style sheet for the H1 tag:

H1 {font-size: 15pt; line-height: 17pt; font-family: Arial; font-weight: bold; color: maroon; text-align: center; background: pink; text-decoration: underline}

In the above example, the text displayed for the H1 heading will be centered with 15pt bold Arial type with 17pt spacing between lines. The text will also be maroon on a pink background, and will be underlined.

So far, we've only discussed how you can use style sheets to change size and colors of text on a page. However, there are also attributes that allow you to change the formatting. For example, you can control the space between lines, the leading of paragraphs, and margins. Let's say that you had a paragraph of text where you wanted the first line to be indented half an inch, left and right margins of half an inch, and all the text aligned right. The following style sheet would do accomplish that:

P.mystyle {text-indent: 0.5in; margin-left: 0.5in; margin-right: 0.5in; text-align: right}

To apply this style to a paragraph on your page, you'd do this:

<P CLASS="mystyle"> If this were a long paragraph, the first line would be indented, there would be a half inch margin on each side, and the paragraph text would be aligned right. </P>

Taking this example even further, you could also specify how large, what color, and what font the text within the paragaph would be displayed. Like this:

P.mystyle {font-size: 15pt; line-height: 17pt; font-family: Arial; color: maroon; text-indent: 0.5in; margin-left: 0.5in; margin-right: 0.5in; text-align: right}

Using style sheets, you can also control the look of links on your web page in the same manner that you would with any other HTML element. Following are brief examples of how you'd do this:

A:link {color: blue} A:visited {color: red} A:active {color:orange}

You can set any font or text formatting properties on these anchor classes, including color, font-size, font-weight, and/or text-decoration.

With the information discussed here, you should be well on your way to using style sheets to control the look and formatting of your web page. Keep in mind that not all browsers support style sheets. So a good rule of thumb is to create your web pages using standard and valid HTML so that your pages will look good for those visitors whose browser don't support style sheets, then use style sheets to provide additional formatting.