Basics of HTML
Styles: Theory and Construction
How Styles Work
Using styles is a two-step process
- the style rule(s) must be constructed, according to rather strict rules of syntax and terminology
- then the rule(s) must be applied
Under the Styles: Usage tab, I first explain how to construct a style or set of style rules to achieve a particular effect, then show you how to apply it/them 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. (W3Schools in particular is very clear about describing browser support of various tags.)
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, W3Schools provides a comprehensive reference with definitions and examples.
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, 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.
Definitions
CSS: acronym for Cascading Style Sheets, used to refer to coding for Styles in general (see the box on the right for an explanation of that Cascading terminology). You might see CSS3 instead of just CSS—this refers to the last comprehensive version of the CSS standards.
Inline styles: styles which apply only to a single element (although that element can be a <span> or a <div> which are large chunks of content) that are applied at the point where the element appears on the page
Style sheet: a collection of several styles to apply to different elements in a page or group of pages. If it applies to a single page, it's written out in the page's <head></head> section.
External style sheet: a separate file containing a collection of several styles that can be applied to any page that properly references the sheet within its <head></head> section. This file must have the extension .css in order to be recognizable as a style sheet by browsers.
What does "cascading" style sheets mean?
Using the definitions in the box on the left, I can show you how the word Cascading came to be appended to Style Sheets, giving us the immortal acronym CSS.
This is just a quick overview of "Cascading." After you've studied "The Ways to Use Styles," below, and understand how the different types of styles are used, it will make more sense.
The style rules that web authors set up using the different methods—inline styles, single-page style sheets, and external style sheets—can work together, with some overriding others as needed. The folks that thought this system up must have liked cascade better 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></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:
- an external style sheet file (with a .css extension) governs presentation effects on any page linked to it
- unless overridden by a style rule written in the <head> of a particular page, which governs presentation effects in that page and that page only
- unless overridden at a specific point in the page by an inline style
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.
The Ways to Use Styles
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></head> section of a page—see below) to any page whose appearance you want to be governed by these rules. Although some advance planning is required for using this method, you can see how it 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></head>section (see below).
And, finally, you can apply an inline 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></div> tags to identify this chunk of the page) or a span of characters within a larger element (for example, one sentence within a paragraph). Use <span></span> tags for this application). See the details of inline style construction below.
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.
Say, for example, you have assigned a presentational effect to a set of pages (for example, 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.
(Another way to do this using <head></head> or external style sheets is to define a special class that will only be applied in one instance. See how to do that below in the Single Page Style Sheet box. Remember, there's almost always more than one way to use styles for a desired effect.)
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></head> section of the document or in an external file. Where it might be forgotten about or lost track of.
To construct an inline style, follow this formula:
<tag (substitute 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 always 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. Browsers seem to be forgiving about spacing within style statements. But if you are having trouble with an effect displaying correctly, check your spacing. It's always ok within a particular property "stack" to have no spaces.
W3Schools provides this comprehensive reference list of CSS properties. Their terminology needs to be exact. For example, to make the right side of your border a certain color, you need to use this property: border-right-color: (not border-color-right).
If your editor doesn't write the properties into your source code for you, or if you need to check something, refer to this list.
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 in the Single Page Style Sheets box on the right. The only difference between the style sheet you put in the <head></head> section, 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></head> section of each of these documents, you insert this line of code:
<head>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
The only part of the above template that will change is the name of your stylesheet file, what follows the href=attribute. The rel attribute is short for relationship, and type just tells the browser what kind of file it's being asked to relate to the HTML file that this code appears in. But you really don't have to think about what these attributes mean, just copy them each time. (Or let your editor do it by specifying the.css file you want to attach to a document.)
For example, here's the <head></head> section of one of my personal web pages, with the line linking the appropriate style sheet file in red:
<head>
<title>Alaska: 1992--Kenai Fjords</title>
<link href="../alaska.css" rel="stylesheet" type="text/css">
</head>
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 will automatically be seen on all the pages!
Style Sheets Applied to Single Pages
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></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.
Style Rules
There are two basic types (and one specialized type). 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 element red.
The syntax for each type of style rule is similar, but does have one important difference, as you'll see below.
Modifying Tags
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. 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.
Custom Classes
A custom class is a set of styles that apply wherever you decide, but not necessarily in every instance of a tag. The syntax is very similar to tag modification, 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. Small, but important! If you leave it out the browser will not recognize the statement as a style rule and will ignore it. This example would make any text where the "arial" class was applied appear in a sans-serif font, one size smaller than normal.
Application of the Rules
In tag modification, you don't have to do anything (this is why I like this method the best, as I am at heart a lazy person 
). 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 with whatever properties you specified in your .arial class definition, back up in the <head> section of the page. Notice that in the application statement, the class name DOES NOT have a period before it. Sorry, but that's the way it is: remember to put the period in the style rule and omit it when you apply the style.
Making a style sheet like this may seem pretty involved, but the good news is that the external style sheet, discussed elsewhere on this page, is constructed and used in the same way, so there isn't another set of construction/application rules to learn.
Advantages of Using Styles
Styles have many advantages over the old ways of marking up text for browser display. One of the major ones is that they are the right thing to do—you know that by using them you are in compliance with the latest W3 standards.
In addition, when persons with certain disabilities use the Web, they have the option of substituting their own personal style sheet to govern how a page is displayed on their computer. For example, if someone has a vision problem that requires a very large font, or a particular color scheme for text to be readable, they use a style sheet dictating this sort of display, which overrides the style sheet attached to the page. Of course, this means that they will not see the presentation effects as the web author intended, but they will see the text, which they would not be able to do without this capability. If a page does not use style sheets for its formatting, but rather the old-fashioned <font> (and other) tags, the visually disabled person is out of luck (and so is the web author, who has lost a potential reader).
There are other, less altruistic reasons for using styles as well.
With them, you can make wholesale changes to the appearance of web pages in a snap. By tweaking a style sheet, you can update the look of a page, or even of an entire site, very easily. (That is, if you have set up your styles and their applications correctly.) This is the big design advantage of styles.
In addition, HTML code is generally cleaner using styles than it is with a proliferation of <font> tags. Besides being more esthetically pleasing to those in the HTML know, cleaner code means faster downloads for viewers and easier troubleshooting for webmasters.
Also, by retaining the use of special tags like headings, instead of using <font> tags to specify heading effects, you make it easier for search engines and other indexing programs, as well as devices like screen readers, to get at your content and express it clearly.
The increasing number of specialized devices used for accessing web pages—cell phones, PDAs, in-vehicle displays, etc.—make it even more important to mark up your content in a standardized, coherent manner. The individual device's software can best decide how to display your content—styles let this happen.
Styles can do even more!
The current CSS standard for styles has a lot of great features, many of which can accomplish effects that used to require scripting or other programming techniques. They range from simple upgrades like being able to give an element rounded corners easily, to spectacular effects like transformations, animation, and "word art" text effects. I'm particularly excited about the capability to break text up into newspaper-like columns with ease.
You'll find hints of what's possible with these fancy features at appropriate points in this guide, marked by this graphic: 
. For a a link to a complete properties list, visit W3Schools. Be sure to notice that not all browsers support all these cool features, and some require a special prefix for the properties to work. For the latest news on adoption of the features, look at W3Schools' CSS Homepage.
Graphics credits
The elegant graphic line on this page, the stylish (get it?) penguin, and the other cute icons, came from Realm Graphics, a nice free graphics site
I took the photo of the waterfall in central Colorado
Last updated:
