Place your text ad here.
World class Hard Drive Recovery and renowned raid recovery services
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
The Code Style Web site uses some fairly complex style sheet code that has evolved over many versions. The style code is heavily commented with workarounds and notes on a number of browser CSS bugs.
This site uses multiple style sheets to apply different layers of styling:
Eric Meyer's SelectORacale application returns plain English explanations of CSS selectors, which identify the parts of a document to which style declarations are applied. Each style sheet has a SelectORacle link to help clarify their intended effects.
Persistent style sheets are declared by attaching them with a link element that has no title attribute. This means they are not associated with any preferred style sheet or alternate style sheet sets and should be applied in all cases.
<link rel="stylesheet" type="text/css" href="/styles/CSPersistent.css" />
This persistent style sheet is applied through an HTML link element without a title attribute. These persistent styles are applied to all pages regardless of whether the preferred site style sheet or any alternate style sheets are selected by users.
See the SelectORacle explanation for this style sheet.
Preferred style sheets are attached using a link element with rel attribute value stylesheet and a title attribute with an arbitrary name. Any number of preferred style sheets will be interpreted together if they have the same title attribute. The Code Style preferred style sheets are titled "Standard".
<link rel="stylesheet" type="text/css" href="/styles/CSStandard.css" title="Standard" /> <link rel="stylesheet" type="text/css" href="/styles/CSPrint.css" media="print" title="Standard" />
This linked style sheet uses two @import rules to call-in the standard site style sheets using a syntax that hides the CSS style code 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.
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 style sheet.
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 style sheet.
Some pages on this site contain especially wide tables and other content that requires a broader content area. These style sheets are used in place of the standard style sheets above.
This primary style sheet imports the standard layout and livery style sheets as CSStandard.css above, plus the following "wide" format style sheet:
This supplementary style sheet redefines a range of styles to broaden the main content area and position the sidebar menu beneath.
See the Selectoracle explanation for this style sheet.
Media dependent style sheets only apply when browsers display Web pages in particular contexts. The standard computer monitor screen view is most common, print mode applies when pages are printed and the Opera browser supports projection mode for Powerpoint style full screen presentations. See the CSS media monitor section for more details, browser conformance guides and answers to common questions about media dependent style sheets.
Media dependent style sheets can be declared in several ways, in this case by attaching style sheets with a link element with media attribute.
<link rel="stylesheet" type="text/css" href="/styles/CSPrint.css" media="print" title="Standard" />
This is the standard print media style sheet used to suppress printing of most navigational structures and interactive forms in supporting browsers. This style sheet makes every page printer friendly without going to a separate page. See Print media browser conformance for further information.
See the SelectORacle explanation for this style sheet.
See also our print media browser conformance guide.
This is the standard projection media style sheet 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 style sheet.
See also our projection media browser conformance guide.
Many browsers provide a View menu option to select an alternate style sheet to the default rendering of a page. In most cases, this setting is not "sticky", so it does not persist when users move to a different page. One useful application is to create a print preview style sheet.
Alternate style sheets are declared in the link element by setting the rel attribute to alternate stylesheet and set a specific title attribute, in this case "Print preview". Any number of alternative style sheets will be interpreted together if they have the same title attribute.
<link rel="alternate stylesheet" type="text/css" href="/styles/CSStandard.css" media="all" title="Print preview" /> <link rel="alternate stylesheet" type="text/css" href="/styles/CSPrint.css" media="all" title="Print preview" />
CSStandard.css (and its imported styles), and the print media style sheet, CSPrint.css, in 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".
Alternate style sheets 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 experimental style sheet gives a dramatically different, low contrast view of the Code Style Web site in sans serif fonts on a blue background.
See the SelectORacle explanation for this style sheet.
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 style sheets more or less as intended. Indeed, many browsers allow users to specify their own style sheets, which may override the style sheets specified in the document, and this consideration is designed into the Code Style markup and style sheets too. For instance, wherever color properties are declared, background properties are too, to avoid illegible combinations with user style sheet 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.
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 maintain a logical sequence for non-CSS browsers and search engine spiders.
#Header
#Content
#Sidebar
#Footbar
#Footer
View source for further details.
