Cascading Style Sheets (CSS) centralize decisions on how web pages are styled - fonts, colors, layouts, and so on.

Some advantages of using CSS :

• as usual, centralized policies greatly reduce maintenance effort
• many visual effects offered by CSS cannot be produced by simple HTML
• file download times improve slightly, since repeated markup is eliminated
• pleasing designs are easy to produce

Support for CSS varies among browsers. Some care must be taken that pages render adequately in the most popular ones.

Some recommendations on using CSS :

• name items at a high level of abstraction, without exposing implementation details. For example, a good name for a style class is highlight, and a bad name is bold-and-yellow
• to maximize reuse, prefer external style sheets over styles defined in a single HTML page
• name style sheets with a .css extension, to ensure they work with tools which may incorrectly require that extension
• if using pseudo classes for links, use a:link and a:visited as a pair
• for font sizes, usually prefer em or % (relative), over ex and px (absolute)
• the font-size styles of xx-small, x-small, and so on, are not consistent across browers, and should likely be avoided. It is a kind of absolute measure.
• when referring to specific fonts, always include a generic font family to be used as an alternative : serif, sans-serif, monospace
• some recommend that !important should be avoided
• favor techniques which minimize the amount of markup
• use the CSS Specification as reference, and use the CSS Validator to verify your work

Reminders :

• the LINK tag is placed in the HEAD tag
• a typical LINK : <link rel="stylesheet" type="text/css" href="styles.css" media="all">
• . denotes a class
• # denotes an id
• : denotes a pseudo-class, as in a:visited
• [] denotes attribute selectors
• according to the specification, class and id names are case sensitive
• element box = content area + padding + border + margin (in order from middle outwards)
• the width of an item refers only to the content area, and not the whole element box
• here is an example stylesheet (used by WEB4J)

Be Aware of Browser Caches

Browsers cache style sheets. If an update to a web site includes changes to a style sheet, then the developer will often need to manually refresh the browser's cache, in order to see the updates (the specifics apparently depend on the browser). However, when deploying such an update, it's not acceptable to expect the end user to do the same thing.

To ensure that all users see the updated version of a stylesheet, there's a simple workaround : just rename the style sheet. Of course, related references need to reflect the new name as well. This will force the browser to always load the updated version.

Yes   No   Undecided