HTML Post #7: CSS & Browsers

In closing up the HTML series, we’re gonna cover stylesheets and differences between browsers.

Stylesheets

This is just a text document that holds all your style information. It is stored in a separate file so the webpages are smaller and keep traffic down on the webserver and the internet.

To set the style of all p tags, you would say:

p {
    color: green;
    text-align: center;
    background: red;
}

That would make everything inside a p tag green, centered, and have a red background. You could do the same with a div tag, table tag, img tag, or any other tag. You can also use a class name:

.christmas {
    color: green;
    text-align: center;
    background: red;
}

Any tag that has class=”christmas” would have those styles. You can combine the two:

p.christmas {
    color: green;
    text-align: center;
    background: red;
}

Now, any p tag that has class=”christmas” will have the style.

The “p.christmas” in that last example is called the selector. There are plenty more types of selectors, including “ancestor descendant” and “parent > child”. Here is more information about selectors and style properties.

Linking

Putting this in the head section will link the page with a stylesheet at http://www.example.com/style.css:

<link rel="stylesheet" href="http://www.example.com/style.css" type="text/css" />

You can even set a print css, only used when printing the page:

<link rel="stylesheet" href="http://www.example.com/print.css" type="text/css"
 media="print" />

A document can have multiple stylesheets. The second one will supercede the first if there’s any duplication. There is one exception. If the first file says this:

p.error {
    color: red !important;
}

Then the second file will have to use “!important” if it is to supercede the color.

Browser Differences

From time to time, you’ll run across something that looks fine in one browser and totally funky in another. If you run into this, do a quick search or two. Odds are that someone else has run into it too.

Many times, the answer will be an IE conditional statement or some sort of CSS Hack. The IE conditional works like this:

<!--[if IE]>
<p>According to the conditional comment this is Internet Explorer</p>
<![endif]-->

It’s really one big html comment! IE will show it. Firefox and the rest will ignore it. You can even say:

<link rel="stylesheet" href="http://example.com/overall.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="http://example.com/ie6.css" type="text/css" />
<![endif]-->

That will tell only IE 6 to use an additional stylesheet.

<link rel="stylesheet" href="http://example.com/ie.css" type="text/css" />Linking