Cascading Style Sheets

CSS has two levels, CSS1 and CSS2. Level 2 notably includes absolute placement and generated content.
Unfortunately, even CSS1 is not fully implemented by 4 generation browsers.

The half-assed implementation in Netscape 4.7, for example, may lead to perfectly legal CSS producing black text on black background. The user loses.

The only browser that completely implements CSS1 is (and I say this with great bitterness) Internet Explorer 5 for the Macintosh. It even implements some really tasty bits of CSS2 like generated content.

The current situation, with 4 generation browsers still being widely used, forces Web developers to remain in a "core" set of CSS functionality, which certainly sucks.

The cool thing about CSS is that it lets you remove content from form. Say it with me, children. Content from form.

So! In the vein of doing that, I have found (half-found half-hacked together) a way to use CSS to make your site skinnable, throughout your site, using Javascript. You could use another language, the concept is the same.

Some of us have seen sites that allow little drop down boxes or links to change how the page works. This will do that.

Mark Newhouse wrote the original CSS manipulation javascript, which I've taken and edited, making room for a totally random page "skin" and figured out how to make sublinked pages keep whichever style you have chosen. His essay on seperating content from form and web site "skins" appears at:

http://www.alistapart.com/stories/daemonskin/index.html

You can view the page I made with this at:

http://danlowlite.digitalrice.com/written/femme/macrohard/

Most of the links simply reload the page, but I will explain how to create pervasive links so that you've got a homogenious look. Okay, let's get started.

Browser Requirements: You need a browser that supports CSS and Javascript. I'm sure you could make a default which would appear if you didn't have the script.

That's it. How much CSS you use will depend on what you need to do. CSS can change the position, color, and size of layers, which is mondo cool. You can also redefine background colors and images. The actual workings of CSS are up to you.

So, we need to make this Javascript:

<script language="JavaScript" type="text/javascript">
<!-- // old browser thing

var howMany = 1;  // max number of items listed below
var page = new Array(howMany+1); // fixes the array number count
page[0]="purple"; // our first "skin."  This will change for your site.
page[1]="yellow"; // our second "skin."  You don't need these if you're
                  // not playing with random stuff.

parentURL = ""+document.location;
parSharpIndex = parentURL.indexOf("?"); // this is where the code 
                                       // looks to see if the page 
                                      // has been passed a variable

if (parSharpIndex >= 0) { //if there is a variable ...
   anchorString = parentURL.substring(parSharpIndex, parentURL.length); 
   MyRe=/\?(\w*)\.css/g; // adds the .css extention
   MyArray = MyRe.exec(anchorString); 
   anchor = RegExp.$1;   }  // assigns the variable "anchor" to whatever 
else { // choose a random skin!
 function rndnumber(){
  var randscript = -1;
  while (randscript < 0 || randscript > howMany || isNaN(randscript)){
   randscript = parseInt(Math.random()*(howMany+1));}
   return randscript;	}
  quo = rndnumber(); // okay, we've got a random number!
  anchor = page[quo];} // Now we've assigned "anchor" to whatever
                     // the random number has given us (see above)

//this is the part that puts the CSS link in the HTML
document.write('<link rel="stylesheet" href="' + anchor + '.css" type="text\/css">');  

// --> 
</script> 

Great! That's it. All you need to do is design your CSS stuff make a link on your page to filename.html?skin.css. I used a drop down list.

So you want this to stick around? You have to use this EVERY TIME you make a link to another one of your pages. You also need the code above on every page. Tedious, I know, but cool, IMO. :-)

<script language="JavaScript" type="text/javascript">
 document.write("<a href=filname.html?" + anchor +".css>pop!</a>");
</script>

If any real coders could let me know how to do this better, please tell me . . .

Cascading style sheets are, or more properly is, a standard defined and promulgated ("huh huh, he said 'promulgated'!") by the World Wide Web Consortium or W3C. As of this writing (February, 2002), the W3C's CSS "home page" is a virtually unusable mess located at http://www.w3.org/Style/CSS/. That page is not the worst example of malignant CSS abuse that I've seen, but it'll do.

Most people use the abbreviation CSS for the sake of convenience. In theory, CSS should separate presentation details from document structure: Tags "should" be used only if they have some logical meaning. Sheer decoration "should" be done with CSS. In practice, there's no good place to draw the line. Ideally, we'd do everything in XML with appropriate DTDs and convert it into HTML on the fly, but like all software development everybody's got a deadline and it's just a mess. Any discussion of the issue degenerates rapidly into hair-splitting and holy wars.

The current (Feb 2002) version of the standard is CSS2, which theoretically superseded the older CSS1 in May, 1998. CSS1 itself "became a W3C recommendation" in December, 1996. In December, 2001, something called "the CSS Mobile Profile" became something called a "W3C Candidate Recommendation"¹.

In practical terms, what's nice about CSS is that you can put all or most of your display parameters in one place: If you want your paragraphs indented, you can use CSS to alter the behavior of the standard <p> tag globally such that it's got an indent. If you get tired of that later, you can make one change in one place to get rid of it everywhere. CSS can be embedded in your HTML file, or it can be in a separate file and be linked to many HTML files. Naturally, the CSS can be generated dynamically just like any other file.

Like HTML, CSS is purely declarative. It's not a programming language. For all that, the syntax is relatively elaborate (more so than LISP, for example, and LISP is Turing complete).

When you define CSS attributes, you associate them with an HTML tag, or with a "class". A stylesheet class can be associated with a single tag, with several tags, or with no tag. It can be associated with a context, as well: For example, you could make the content of <li> tags green if and only if the <li> tag is found within an <ol> list.

A style definition is just a list of attribute names with values. Attribute names are defined by the standard, as is the form of their values: CSS can't be used to extend itself. There are attributes defined for spacing around elements, position of elements, font styles, foreground and background colors, and background images. I will not attempt to provide an exhaustive list of attributes and their values. There should be such a list under CSS attributes.

Here's a very simple example which will indent the first line of every <p>-tag-enclosed paragraph by sixteen pixels:

    /* Comments look like this. There is no syntax for 
       "to end of line" comments: // is a syntax error.
     */
    p {
        text-indent: 16px;
    }

The text-indent attribute indents the first line of the text contained by the tag or class you throw it at. It's a "length" attribute, so its value must be a number followed by a unit, with no whitespace in between (if your browser tolerates whitespace between number and unit, it is broken). The following length unit identifiers are defined:

em     The width of an em dash in the current font.

ex     The height of a lower-case 'x' in the current font.

in     One inch.

cm     One centimeter.

mm     One millimeter.

pt     One point (1/72 of an inch).

pc     One pica (twelve points).

px     One pixel.

Those are mostly typography things and mostly print-oriented, except for pixels. The size of an "inch" on your screen doesn't necessarily correspond to reality. An "inch" on a page coming out of your printer has a fighting chance at corresponding to reality, but don't count on that either².

When you assign a property value, it overrides the default for that property. Other properties are unaffected. You can define properties for the same tag in more than one place. Here's an example:

    /* With commas, you can apply the same attributes to 
       several tags at once (this is true also of classes, 
       which we'll get to in a moment).
     */
    h1, h2, h3, h4 {
        /* Don't quote lists of font names */
        font-family: Tahoma,Verdana,Helvetica,Arial;
    }

    h1 { font-size: 13pt; }
    h2 { font-size: 12pt; }
    h3 { font-size: 11pt; }
    h4 { font-size: 10pt; }

In addition to defining properties for all instances of a tag, you can also define properties for only some instances of a tag. There are two ways to do this: Defining a class, and specifying the context. First, classes:

    p.indented {
        text-indent: 16px;
    }

    .highlight {
        background-color: #ffffe0;
    }

Here we have two classes: indented is defined only for the paragraph tag, and highlight is defined for any tag. You invent class names yourself. There are no standard ones. You'd use those classes like so:

    <p class="indented">On my summer vacation, I abducted 
    a mime and made him sing <b class="highlight">sad 
    songs</b> at gunpoint. </p>

The "class" attribute of a tag specifies one or more CSS classes. If you've got more than one, they must be separated by whitespace. Since the highlight class specifies no tag, you can use it with <b> or with any other tag. If you want just the attributes of that class, without the default behavior of any tag, you can use the <span> tag. <span> exists for this purpose and has no characteristics of its own.

You can also define attributes for several tags and/or classes at once:

    p.indented, p.other, div.indented {
        text-indent: 16px;
    }

Context is weirder, and less used: For a tag or class, you can define characteristics which will apply only when the tag or class appears within some other tag or class. Here's an example which will cause nested italics not to be italicized (that's the Right Thing, by the way):

    /* Even nesting depths (2, 4, 6) are not italicized */
    i i, i i i i, i i i i i i {
        font-style: normal;
    }

    /* If we only talk about even depths, odd depths will 
       be normal, too: After all, something nested three 
       deep is also nested two deep. Therefore, we must 
       explicitly say what we want for 3, 5, and 7.
     */
    i i i, i i i i i, i i i i i i i {
        font-style: italic;
    }

Note the placement of commas: "i i i" means "i within i within i". The "even nesting" definition applies to "i within i", "i within i within i within i", and the same for six of 'em. With that CSS, we can do the following example:

    <p>Normal <i>i level one <i>i level two <i>i level three</i> 
    i level two</i> i level one</i> normal again.</p>

The example will display like this (in Netscape 4, Mozilla, or IE5, at least):

Normal i level one i level two i level three i level two i level one normal again.

Remember, the context can be any tag or class. Take for example the following:

    .highlight {
        background-color: #ffffe0;
    }

    div.ghastly {
        /* Colors can be defined with rgb(), too: The values 
           can be integers from 0 to 255, or else percentages
           identified with a trailing '%'.
         */
        background-color: rgb(128, 64, 32);
        margin: 20pt;
        font-weight: bold;
        font-size: 40pt;
        color: #00ff00;
        font-family: Comic Sans,Fugly Obscene,Fugly Immoderate,Courier;
    }

    p.highlight .highlight, div.ghastly .highlight {
        background-color: #e0e0c0;
    }

In this case, we might have highlighted text scattered througout a file, and we might be highlighting whole paragraphs too. If a whole paragraph is highlighted, it may (we'll assume) contain other bits of highlighted text. When that happens, we'll still want those other bits to have a background color that contrasts with that of the text around them. You could define a darker-highlight class and use that where needed, but it's much easier and safer to let the client software do the scut-work.

When you define CSS stuff in a file all by itself, it is what it is. When you want to embed it in an HTML file, you need to put it in a <style> tag, like so:

    <!-- text/css is a [mime type] -->
    <style type="text/css"> 
    <!--
    /* Don't forget to put HTML comments around it, for the 
       benefit of style-ignorant web browsers.
     */

    p.fugly {
        background-color: black;
        color: yellow;
        font-weight: bold;
    }
    -->
    </style>

If you want the HTML file to use a separate CSS file, link it like so:

    <link rel="stylesheet" type="text/css" href="stylefile.css" />

You can also apply CSS to a tag "inline" with the style attribute:

    <p style="text-indent: 16px; color: blue;">Blah blah blah.</p>

Note that "can" and "should" are two wholly different things: If there's any chance that you'll be applying that set of styles in more than one place, define a class and save yourself a maintainance nightmare.

That should be enough to get you started.

¹ http://www.w3.org/Style/CSS/

² Thanks to Cletus the Fetus for joggling my elbow about printers. Thanks also to Cletus for reminding me that the 'C' in W3C is for "Consortium", not "Committee".

References

Mozilla version 0.9.5

Internet Explorer version 5.5

Netscape Navigator version 4

Chapter nine and Appendix C of HTML: The Definitive Guide 3rd ed., Chuck Musciano and Bill Kennedy, O'Reilly Press.

W3C CSS home page (http://www.w3.org/Style/CSS/)

W3C CSS2 spec (http://www.w3.org/TR/REC-CSS2/)

What

CSS, or Cascading Style Sheets, is a standard developed by the W3C promoting the separation of content from formatting. It is part of their effort to create technological standards that promote Interoperability, Evolution, and Decentralization. They operate by allowing text in a XML compliant document to be formatted, since XML is intended for documents with logically structured data, not as an user interface system.

There are 3 consecutive versions, called levels, of CSS: 1, 2, and 3, respectively. CSS 1 was implemented partially (and badly) by both Netscape Navigator 4 and IE 5. CSS 2 is currently standard, with certain features of CSS 3 already supported in IE 6, though the standard was still in flux at the time of this writing.

Why

It makes web programming so much easier. Also, the separation of content from form is important in order to allow certain things that those who design the web, chiefly the W3C wants from the Web, elegance and ease of use. Each of these goals is laudable in and of themselves, but they also help the rest of the Internet and it's users. Firstly, a display system like CSS saves a huge amount of space, when programmed correctly. Secondly, it allows form changes and content changes to be made easily and separately. I can change the way my data displays without changing my data, or even skinnable displays, like right here on E2. (A really neat example of this was Chris Casciano's project changing the CSS stylesheet, but not the actual page, to a different design each day for a month, though he only ended up doing 19 designs. The project can be found at http://placenamehere.com/neuralustmirror/200202/fun.php) A better one, even, is the CSS Zen Garden, at http://www.csszengarden.com/

Another advantage is that it's pretty standardized, and works well basically on all browsers being used today (with the notable exception of those .6% who sill use Netscape 3 and 4.) This eliminates one of the biggest hassles with Web Design: browser-proof design, AKA getting the page to look decent in Netscape, IE, and Opera. As XHTML, XML, and CSS develop, they are supposed to be usable on hand-held, graphics-less devices, and even text-to-speech devices for the visually impaired (or those who want email by telephone.)

Until now, I have focused on benefits for the viewer and the programmer. CSS, however, benefits the Internet as a whole. Imagine that a search engine wants to find a page containing information on Joey Tribiani. It would be wonderful if everyone would just use plain text to write their pages, but they don't, so it's difficult to know, if Google finds a page containing those words, to know that the page referenced is a frame in another site.

How

CSS allows all of this, essentially, by telling a computers (specifically a Web Browser like Internet Explorer, Opera, or even Lynx) how to display a document, separate from the document itself. It allows a designer to identify sections of documents in various ways, then to format them. For example, if I had a list of my CD's, in an XML-like format (or another data format, which could be converted,) and I wanted to display my list them on the Web, I could write a new standard HTML document, or I could add a simple tag to my XML document, and write a style sheet.

For instance, my CD collection is stored as follows: (Shamelessly stolen straight from www.w3schools.com tutorial on XML)

<?xml version="1.0" encoding="ISO-8859-1" ?> 
- <!--  Edited with XML Spy v4.2 
  --> 
- <CATALOG>
- <CD>
  <TITLE>Empire Burlesque</TITLE> 
  <ARTIST>Bob Dylan</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1985</YEAR> 
  </CD>
- <CD>
  <TITLE>Hide your heart</TITLE> 
  <ARTIST>Bonnie Tyler</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS Records</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>

etc.

I can re-write this in html, or I can write a CSS file to diplay this, as follow;

CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE,AUTHOR
{
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
}

And it will display very nicely. (You can try this manually, or just check out http://www.w3schools.com/xml/cd_catalog_with_css.xml)

The Differences between CSS 1, 2, and 3

In CSS 1, which was officially recommended by the W3C Dec 1996, there were essentially all of the ideas that the W3C felt were needed in CSS; A method of selecting which parts of the document ot apply styles to, A method of placing those elements on the page, and various color, text formatting, and link display features (including, notably, mouseovers.)

CSS 2, finalized Nov 1997, included as design goals, complete device independance, and network performance, 2 notable extensions. The practical upshoot was, most importantly, absolute positioning (for instance, 20 pixels from the top of the page,) but also a new processing model, an extension of the box model of displaying text, audio feature supports, and a lot of neat new font and layering effects. These all gained acceptance only after IE 5 and 6 gained widespread acceptance, and Netscape Navigator 7 was released. Revision 1 to CSS 2 was released Aug 2002, to formally document features that were already accepted, and to correct an error regarding absolute positioning and the clip property.

CSS 3, which will implement new selectors (to pick where a style applies,) fancier borders and backgrounds, and vertical text, will be finalized Nov 2004. The most important feature of this recommendation is one that will not really be seen by users; the recommendation will be compartmentalized, so that the updated recommendations for each different feature set will come independently from now on. This means more newer features in the areas that people want most, which is good.

Sources: www.w3c.org
www.w3schools.com