The Cascading Style Sheet
specification CSS allows the separation of document structure (HTML) and layout
(Style Sheet) like font, colors or borders.
Don抰 use HTML elements like <b>, but
<strong> and define in a style sheet how strong should look like (might
even not be bold, but different size or color).
Style information can be stored in 3 places:
In general:
•
For color, font, border, margin and background information use
CSS elements.
•
For position, height and width information use HTML elements,
unless the same height or width attributes are used for several HTML elements.
•
Use CSS positioning seldom and width care. An alternative
implementation for simpler browser might have to be provided as well.
Styles should only be included in an HTML element
with the style attribute, if this format is not used anywhere else:
<SPAN style="FONT-FAMILY:
Arial;">This text will be displayed in Arial</span>
If the same format is used for several elements of
the same page, but not on other pages, use embedded style sheets:
<head>
牋?<style>
牋牋牋?body {font-family:
Arial;}
牋?</style>
</head>
An external style sheet is used for format settings
for HTML elements used on more than one webpage.
The style sheet has the following structure:
1) Header
and comments
2) General
format settings
3) Specific
settings sorted by HTML element
If several elements share the same setting, list
these elements together, but the format setting only once. This allows for easy
and consistent changing of a format settings.
body, table, hr,
hd, input, button {
牋?font-family:
Verdana, Arial, Sans-Serif;
}
Even CSS2 adds support for positioning of HTML
elements, the support by browsers is insufficient. Therefore, it is still
recommended to use tables for layout.
Use fonts which are installed
by Windows and Office per default.
CSS documents should be formatted according the
general formatting rules specified in 3.2 Coding Format and according to the rules from this chapter.
Indent by 4 characters
CSS is not case sensitive. Unluckily, Visual Studio
generates CSS code sometimes in upper case, sometimes in lower case. It would
be too much work to reformat all generated code, but manually entered CSS code
should be written in lower case.
The following rules make it easy to rearrange (copy
and paste) style attributes:
•
List all elements, classes, ID styles, etc. on the first line, including
the opening bracket
•
Use for each style attribute one line and terminate it with a
semicolon, also before the closing bracket
•
Use for the closing bracket its own line
/* Fonts */
body, table, hr,
hd, input, button {
牋?font-weight:
normal;
牋?font-family:
verdana, arial, sans-serif;
牋?font-size:
small;
}
/* Margins */
body {
牋?margin-top:
0px;
牋?margin-bottom:
0px;
牋?margin-left:0px;
牋?margin-right:
0px;
}
However, if only few style attributes are needed, a
more compact notation might be used:
.Title1, .Title2,
.Title3 {position: absolute}
If several related styles differ only by details, it
might make sense to use the above notation also for several style attributes:
.Title1 {color:
#003300; border-bottom: #000000 1px solid; Z-INDEX: 99; TOP: 0px}
.Title2 {color:
#b0b0b0; border-bottom: #404040 1px solid; Z-INDEX: 90; TOP: 1px}
.Title3 {color:
#c0c0c0; border-bottom: #808080 1px solid; Z-INDEX: 80; TOP: 2px}
•
Are elements in an external style sheet grouped logically ?
•
Are no longer used styles removed ?
•
Are the style names easily understandable and created
consistently ?
•
Is the style sheet formatted properly ?
•
Is every format setting used in only one style rule ? Avoid
listing style attributes with the same value in different rules.
Chapters Overview