Cascading Style Sheets
Cascading Style Sheets (CSS) work on the same
premise as style sheets in print layout software programs: they allow
you to manage the structure of the site separately from content. Text
styles and content can be modified independently from each other,
allowing developers to update web sites more efficiently. CSS enables
you to improve the appearance of your site, and can be created with
the same simple text editors as html. "Cascading" refers to a system
of preferences for managing style conflicts. A conflict can occur, for
example, when a user's browser preferences indicate text to be
displayed in one font, while an incoming document style sheet calls
for a different font. The cascade preferences will ensure the conflict
is resolved and pages can be displayed.
Cascading Style Sheets give designers additional
control over typographic features such as line spacing, margin
indents, and font selection. You can specify the position of elements
using CSS rather than the more memory-intensive transparent GIFs. This
allows your files to be smaller and to be opened more quickly by
browsers.
When
appropriate, define styles globally
Your system of Cascading Style Sheets will work
best when you assign styles at the highest appropriate level. If you
apply a style sheet globally, you need to apply it only once. If you
apply a style locally when it should be applied globally, you will
need to place the code in more than one file. Also, if you apply
styles globally, you can more easily make revisions to the layout of
your entire site.
Whenever
possible, use style sheets to position elements
Using style sheets to define the placement of
elements is more efficient and manageable than using absolute
positioning. Using style sheets to position elements gives you more
control and consistency. Absolute positioning gives you control on a
specific page but is less efficient and harder to maintain.
Use inheritance
to propagate styles in CSS
Cascading Style Sheets employ a system of
inheritance, in which the lower-level or child styles inherit
properties from higher-level or parent styles. To produce an efficient
style sheet system on a project, you should analyze your layout plan
to see what features certain styles share with other features, and
then decide where in the inheritance scheme every text formatting
specification should take place
Use absolute and
relative style specifications
To avoid manual and tedious adjustments to styles,
take advantage of absolute and relative style specifications. For
example, assume you use an absolute setting for the body text, such as
"BODY {font-size: 10pt}" and a relative style for a level two heading,
such as "H2 {font size: 80%}". If you later change the size of "BODY"
to 12 pt., the H2 style will automatically make itself larger,
preserving the 80% size relationship.
When specifying
fonts, provide the desired font, an alternate font, and a default font
The cascading system works by making choices and
compromises among groups of options. For the system to work properly,
alternate font specifications should be provided within the style
sheets. For example, you could have a style sheet which states "BODY
{font-family: Officina, Arial, sans-serif}." This will cause users to
see Officina if they have it, Arial if they don't have Officina, and
whatever sans-serif font is alphabetically at the top of their own
font list if they have neither Officina or Arial. (The last font
specification is a default one, which is not a specific font but
rather a class of fonts).
Use rule
exceptions with caution
Since the keyword !important will override a users'
settings, use it with extreme caution. In general, you want your users
to have control over their settings. For instance, people with
impaired vision might not be able to read any of your text if you use
!important to require them to read ten point font.
Define a clear
policy for the entire team to follow
A
system of Cascading Style Sheets can become complex, particularly on a
large site. Make it easy for other people to understand how your
system works so they can make any subsequent changes in an integrated
manner. Before adding a style sheet to an existing site, make sure you
understand the existing style sheet formatting policy.