Cascading Style Sheets (CSS); Learning More

In the “Cascading Style Sheets (CSS) — Getting Started” article, the first in this series, you learned how to use an external style sheet. You simply include one line of code on your pages to affect the entire page with the style specified in that external style sheet.

This article will show you how to embed a style sheet directly into your web page. It will also show you how to define custom styles, styles not associated with any particular HTML tags.

There are four ways a style can be applied to a web page:

1. Styles are specified through the use of an external file, a method called “external style sheet” or “linked style sheet.” There is one file on your site that specifies the styles. Then, one line in each of your web pages links to that file. To change the style on all your web pages, simply change the external file. This is the method you learned in the first article in this series.
2. Styles are specified in the HEAD area of each page the style is applied to. This method is called “embedded style sheet” and is the method you’ll learn in this article.
3. A style is specified in the actual HTML tag where the style is applied. This is called an “inline style.” This will be addresses in a future article.
4. A combination of embedded and external style sheets. For this, each page has an embedded style sheet. Within the embedded style sheet are certain codes that import one or more external style sheets. This method is called “imported style sheet.” This will be addresses in a future article.

Using an Embedded Style Sheet

To use an embedded style sheet, create a test page and insert these seven lines into the HEAD area:

<STYLE TYPE=”text/css”>
<!–
BODY, TD, P, LI, BLOCKQUOTE {
font-family: sans-serif;
}
–>
</STYLE>

There is no need to upload the test page to your server. It can be tested right from your hard drive.

That’s all there is to it. The text on your test page is “magically” converted to a sans-serif font according to the style you’ve defined.

Note: If you have FONT tags specified in the source code of your test page, those will need to be removed so the CSS style can do its job.

You can specify exact font names instead of the generic sans-serif, serif, or monospace. If the font name is available on the user’s computer then it will be used. Arial and Helvetica are common sans-serif fonts for PC and Mac desktop computers. To control the exact font name to be used, with backups in case the one you specify isn’t available on the user’s computer, list the font names in order of preference, separated with a comma.

You’ve undoubtedly noticed that the method of defining a style is exactly the same whether you’re using the embedded style sheet presented in this article or the external style sheet presented in “Cascading Style Sheets (CSS) — Getting
Started”

If you used the CSS definitions presented in that previous article and made them into an embedded style sheet, this would be the result:

<STYLE TYPE=”text/css”>
<!–
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}

H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
background: blue;
}

A:link {
color: yellow;
background: red;
font-weight: bold;
}

A:active {
text-decoration: underline;
}
A:visited {
color: red;
background: yellow;
font-style: italic;
text-decoration: line-through;
}

A:hover {
text-decoration: none;
color: purple;
background: pink;
font-size: 22px;
font-weight: bold;
}
–>
</STYLE>

The method of specifying styles is the same whether you embed the style sheet or use an external file.

Using an external style sheet, all the style definitions are contained in one file. Using an embedded style sheet, each page has it’s own definitions. With the former, you can change the style of many web pages by changing only the one
file containing the style definitions. With the latter, you can change the style of individual pages with no effect on others.

Defining and Using Custom Styles

Regardless of what type of style sheet you use, you can define your own custom styles.

When you create a custom style, the name you give the style must not match any HTML tags. When you define the style, the name must begin with a period, but when you use the style then don’t type the period.

Here is an example of a basic style for common text tags and a custom style:

<STYLE TYPE=”text/css”>
<!–
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}

.reallybad {
font-size: 24px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
color: #CCCCCC;
background: #333333;
}
–>
</STYLE>

Custom styles are used within HTML tags to change the style of the entire tag — DIV, SPAN, P, TD, etc. A custom style, once defined, is called a “class.” Thus, to use a certain style, you use the “class” attribute and the class name as the value. When you specify a style in an HTML tag, it overrides whatever style, if any, that was previously defined for that tag. Here are a couple examples:

<p class=”reallybad”>Hello everyone!</p>
<p>Hello <span class=”reallybad”>everyone!</span></p>

In the first example line, the entire paragraph is printed with style “reallybad”. In the second line, only the word “everyone!” is printed with that style (“Hello” being printed with whatever style is defined for the P tag).

You can define and use as many different custom styles as you please.

Some of the styles demonstrated in the examples cause dramatic effects. They serve to demonstrate possibilities. Your actual implementation will probably be more pleasant to the eyes.

Will Bontrager

“WillMaster Possibilities” ezine
http://willmaster.com/possibilities/
mailto:possibilities@willmaster.com