Cascading Style Sheets

Full Name

Cascading Style Sheets - Otherwise known as CSS

Information

A scripting language used to describe the presentation of structured documents. A structured document is a document whose sections are clearly defined and categorized. A program presenting the document can present it in different styles because the content has been categorized. One common style sheet language with widespread use is CSS (Cascading Style Sheets), which is used to style documents written in HTML, XHTML, SVG, XUL, and other markup languages. One of the most attractive features of structured documents is that the content can be reused in many contexts and presented in various ways. Different style sheets can be attached to the logical structure to produce different presentations.

When used in conjunction with HTML 4.0 (or later) and Javascript embodies what is known as Dynamic HTML or DHTML

Related Links

Also referred to by the abbreviation, CSS

Wikipedia Articles

• Cascading Sytle Sheets
• Style Sheet Languages
• Use in web development

Other Links

• W3.org article on tableless layout
• W3.org CSS home page
• W3.org CSS tutorials
• XHTML.com CSS Reference
• Cascading Style Sheets PhD thesis, by Håkon Wium Lie
• CSS ZenGarden
• Camera on the Road Site
• http://wdvl.internet.com/Authoring/Style/Sheets/Meyer/

Example Sites

• CSS Play
• Tizag.com

Syntax References

• http://www.tizag.com/cssT/reference.php
• http://www.htmldog.com/guides/cssadvanced/
• http://www.htmldog.com/guides/cssadvanced/atrules/

Tutorials

• http://www.w3schools.com/css/default.asp
• http://www.csstutorial.net/
• http://css.maxdesign.com.au/
• http://www.html.net/tutorials/css/introduction.asp
• http://www.sitepoint.com/subcat/css
• http://www.echoecho.com/css.htm
• http://www.westciv.com/style_master/academy/css_tutorial/
• http://www.pageresource.com/dhtml/indexcss.htm
• http://www.htmlgoodies.com/beyond/css/
• http://www.thenoodleincident.com/tutorials/css/
• http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/
• http://www.bigbaer.com/css_tutorials/
• http://www.d.umn.edu/is/support/Training/Online/webdesign/css.html

Incorporation into HTML

Incorporate stle sheets by inclusion of a file as follows:

<link href="/css/common.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />

Note the different media types...

The successful load of CSS files can be verified with Javascript as follows:

  <script type="text/javascript">
    try {
      DynamicCss.addCssUrl('/css/print.css', 'print');
    } catch(e) {}
  </script>

Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
	background-color: #ccc;
	padding: 1em
}

#top h1 {
	color: #ff0;
}

#top p {
	color: red;
	font-weight: bold;
}

Removes the need for classes or ID's if it is applied to HTML that looks something like this:

<div id="top">

	<h1>Chocolate curry</h1>

	<p>This is my recipe for making curry purely with chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.