CSS2 tutorial - Key concepts
A D V E R T I S E M E N T
InheritanceSo 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 resolutionIn 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 sensitivityAll 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 */
UrlsThese 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).
LengthsRelative 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.
|
