|
||||||||||
|
Basic concepts |
||||||||||
|
||||||||||
|
Advanced concepts |
||||||||||
|
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.
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.
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.
All CSS is case insensitive.
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 */
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).
| 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% |
| 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.
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.
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.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.