Frequently Asked Questions (FAQ)

What do you mean by an element?

An "element" is a document element within an HTML file. For instance, the body of the page, a level-one heading (h1), a paragraph (p), an unordered list (ul), a hypertext link (a), and an inline image (img) are all elements within an HTML document. Elements are specified, or "tagged," using HTML tags. There should be no untagged text in an HTML document. Using CSS, you can apply style properties (colors, fonts, borders, backgrounds, margins, padding, and so on) to any element within an HTML document. If you need to learn more about HTML, I've written a highly-rated book, Learn HTML In a Weekend, that can teach you much more about HTML than I've been able to include in my CSS book.

Return to Menu.

Return to Front Page.

How do I get a print-media style sheet to work?

When defining a print-media style sheet (using media="print" in the STYLE or LINK elements), be sure to insert the embedded or linked style sheet in front of any other style sheets (such as a style sheet using a media="screen" attribute, for instance). Browsers that don't support the MEDIA attribute will then just default to the styles included in the last style sheet (your "screen" style sheet).

You also shouldn't confuse the use of a print-media style sheet with the separate "print" pages you often see on the Web. The point of a print-media style sheet is to be able to avoid having to create a separate document for printing -- instead, you just define a "print" style sheet that specifies how the document is to be printed.

Return to Menu.

Is there a typo on page 305?

Yes there is. In the book, the coding example reads:

<div style="text-align="center">

This should read:

<div style="text-align: center">

Return to Menu.

Why does my external style sheet link not work?

The most likely reason is that your style sheet isn't present where your browser is expecting to find it. If using only the file name as your link URL, the style sheet must be present in the same folder as the linking HTML file. If using a relative URL, remember that such a URL states the position of the linked file relative to the position of the linking file: for instance, url(../styles/mystyles.css) directs the browser to look inside a "styles" folder that is located inside of the current folder's parent folder.

When using an absolute URL, such as url(http://www.mydomain.com/mysite/styles/mystyles.css), for instance, your style sheet must be posted up to your site to the specific folder that the URL is pointing to, even if you're only still testing out your page locally. That's why it is a good idea to use relative URLs, rather than absolute URLs, because they work equally well both when testing your page out locally or after you've transferred it up onto the Web.

An additional "gotcha" that can crop up is case-sensitiveness on UNIX servers. You may find that a link works locally, but not after you've transferred your files up onto the Web. That may be because the file name or folder path in your linking URL does not exactly match the actual file name or folder path. On a UNIX server, mystyles.css and MyStyles.css actually refer to two different files. I personally try to make an effort to name all files and folders in my site using only lowercase letters. Some FTP programs, such as WS_FTP for Windows, for instance, have an option to convert file and folder names to all lowercase when you transfer them up onto the Web.

Return to Menu.

How do I set underlining?

"Setting font-style: underline doesn't work!"

Since you can set bolding and italics using the font-style property, it only makes logical sense that you can also set underlining using that property, right? Not so. To set underlining for an element, you have to use an entirely different style property, the text-decoration property: text-decoration: underline.

Return to Menu.

Can I turn off link underlining?

You sure can. Just define a style for the A (Anchor) element using the text-decoration property, like this:

a { text-decoration: none }

Return to Menu.

When creating CSS roll-over links, which should be listed last? The :active pseudo-class or the :hover pseudo-class?

The information in the book on this is a little misleading. A matter of being written in just a little too much of a haste. Here's the real situation with the :active and :hover pseudo-classes:

• In CSS1, the :link, :visited, and :active pseudo-classes are independent of each other. Thus, you can list them in any order that you like.
• In CSS2, the :active and :hover pseudo-classes are not independent of each other. A link can display properties from both at the same time.

Thus, the main requirement is that both the :active and :hover pseudo-classes must come after the :link and :visited pseudo-classes. Whether :active comes after :hover, or vice versa, really depends on what you want to have happen.

If you don't want the active state to be displayed when the mouse is held down on the link, then it should be placed before the :hover pseudo-class. If you want the active state to be displayed when the mouse is held down on the link, it should be placed last, like this, for instance:

a:link {color: yellow; background: blue}
a:visited {color: white; background: blue}
a:hover {color: red; background: aqua}
a:active {color: green; background: red}

There are also cases where a link can be both active and hovered (a link might be tabbed to, for instance) -- if you want the hovered properties to be predominant in those cases, then the :hover pseudo-class needs to be placed last.

a:link {color: yellow; background: blue}
a:visited {color: white; background: blue}
a:active {color: green; background: red}
a:hover {color: red; background: aqua}

Complicating this a bit is that IE (5.5 and 6) displays a link in the active state after you've returned to it by clicking on the Back button. The only way to counter that is to set the active properties to be the same as the visited properties. Since you probably don't want to have the visited properties displayed when the mouse is held down on the link, in that case you'd also want to place the :hover pseudo-class last, like this, for instance:

a:link {color: yellow; background: blue}
a:visited {color: white; background: blue}
a:active {color: white; background: blue}
a:hover {color: red; background: aqua}

Return to Menu.

Why won't a percentage height set on a DIV element work?

Some of the examples in the book utilize a percentage value to set the height property for a DIV element. This worked fine in Internet Explorer 5.5, as well as Netscape 6 and Opera 5. It doesn't work, however, in Internet Explorer 6, which simply ignores a height property if it is set using a percentage value.

The solution is simply to avoid using percentages to set the heights of block elements. Using ems is probably a better choice, anyway, when creating a fluid layout; if creating a pixel-perfect layout, then just use pixels to set element heights. For instance, for the ribbon menu example (cramer-consult4.html), just edit the div.side and div.main style rules so they match what is shown here:

div.side { 
    position: absolute; top: 6.5em; left: 0; 
    width: 145px; height: 85em; 
    padding: 0.5em 0; margin: 0 0.5em; 
    background-color: #099; 
}

div.main { 
    position: absolute; top: 6.5em; left: 155px; 
    height: 85em;
    padding: 0.5em 0; margin: 0 0.5em;
    background-color: #fec;
}

Return to Menu.

Why can't I get column group background colors to display in Internet Explorer 6?

The example for setting column group colors and backgrounds on pages 288-290 works fine in Internet Explorer 5.5 for Windows and Internet Explorer 5 for the Macintosh, but not in Internet Explorer 6 for Windows. To get the example to work in Internet Explorer 6 for Windows, in the example's style sheet, you need to delete the background property that is set for the 'tbody tr td' selector on page 287 (a foreground color cannot be set for a column group or column, so it should also be deleted):

tbody tr td { text-align: right; padding-right: 1.5em; 
              color: #c00; background: transparent; }
tfoot tr td { color: #030; background: #fcc; }
colgroup#cgroup2 { color: black; background: #cff; }
colgroup#cgroup3 { color: black; background: #cfc; }

Return to Menu.

Order Cascading Style Sheets (CSS) By Example from Amazon.com for $20.99. You save $9.00 (30% off). Rated out of five!