World class data recovery software and renowned raid recovery services
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
Ahosting.biz reseller hosting, managed dedicated server with 24/7 support
The Code Style Web site uses some fairly complex stylesheets that have evolved over many versions. These stylesheets are heavily commented to give a guide to their intended effect and note a number of browser workarounds. This article links to all the standard stylesheets and gives an overview of their usage.
All the standard pages on the Code Style site are based on the same XHTML template which segments the content into five div elements, with unique id attributes on each. The five divisions, #Header, #Content, #Sidebar, #Footbar and #Footer, are self-explanatory and maintain a logical sequence to the page content for non-CSS browsers. See the source code of this page and the notes below on Coding without a safety net for full details.
SelectORacle explanations
The SelectORacale application from The Opal Group returns plain English explanations of selectors used in CSS, the parts of a document to which style declarations are applied. This article includes interpretive links to SelectORacle for each of the key stylesheets to help clarify their intended effects.
Standard stylesheet attachment
- CSStandard.css
-
This linked stylesheet uses two
@importrules to call-in the standard site style sheets using a syntax that hides them from older browsers with poor CSS implementations, specifically Netscape 4 and Internet Explorer 3 and 4. Separate "layout" and "livery" style sheets keep the colour scheme and formatting independent from the overall layout structure.- 1. CSStdLayoutCommon.css
-
This style sheet contains all the styles concerned with the outline structure of the pages, including the width of the main markup components, margins, padding and float properties.
See the SelectORacle explanation for this stylesheet.
- 2. CSStdLiveryCommon.css
-
The rules in this style sheet define the colours of the main markup components, font families, weight, style and font sizes.
See the SelectORacle explanation for this stylesheet.
- CSPersistent.css
-
This persistent style sheet is applied through an HTML
linkelement without atitleattribute. These persistent styles are applied to all pages regardless of whether the standard site stylesheet or any alternate style sheets are selected by users.See the SelectORacle explanation for this stylesheet.
Special case supplement
Some pages on this site contain especially wide tables and other content that require a broader content area, such as the Code Style font sampler section.
- CSWide.css
-
This primary style sheet imports the standard layout and livery stylesheets as
CSStandard.cssabove, plus the following "wide" format style sheet:- CSWideImport.css
-
This supplementary stylesheet redefines a range of styles to broaden the main content area and position the sidebar menu beneath.
See the Selectoracle explanation for this stylesheet.
Media dependent stylesheets
- CSPrint.css
-
This is the standard print media stylesheet used to suppress printing of most navigational structures and interactive forms in supporting browsers. See Print media browser conformance for further information.
See the SelectORacle explanation for this stylesheet.
- CSProjection.css
-
This is the standard projection media stylesheet used in selected pages to give a slide-show style presentation in supporting browsers. See Projecting your style for more information.
See the SelectORacle explanation for this stylesheet.
Alternate style sheets
- CSAlternate.css
-
Alternate stylesheets are implemented in the Opera Web browser, Netscape 6, Mozilla Firefox and other browsers based on the Gecko rendering engine. In these browsers it can be selected by choosing the style labelled "Blue, sans-serif". This stylesheet gives a dramatically different, lower contrast view of the Code Style Web site in sans serif fonts on a blue background.
See the SelectORacle explanation for this stylesheet.
- Print preview style sheets
-
This alternate style sheet selection uses a combination of the standard
CSStandard.cssstyle sheet (and its imported styles) and the print media style sheetCSPrint.cssin screen mode to give a preview of how a document will be rendered in print. This style sheet can be selected by choosing the style labelled "Print preview".
Coding without a safety net?
Almost all of the pages on the Code Style Web site are written according to the XHTML 1.0 Strict DTD and do not use any presentational markup at all. Thus, browsers which do not support Cascading Style Sheets will render these documents with their default browser presentation, using only the fonts and colour schemes that users may have configured themselves. The Code Style markup has been designed and written with this in mind and should be perfectly clear and comprehensible without the specified CSS enhancements.
The rationale behind this design decision is that most current browsers have sufficiently good support for CSS that they will render the stylesheets more or less as intended. Indeed, many browsers allow users to specify their own stylesheets, which may override the stylesheets specified in the document, and this consideration is designed into the Code Style markup and stylesheets too. For instance, wherever color properties are declared, background properties are too, to avoid illegible combinations with user stylesheet colours.
It is assumed that anyone who is using a non-CSS browser these days is doing so for good personal reasons and will not object to the "plain grey" markup they might see. One significant advantage of this approach is that without the baggage of bulky presentational markup, most documents on this site are relatively low byte sizes and will load very quickly. It also makes markup throughout the site much easier to maintain and allows one to control document styles centrally.
