Fun with Cascading Style Sheets

User-Specified Style Sheets

This is a simple JavaScript method for including additional style sheets based on a user's input. When the document is loaded, it looks for a cookie, and if that cookie has been set, it looks for some parameters within that cookie, specifically whether a style has been set or not. If not, it does nothing further, but if so, it then links to the specified style sheet, by using the basic JavaScript command document.write(). The purpose of the cookie is to make the selection persistant, so the browser can "remember" the user's choice.

This method was originally created by Daniel Ludwin and demonstrated on A List Apart.

CSS Media Types

Take a look at the source for this page, and you'll see something like this:

<style type="text/css" media="print">@import url("css/edu-print.css");</style>

What makes this style sheet different from the one in the JavaScript above is the media="print" value. Many current browsers allow you to specify different style sheets for different viewing purposes; this is one of the advantages of using style sheets to separate content from appearance: by swapping style sheets, the same block of content can appear radically different, which can be very useful if someone's looking at your site on a handheld or other device.

One great use here is the ability to define one set of styles for the screen, and one for printing: you can choose different fonts, sizes, and colours, even quite different layout sensibilities. You can even, using the display property, determine whether content shows up on screen, in print, or both. This image, for example:

will not print, because the wrapping style, "noPrint", is undeclared in the screen style sheet, but in the print style sheet the style is set to be invisible:

.noPrint{display:none}

Conversely, a style called "printOnly" is similarly invisible on screen, but has the display set to "block" for the printing style sheet, which allows you add supplementary information when printing. This list of links, say:

Normally, printing the list would render it useless, because you can't see the actual URL attached; but by including the actual URL for the print version only, you'd get something like this printing out:

Specifying different layouts and different uses of content for different deliveries can go along way to making the web a better experience, and more legal in the long run.

Recognized Media Types

all Suitable for all devices.
aural Intended for speech synthesizers. See the section on aural style sheets for details.
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen Intended primarily for color computer screens.
tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Check out the w3.org for more information on media types.

Fun with Cascading Style Sheets

User-Specified Style Sheets

CSS Media Types

Recognized Media Types

HTML Tutorials

Basics

Content & Structure: HTML

Form: CSS

Action: JavaScript