You will need a reference book when working with the CSS style declarations. I can't cover all the details here anyway; I'm just going to hit the high points, so things will look familiar when you dig in. See my HTML links page for key books and online CSS references.
The style declarations themselves are pretty simple; you mostly need the reference to see all the different style properties that can be set, the values each can be set to, and which combinations are supported by which browsers and how well. Typically in a particular browser version, many basic CSS properties and values work the way they are supposed to, some properties are partially implemented, but not as defined in the CSS specifications, and some advanced properties don't work at all.
Close your HTML tags. Tags like heading and hyperlink tags must already have both opening and closing tags in order to function at all. Other tags such as paragraph tags (P) and list-item tags (LI) are often considered to have optional closing tags; those closing tags should be included for best results in combination with CSS style sheets.
Get rid of tag abuse in favor of pure structural HTML. Tag abuse, also called presentational HTML, would include things like nested BLOCKQUOTE or DL tags used for indents, a PRE block inside a BLOCKQUOTE for indent, multiple BR tags used to create vertical whitespace, and so forth. Use the HTML tags in your documents to only strucurally identify elements as headings, paragraphs, lists, block quotes, and so on. Whenever you want to control whitespace and other formatting, do it in the CSS style definitions for the HTML tags and CSS classes, where you can "tweak" all elements of one kind in your site with a single change.
If you have a big load of existing HTML to "clean up," this may amount to some work. On the other hand, depending on the user-friendly authorship tool you choose, you may be able to simply open your existing page files in the new program, and it may identify the problems for you, or even fix them. Dreamweaver has some cleanup features, including a specific "Clean up Word HTML" function.
There's also an open source utility called HTML Tidy, designed to help with exactly this sort of structural HTML cleanup. See also the original HTML Tidy homepage. There's also an HTML Tidy library of functions available, which can be included in other software, and the powerful open source Web editor Notepad++ in fact includes them.
If your pages have any text elements presented as bitmap graphics in order to get a certain "look," depending on what browser class you're coding for, you can probably change them back into real searchable text elements, and reproduce the desired "look" with CSS property settings—background colors, fonts, margins, borders—in the site style sheet.
An external CSS style sheet is simply a text file, extension CSS, containing a series of style declarations. Style declarations look like this:
selector { property: value; }
H1 { font-family: Arial; }
Selectors can be identifiers of specific HTML tags, as here, or they can be CSS classes (next topic) which can be defined for general use or for particular HTML tags.
One style declaration can be applied to multiple selectors on one line:
H1, H2, H3, H4, H5, H6 { font-family: Arial; }
The effect of this example line, in an external site-wide style sheet, is to set the font for all six levels of headings in the entire site to Arial, a Windows sans-serif font. You can change the formatting of all those headings at the same time by changing this one line in the style sheet file.
You can also set more than one pair of property/value definitions:
H1, H2 { font-family: Arial; margin-left: 5%; color: red; }
Let's suppose we want to present some elements in our site as slightly de-emphasized "small print," but still keep them easily readable. The selector for a CSS class is a name you choose with a period in front of it. CSS class names may not contain spaces or underscores.
.small-print { font-family: Verdana, Arial, sans-serif; font-size: .9em; }
For the font-family property, the comma-list value gets handled as first, second, and third choice:
You apply the "small-print" CSS class in your HTML code like this:
<P CLASS="small-print">Note: your mileage may vary.</P>
<OL CLASS="small-print">
<LI>First step</LI>
<LI>Second step</LI>
<LI>Third step</LI>
</OL>
This is a very useful technique, called a generic class. Because we didn't tie our "small-print" CSS class to any particular HTML tag ID when we defined it in the site style sheet, we are free to use it in different kinds of HTML tags. Also, in the example number list, the class specified in the opening tag will be applied to all the list items.
If we had wanted to use this style with paragraphs only (a regular class) it would look like this:
P.small-print { font-family: Verdana, Arial, sans-serif; font-size: .9em; }
Regular classes allow the same style name to be formatted differently for different HTML tags.
You can apply more than one CSS class to the same HTML element. For example, besides small-print I have generic classes on this site called center and double. The double class applies a double borderline format to HTML tables visually presented as tables, as seen on this page. I can and do have tables with all possible combinations of centered, small-print, and double-borders formatting:
<TABLE CLASS="center">
<TABLE CLASS="center small-print">
<TABLE CLASS="center double">
<TABLE CLASS="small-print double">
<TABLE CLASS="center small-print double">
You can use CSS to control the results when a user prints your pages. This should work in Firefox, Opera, and Internet Explorer 6.
Here's some code from this site's external style sheet:
@media print{
BODY { background-image: none; }
.toplink { display: none; }
SPAN.url { color: black; background: transparent; }
}
The styles enclosed in the code @media print { } only take effect during printing or print preview.
If you're reading this in Firefox, IE7, or Opera, you'll also have noticed all hyperlinks on this site highlight when you point your mouse cursor at them, or "hover" them. That's done with the CSS :hover pseudo-selector, which I don't recommend for general use because it doesn't work in IE6. IE7 is progressively replacing IE6, but version 6 still has a very significant usage share as of late 2007.
More code from the site style sheet:
A[HREF]:hover { background: #EEE; color: black; }
P.quote A[HREF]:hover, P.pullquote A[HREF]:hover,
P.pullquotewide A[HREF]:hover, TABLE.nav-menu A[HREF]:hover,
.mapblock A[HREF]:hover, .grayrow A[HREF]:hover
{ background: #FFF; color: black; }
The first line provides a basic gray hover highlight for links appearing against the default white background. The other lines provide for white hover highlights for elements of this site formatted with color or gray backgrounds, such as in the top-of-page blue breadcrumb menus and on the site map.
The value for the font-family property is often a comma-separated list. For this property, the list gets handled as first choice, second choice, and so forth.
If a font name includes one or more spaces, you must enclose it in quotes:
BODY { font-family: Georgia, "Times New Roman", serif; }
CSS lets you specify any font name you want, but the user will only see that font if they have that particular font installed on their PC.
I recommend you use a comma list of at least three values for font-family:
This gives you a good chance of getting what you want or something close, while even someone on a Mac will at least see a font that's in the right category.
My Windows fonts page has a chart that shows the specific fonts that come with six versions of Windows plus the Web core fonts set, and can be useful as a guide to Web fonts.
Times New Roman, one of the original Windows fonts and usually the initial default font in Windows browsers, is actually not too bad as a Web font. There's a measurement called aspect value, which is the ratio between a font's x-height and the font size. The bigger the aspect value, within limits, the more readable the font tends to be. Here are some specific aspect values: Verdana 0.58; Comic Sans 0.54; Trebuchet MS 0.53; Georgia 0.50; Times New Roman 0.46. Various serif and script fonts used by printers go as low as 0.3 to 0.4 aspect values. So Times New Roman is actually pretty good, but Georgia is enough better to be noticeable.
CSS styles can be applied to HTML in three different ways:
| Loaded from an external style sheet file, using a LINK tag in each page header |
<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css" TITLE="style1"> |
| Embedded styles: enclosed in STYLE tags in individual page headers. |
<STYLE TYPE="text/css"> <!-- H1 { font-family: Arial; } --> </STYLE> |
| Inline styles: as a STYLE attribute of individual HTML tags, in the page body. |
<H1 STYLE="font-family: Arial"> Widgets</H1> |
The big win here is to keep all your styles in a single external style sheet file, loaded with a LINK tag. If you can do that, you'll only have one place to go to control all the formatting for all the pages in your site.
Besides the header LINK tag, there's also an "@import" technique for loading external style sheets, which allows one CSS file to include the styles from another CSS file. This is called "nested external style sheets."
You should be able to tell when Internet sites are using CSS formatting by looking at their Web page source code, and even view and save their CSS style sheet code, to study and to give you ideas.
The CSS formatting will be applied using one or more of the three methods in the previous section above. You can view the page source code (from the browser View menu) and look for or search for the word style. That will find all three methods: embedded and inline styles in the HTML code, and the LINK tag or tags for linked external CSS files in the HTML page header. Unfortunately searching for "style" will also find every use of that word in the regular page text. Nothing's perfect.
With embedded and inline styles, you will see the CSS style declarations right in the HTML code. For an external stylesheet file loaded with a LINK tag in the page header, you'll need to do an additional step to see those styles.
To view an Internet site's external stylesheet file:
Examples:
| If page URL is | and LINK tag contains | then use style sheet URL |
|---|---|---|
| www.isp.com/ www.isp.com/page.html (either) |
HREF="basic.css" | www.isp.com/basic.css |
| HREF="styles/basic.css" | www.isp.com/styles/basic.css | |
| www.isp.com/dir/ www.isp.com/dir/page.html (either) |
HREF="basic.css" | www.isp.com/dir/basic.css |
| HREF="styles/basic.css" | www.isp.com/dir/styles/basic.css |
If you're using Mozilla Firefox, Mozilla Navigator (from Mozilla Suite/Seamonkey) or Opera, you should just see the text of the CSS file displayed in the browser. You can then either simply read it, or save part or all of it to your local disk if you'd like.
If you're using Internet Explorer, because IE versions 4 through 6 act as the Windows shell, things can be a little more complicated. If your system has a default application defined for the *.css extension and file type, such as Dreamweaver, most likely the CSS file text will open in that. If you have a download manager installed for IE such as Free Download Manager, most likely the small CSS file will download quickly to your default downloads folder, and you can then open it in Notepad or any text editor.
Once you're looking at the CSS file, you may find that the first line looks like this:
@import url(main.css);
If so, the site is using nested style sheets. The style sheet file you are looking at uses that @import line to include the styles contained in the other style sheet file main.css. To view the contents of that other style sheet file, just use the same technique as before with the new filename. If what's inside the parentheses includes a directory path, include that in the address bar as before. There could even be more than one @import line, but they must always appear at the top of the CSS file.
The above three means of loading CSS styles lead in theory to five possible cascade levels, starting with choices made by webmasters, through more specific choices made by page authors, down to specific overrides by users. Again, in practice, if you can stick to just the single external style sheet file with all your site styles in it, you'll have a lot less work to do.
There are also three ways to load an external style sheet file in a LINK tag, only one of which most people need to learn, at least for now:
| 1. Persistent styles | <LINK REL="stylesheet" TYPE="text/css" HREF="basic.css"> |
| 2. Preferred styles | <LINK REL="stylesheet" TYPE="text/css" HREF="basic.css" TITLE="style1"> |
| 3. Alternate styles | <LINK REL="alternate stylesheet" TYPE="text/css" HREF="second.css" TITLE="style2"> |
Centralize control of styles. This is both to take maximum advantage of the natural ease of maintenance provided by styles, and because most people do really badly making their own styles. Use linked external style sheet files, and minimize use of embedded and inline styles. If possible, have a single style sheet file for the whole site; or at most, separate files for a small number of sub-site categories. Having one set of styles used across the site will give the whole site a consistent look and formatting, and make the site easier to use.
If you must use several sub-site style sheets, use the same CSS class names across all of them for consistency.
Let page authors use embedded page-header styles only if they really need them.* This would be justified to create an effect on a single page not supported by the site styles. If this same effect ever needs to be used on other pages, the styles for it should then be incorporated into the site style sheet.
Try to use inline styles sparingly if at all. Inline styles, in which style declarations are applied as an attribute of an individual HTML tag, essentially recreate the maintenance headache of 1997-style presentational HTML such as FONT tags.
Document your styles for your users. There should be a reference page somewhere in your site that sets forth exactly what styles are available and how they're meant to be used, with examples. Explain in detail why you have site styles, and what the benefits are to people using the site. If you want to encourage people to use readable Web fonts such as Georgia and Verdana, make them available for download from your documentation page.
Design your site styles conservatively. The whole site should still work with styles turned off (check by turning styles off in a browser and viewing the site). Use relative sizing for page elements: percent of page width for margins and table widths, and the "em" unit for font sizes. This means that margins and tables are sized relative to the user's browser window setting (making it irrelevant what monitor size or video mode they have, or whether their browser is full-screen at the moment). Also, larger or smaller font sizes in the pages will be executed relative to the user's base font size setting. Limit the number of fonts used: perhaps a serif font for body text, a sans serif for headings, and a monospace font for code text. This is just basic good typography. By all means, specify a list of possible fonts in the style sheet for each of these, ending with a generic ID. Individual users may end up with slightly different font sets being used, but each user will see a consistent look across the site.
site feedback