Tutorials Bugs Masterclass Free stuff Test pages Proposals

Basic concepts

Advanced concepts

RichInStyle.com CSS2 tutorial - Key concepts

Contents

Inheritance

Conflict resolution

Order sorting

CSS concepts

Case sensitivity

Comments

URLs

Lengths

Relative lengths

Absolute lengths

Length bugs

Shorthands

Inheritance

So that style sheets are as short as possible, many styles inherit. This means that if the value for an inherited property has not been specified, the parent's value (which might in turn have been inherited) is used. Thus if you specify BODY {color: black} then everything inside BODY will inherit that color unless a contrary declaration is made.

It is stated in this tutorial whether a property inherits, although generally it is a common sense matter and can usually be guessed.

There are dangers in relying on inheritance - it should not be assumed that supplying a style that is inherited to BODY will automatically give all elements that style. For example, if an element is inside X, which is also inside BODY, the styles that are applied to X override BODY's values, and so the element inherits X's styles over BODY's.

It is important to note that percentages do not inherit, but the calculated value does - e.g., if font-size: 50% results in a font size of 8px, 8px will be inherited, not 50%.

For example, given:

<HEAD>
<STYLE type="text/css">
<!--
BODY {color: red}
-->
</STYLE>
<BODY>
<P>

the P element would be red because color inherits, and so in the absence of a declaration on the P element, the inherited value is used.

Conflict resolution

In essence, when you have conflicting styles applying to an element, the one specified via a class overrides normal ones. E.g., .class {color: red} overrides P {color: red}. In turn IDs override classes.

If, on the other hand, no declaration applies to an element, and the property is inherited, the inherited value is used. Otherwise, the initial value is used.

Thus if on a P element no declaration had been made for 'color' or 'height', then since 'color' is an inherited property, the value for 'color' for the P's parent would be used; on 'height', since 'height' is not an inherited property (as you could probably guess), the initial value, 'auto' is used.

The order sort

Rules at the end of the style sheet take precedence over those at the start. Inline style is assumed to be read after embedded style, which is read after linked style. Imported style sheets form the start of the importer's style sheet.

Thus:

P {color: red}

P {color: green}

would result in green, much as you would expect.


CSS concepts

Case sensitivity

All CSS is case insensitive.

Comments

To specify that you don't want something to be treated as part of the style sheet, you enclose it in /* */.

P {color: red} /* This is a comment */

Urls

These are used to state the location of, for example, a background image or list picture.

They follow this syntax: url(filename.filetype), e.g. url(background.jpg) or url(http://www.background.com/back.jpg).

The file can optionally be enclosed in quotes - e.g. url("back.jpg").

Internet Explorer 3 will ignore URLs enclosed in quote marks. Netscape interprets URLs as relative to the HTML file, not to the style sheet. IE 3 does not support absolute urls (e.g., http://www.foo.com/foobar).

Lengths

Relative lengths

Name Meaning Example
px A dot on the computer screen. Most screens have 800 pixels horizontally and 600 vertically. 7px
em One em is equal to the font size of the element, except when applied to font-size, where it is equal to the font size of the parent element. -4em
ex One ex is the x-height of a font. The x-height is usually about half the font-size, but in script fonts it can be as little as a quarter of it. Generally, browsers take 1ex to be half of the font-size, regardless of the font being used. 7ex
% A percentage of something 45.87%

Absolute lengths

Name Meaning Example
in Inch 7in
pt a point is 1/72 inches -5pt
pc 12 points 1.3pc
mm A millimeter 6.12mm
cm A centimeter 6.237cm

Lengths are used thus: P {font-size: 16px}.

You should avoid using absolute lengths, because the way they are rendered varies between browsers. The easiest thing is to specify sizes in pixels for fonts and line heights (although not the best: that is ems and %, but as explained in the bug guides this is fraught with difficulties) and % for everything else.

You should note that font-size: 7 in (or any similar declaration) is invalid, because there is a space between the number and the measurement.

Length bugs

Internet Explorer 3.* treats ems as points, meaning that using them on your page on font-size or line-height will make your page unreadable and will result in unexpected appearance otherwise. It treats exes as points, meaning that using them will make your page unreadable.


Shorthands

Some of the properties in the guide are designated as shorthands. This means that they set the values for all the properties indicated, and as such, will override inherited values even if the inherited value is not specifically overridden. If one or more of the values for a shorthand is not specifically stated, it is set to the initial value for that property. For example, font: 16px sans-serif is equivalent to:

font-size-adjust: none;
font-stretch: normal;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
line-height: normal;
font-family: sans-serif

because all unset values are reset to their initial values.

The next section is concerned with color and backgrounds.