Web School
good CSS standards, practices, and guidelines
This is a short run down on the "correct" way to write Cascading Style Sheets code. It lists common standards, best (relative) practices, and general guidelines.
The World Wide Web Consortium (W3C) is an independent standards setting organisation. W3C was created in October 1994 to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its inter operability. This is the best site to go to see what the current standards are. Previous protocols and standards are available at the W3C site for reference.
Some aspects of writing Web documents are not standards but are just good practices. Below is a list of the Cascading Style Sheet fundamentals.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Cascading Style Sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced.
Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model.
CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
CSS3 is currently under development. You can follow its progress as new drafts are published.
Cascading means a succesion of stages, processors, or units. This is exactly how cascading style sheets work. You are not limited to one style sheet but can have as many as you like. Style sheets can have settings regarding one area of styles and another for another area. And then inline styles can be set to override the style sheets for individual elements. This is the very nature of cascading style sheets.
Top of Page | Fundamentals
Designing simple style sheets is easy. One needs only to know a little HTML and some basic desktop publishing terminology. e.g., to set the text color of 'H1' elements to blue, one can say:
H1 { color: blue }
The example above is a simple CSS rule. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.
The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors.
The "color" property is one of a multitude of properties that determine the presentation of an HTML document.
HTML authors need to write style sheets only if they want to suggest a specific style for their documents. Each browser will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner.
Top of Page | Fundamentals
There are some peculiarities when implementing Cascading Style Sheets in Netscape that developers need to be aware of.
Sometimes when using linked (external) style sheets and having styles set within the <HEAD> of a page Netscape gets confused and will not display any of the style sheet settings.
Although Internet Explorer does not care about order Netscape does in regard to font settings. When setting font styles be sure to put them in the order of:
font-style : xx
font-weight : xx
font-variant : xx
font-size : xx
font-family : xx
Not all of these have to be used but they must be written in this order to work as expected in Netscape.
Top of Page | Fundamentals
Implementation of style sheets can be done in three ways; inside the element, in the <head> of the document between <style> tags, and as a separate linked style sheet document.
This is the most laborious way of setting styles but is the best way to override styles set in the <HEAD> or a separate linked style sheet. To set styles within an element use the attribute STYLE="style-descriptor:style setting;". e.g.
<SPAN STYLE="font-size: x-large;">extra large text</SPAN>.
Where the code goes
Setting styles for a whole document is made easy by setting them in the <HEAD>. To do this you place your styles between style tags.
<style type="text/css">
styles go here
</style>
A style can be set for all content within an HTML tag by setting global styles for that HTML tag. This is done by assigning styles to the tag name. For example, to set all level 1 headings to be coloured blue use a line between your style tags something like;
H1 { color : blue; }
Any <H1> tag would then have the attribute of blue text.
Classes are often used for setting styles on a more individual basis. Between the style tags you set class styles by prefixing a class name of your choosing with a period (.).
.crossedout {
color : yellow;
text-decoration : line-through;
}
And then in the element you want to affect you would add a class attribute like so;
<h1 class="crossedout">stricked out heading</h1>
The last option using styles within the <HEAD> section is to apply a style to a named object. This is done by prefixing the named objects ID with a hash (#) between your style tags.
#highlight {
color : yellow;
background-color : #cccccc;
}
And the element with the id the same as your style will take on these styles.
<h1 id="highlight">highlighted heading</h1>
Because all named elements within a document must be unique this style can only apply to one object.
Where the code goes
By far the easiest way to keep a consisent look throughout your whole site is to use one style sheet that has a link in each document. This also makes it a lot easier to make style changes because you only have to edit one document.
To link a Style Sheet to your document you need a <LINK> tag in the <HEAD> of your document. It woud look something like this; <LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">
Where the code goes
Top of Page | Fundamentals
It must first be noted that although some parts of style sheets will work in earlier browsers it is really only a level 4 and above standard. Style sheets do have a tendancy to display differently on different browsers so extensive testing on all expected browsers of your target audience is a must.
For most people the look of a document - the color, the font, the margins - are as important as the textual content of the document itself. But make no mistake! HTML is not designed to be used to control these aspects of document layout. What you should do is to use HTML to mark up headings, paragraphs, lists, hypertext links, and other structural parts of your document, and then add a style sheet to specify layout separately, just as you might do in a conventional Desk Top Publishing Package. That way, not only is there a better chance of all browsers displaying your document properly, but also, if you want to change such things as the font or color, it's really simple to do so.
Many filters from word-processing packages, and also some HTML authoring tools, generate HTML code which is completely contrary to the design goals of the language. What they do is to look at a document almost purely from the point of view of layout, and then mimic that layout in HTML by doing tricks with FONT, BR and (non-breaking spaces). HTML documents are supposed to be structured around items such as paragraphs, headings and lists. The <FONT> tag is deprecated so should be avoided where possible. Cascading style sheets can totaly replace the use of <FONT> tags and when the target audience is likely to be using level 4 browsers and above style sheets should be used instead.
Top of Page | Fundamentals
Writing your own code and Cascading Style Sheets is the best way to learn but it is just as important to get help from those that have already been through it all. The following links are just some of the sites around the web that have invaluable information.
http://www.w3.org/Style/CSS/ CSS standards.
http://www.blooberry.com/indexdot/css/index.html THE Advanced CSS Resource.
http://css.nu/pointers/bugs.html CSS Bugs and Workarounds.
http://www.webreview.com/style/css1/charts/mastergrid.shtml CSS Master Compatibility Chart.
http://www.w3schools.com/css/default.asp CSS School.
http://www.devguru.com/Technologies/css/quickref/css_intro.html DevGuru CSS2 resource.
Top of Page | Fundamentals |
