Styles—Basic Concepts

Construction and Application of Styles

General notes

Using styles to achieve presentational effects is a two-step process: the style rule(s) must be constructed, according to rather strict rules of syntax and terminology; and then the rules must be applied. In my discussion below, I will first explain how to construct a style or set of style rules, then show you how to apply it to an element (a particular piece of content) on a web page, an entire web page, or a set of web pages.

The terminology you use for specifying property values must be exact, and, to make matters even more complicated, there are some effects that are supported by some browsers and not others. (There is information about some of these problems in some of my references.)

If your HTML editor doesn't let you choose your effects from menus and then write your styles for you (like Dreamweaver does), and you have to type your styles by hand, you'll need to consult a reference for these properties and values. Fortunately, there are some good ones available. The CSShark site has a page of links to good references, plus it has a lot of good information and tutorials itself.

Even if you don't have to write out your own styles, the site is worth a look for a deeper understanding of styles, how they should be used and how to take full advantage of their capabilities. Also, even if you don't have to type out your styles by hand, it's very useful to have at least a passing acquaintance with styles syntax for troubleshooting, emergencies, and simply to be a more knowledgeable web author.

 
 

The best way to take advantage of the full power of styles is to incorporate a set of style rules into an external style sheet. This CSS file may then be attached (via a line of code in the <head> section of a page--see below) to any page whose appearance you want to be governed by these rules. You can see why although some advance planning is required for using this method, it also presents great advantages when you want to change the look of a set of pages--you can do it all at once.

The same (or a different) set of style rules can be designed to apply only to a single page. In this case, the rules are entered into the code of the page itself, in the <head> section. And, finally, you can apply a style rule (and it can be "stacked" to include several different elements) to a single element on a page--a paragraph, a list, a block containing several elements (use a <div> tag to do this) or a span of characters within a larger element (for example, one sentence within a paragraph; use a <span> tag for this application).

Now let's look at each of these methods in turn.

Inline Styles

The easiest way to use styles, from the standpoint of quick-and-dirty application, is by assigning a style to a particular single element on a page--an "inline" style statement. By using styles this way, however, you are losing the big advantage of being able to update a whole page at once. But there are certainly some cases where this type of style usage is called for. If, for example, you have assigned a presentational effect to a set of pages (say, a particular type or color of font) using an external .css file, but there is one paragraph on one page that you want to appear in a different font or color. You can use an inline style to specify the different effect right at the point where you want it to be applied. (You can also define a special class in your external style sheet that will only be applied in certain instances; I'll show you how to do that below.)

That's the real advantage to this method of using styles: the style rule is present right where the effect will be seen, not 'way up in the <head> of the document or in an external file.

To construct an inline style, follow this formula:

<tag (whichever element you want the style to apply to; this is called a "selector" in CSS-speak) style="property:value">

Note that several properties and values can be "stacked" into a single inline style statement, but they can apply to only one element at a time, so there is alway only one HTML tag present in each inline style statement. You can also "stack" several values onto a single property by simply separating them by spaces; for example, the width of the border (2px, or two pixels), the style of the border (solid) and the color (green) are all specified in the example below. However, if you "stack" different properties into a single inline style, separate them by semicolons, as in this example:

<p style="border: 2px solid green; text-align: right">

In this example, the paragraph in question will be bordered with a two pixel-wide, solid green border, and the text within the border will be right justified. As is this paragraph. Note that the spacing in the statement must be exact: one space after the :'s and no space between 2 and px, for example.

Single Page Style Sheets

Inline styles are easy to explain because the point of the effect is where the style rule is placed in the HTML document. For style sheets, however, that can apply to either an entire page or a set of pages, it gets a little more complicated. This is because the definitions of the style rules are in one place (in this case, in the <head> section of the document) but their application--where the effects appear on the page--is somewhere else. There are two types of syntax you have learn, therefore: style rule syntax and application syntax.

  
 

First the style rules themselves. There are two basic types (and one specialized type, which I discuss here). The first, and easiest to apply, is what I call tag modification, in which the "name" (or "selector") of the style is simply the tag itself. In this case you specify how a particular tag (for example, <h2> or <p> or <body>) will be rendered, what attributes it will have. The tag will ALWAYS have those attributes, throughout the page. Remember if there is a single case that you want to appear differently, you can insert an inline style.

Or you can use a custom class, which is the second type of style rule. In this case you give the rule a "name" ("selector") that is something other than a tag label, a word that will mean something to you as a web author. For example, you can have a class named "red" that, when applied, will make the affected text red.

The syntax for each type of style rule is similar, but does have one important difference, as you'll see below.

If you are customizing the look of a particular tag, the basic syntax is:

selector (in this case, the tag name) {
property: value;
property: value;
}

  

For example:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
This example shows how you "stack" more than one property in a single style rule--you separate the statements by semicolons. But notice that you also need a semicolon after the final rule. Also note that you do not use quote marks around the properties or values. The rule above would make the <body> of the HTML document display in Arial, Helvetica, or a generic sans-serif font and the font would be sized down one notch from normal. This is part of the standard customization I use for <body> tags in my pages.

Now, if you want to create a custom class, a set of styles that would apply wherever you decide, but not necessarily in every instance of a tag, the syntax is very similar, but not exactly the same:

.selector (in this case, a word that is not a tag name) {
property: value;
property: value;
}

  

For example:

.arial {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}

Other than the name of the selector, the important difference between this syntax and that in the first example is pretty hard to detect. It's the "." before the selector name in this case. Small, but important! This example would make any text where the "arial" class was applied appear in a sans-serif font, one size smaller than normal.

So, how do you apply these style rules you've constructed to elements on your page? In the first case, where you are redefining the look of a particular tag, you don't have to do anything (this is why I like this method the best). Wherever that tag is present, the style rule will automatically be applied (unless it's overridden by an inline style). The custom class, however, has to be applied in each case. You do it this way:

<tag class="class name">

For example:

<p class="arial">

In this example, the paragraph in question would appear in a sans-serif font. Notice that in the application statement, the class name DOES NOT have a period before it. Sorry, but that's the way it is.

That may seem pretty involved, but the good news is that the external style sheet, which I discuss next, is constructed and used in the same way, so there isn't another set of construction/application rules to learn.

External Style Sheets

An external style sheet is simply a text file with a .css extension that contains your style rules, as constructed according to the rules above. The only difference between the style sheet you put in the <head> section, above, and an external style sheet, is that the external sheet, as its name implies, is a separate file. So how does it get linked up with the document(s) to which you want it applied? In the head section of each of these documents, you insert this line of code:

<link href="stylesheet name.css" rel="stylesheet" type="text/css">

The only part of the above template that will change is the name of your stylesheet file. Don't worry about what the other stuff means (I don't!), just copy it each time. The following is the statement from the <head> of this document which links it to the stylesheet I set up for this set of guides:

<link href="inter.css" rel="stylesheet" type="text/css">

Once your style sheet is linked to your HTML document, the page will appear as you have directed, as long as any custom classes you defined have been properly applied to elements on the page. For an exciting demonstration of the power of external style sheets, once you've got several pages linked to the same stylesheet file, go into that file and change one of your properties. Voila! The change is automatically seen in all the pages!

What the "cascade" in CSS means

Now that you've seen the three different ways in which styles can be applied, I can show you how the word "cascading" got mixed up in the terminology.

The style rules that you might set up using the different methods can work together, with some overriding others as needed. The folks that thought this up must have liked the term "cascade" rather than "override" (it does sound more poetic) but "override" is really what it means, and according to a strict formula.

The style rule that takes precedence over all others is the inline style rule. Absent an inline style rule that contradicts it, next in the order of precedence is the set of style rules present in the <head> section of a particular page. And finally, absent either of these rules contradicting it, you have the external style sheet, which is a separate file that can be linked to several web pages, governing the presentation effects on all of them. To summarize:

  

It is also possible to have more than one external style sheet linked to a page. If this happens, the sheet linked last (the one closest to the body of the document) takes precedence. (If there are more than two, they take precedence in order, beginning with the last one linked.)

Why would you want to do this? If you have a large site with subdivisions each containing sets of pages, you might want to have a "basic" set of rules to cover all of the pages, rules dealing with things like font style and page background. But then each subdivision can have its own look by having a second style sheet applied to govern the color scheme, for example.

It's worth pointing out here that there are usually several different ways, using these various styles methods in combination, to achieve a particular effect or set of effects. Because of their overwhelming advantages it's usually best to rely on external style sheets as much as possible. But there are always other options, some of which might be quicker or easier to apply in a particular case.

Back to Styles—Basic Concepts main page
Back to Intermediate HTML main page