HTML and CSS Standards
A CSS Quick Reference
CSS uses rules to apply styles to HTML for the purpose of controlling the appearance of a
Web page in a user agent (most commonly a browser, but it might be a cell phone or a screen
reader). CSS can be restricted to a particular medium. Commonly supported media are all (default),
screen, and print; others are not yet reliable, though I'm starting to see more
media="handheld" stylesheets.
Where
- External—one file referenced by multiple HTML files. An HTML file may also reference
multiple CSS files to achieve subcategories. This scheme provides great flexibility and
is the preferred place for CSS.
- Page level—in the <head> for just that page. The choice
when a single page contains features unique to it (like many of the files in this collection).
- Inline—apply styles directly to a tag. To be avoided except possibly when applied
to a unique instance. (Can also be used to test that something really works as expected
before determining the correct selector.)
What
These classification properties make it possible to change the native behaviour of tags to create
special effects, e.g., making a list horizontal to use as a menu.
- Block—preceded and succeeded by newlines. <div> is the purest
block element and the preferred structural element for that reason.
- Inline—antithesis of a block item, i.e., it has no effect on the flow of content.
<span> is the purest inline element and provides a wrapper for applying
a style when no other HTML tag applies.
- None—delete material from the display stream, possibly for display later through JavaScript.
User agents which ignore CSS will, of course, display the material.
How
- Tag—every HTML tag can take styles, except <head>
and tags occurring in the head, though a property might not apply to a particular tag.
- Class—author-defined label to restrict scope of style application. Multiple classes may
be applied to a single element by a space-separated list.
- Id—author-defined scope label which must be unique on a page.
- Modifiers—further refinement to the scope.
- Combinations—all of the above can be mixed and matched to refine the scope,
thereby creating a selector.
Rules
- Syntax—selector { [property: value(s);]* }
- Selector—determines which elements the property/value pairs apply to.
- universal—applies a style to every element, i.e., *.
- simple—a single tag, class, or id. Ex. p or li or
.explain or #footer.
- multiple—comma-separated list of selectors.
Ex. h1, h2, h3, .special.
- compound—a tag with a class or id restricting it.
Ex. div#footer.
- contextual—space-separated list of selectors, specifying nesting of elements and
applying to any descendent. Ex. .explain p or
div .intro (div .intro is different from div.intro).
- with modifiers—Many are poorly supported or not supported by IE6 and earlier browsers.
- pseudo-elements—:first-line, :first-letter,
:before, :after.
- pseudo-classes—:link, :visited,
:active, :hover, :focus,
:first-child, :lang.
- child—restricts scope to first level rather than any descendent.
Ex. div > p.
- adjacent—applies to the second of two neighboring elements.
Ex. div + p.
- attribute—restricts scope to elements with a particular attribute.
Ex. div[lang] or div[lang="de"].
- Property—a characteristic, e.g., color or margin, which we wish to control.
- Shortcut properties take multiple values to reduce redundancy.
- Some properties (e.g., font-family) may take a list of values.
- Value—each property has defined values. They may be categorized as:
- keyword—like a Pascal enumerated type, i.e., a name selected from a list
of possible names.
- length—measured in em, ex, px, pt, pc, cm, mm, or in.
Some properties, e.g., padding, may not be negative.
- percentage—% of current value.
- URL—parentheses-enclosed Web address, either absolute or relative to the location
of the CSS file.
- color—color name (not reliable except for basic 16) or RGB value expressed as:
- hexadecimal—#1a3b5c or #78f (= #7788ff).
- decimal—rgb(0-255, 0-255, 0-255).
- percentage—rgb(%, %, %).
- angle—rad, deg, or grad.
- time—s or ms.
- frequency—Hz or kHz.
- Precedence
- The "cascade" of Cascading Style Sheets means that the nearest conforming rule
applies. Thus inline overrides page-level overrides external and a later
selector overrides an earlier selector.
- A class overrides a tag.
- A more specific rule overrides a less specific one. This is generally as regards
compound selectors. Ex. h4.subheading overrides h4.
Inheritance
Most properties inherit into descendents. Thus, if you specify body { font-family:
Verdana, sans-serif; }, all text in the document will follow that rule unless overridden by
a more specific rule, such as h1 { font-family: Georgia, serif; }. Inheritance obviates
the need for repeated specifications of many properties within class rules; in fact, many
classes can simply disappear because higher level rules prevail. For instance, many people add
a class to every paragraph within a div when the class could be applied to the div instead.
Normally font-size inherits, but it does not inherit into table headers or cells.
See SMS Default CSS File for guidance on how to handle this hybrid.
I will add a list of properties that don't inherit when I find a reference.
!important
Properties can be labeled “!important” so as to alter the normal cascade.
This is especially useful for user-defined stylesheets. An unstyled page will receive styles
from a user-defined stylesheet, but a page with styles will apply those because they appear
later. A user who wants particular features should mark their stylesheet
color: #ff0000 !important; or equivalently.
Careless use of this feature can, however, make a page unreadable or have unforeseen effects.
Comments
Comments within CSS use the same syntax as C—/* comment */.
Comments may cross multiple lines and they must be closed. Failure to close a comment has
unpredictable consequences.
Validation
It is more important to validate the HTML, but erroneous CSS will, of course, produce other than
the desired result. Validation is not generally a severe problem, but sometimes people invent
values or even properties or use a value that's not valid for that property (conversion
from MSWord is a notorious offender). Correct syntax
is, of course, necessary (don't forget the semicolons).
Efficiency
Very often you'll find a string of class rules like .menudiv,
.menulist, and .menuitem with each being applied respectively within the
<div> that contains the <ul> with its
<li>s. All of these are better handled by the contextual rules
.menudiv, .menudiv ul, and .menudiv li.
This means you need apply a class only once; none of the contained parts needs a class,
simplifying coding and maintenance, e.g., adding a new item to the menu doesn't need
to have a class applied after creating it. Some <li>s may need an
id for special purposes.