CSS ain't Rocket Science

Gorgeous CSS Rollovers

Simon Willison — 2003-06-17T23:57:46-00:00

I've been planning a follow-up to my basic link styling tutorial for over a week now, but it's going to be a lot shorter now thanks to Al Sparber's excellent Uberlink CSS Rollover tutorial, which covers a lot of useful concepts and ends up with a truly gorgeous looking result. Thoroughly recommended.

Using bookmarklets to experiment with CSS

Simon Willison — 2003-06-03T13:49:28-00:00

I'm in the middle of a whole bunch of exams at the moment, but here's a quick tip that should make experimenting with and learning CSS a great deal easier. It involves bookmarklets. If you haven't seen them before, bookmarklets are bookmarks that embed javascript; when you click the bookmark, the javascript is executed in the context of the currently loaded page. What that means is that in a suitably advanced browser bookmarklets can be used to modify pages, analyse their structure and do a whole host of other useful things.

A fair number of bookmarklets work in both IE and Gecko engine browsers, but the really interesting ones (at least as far as learning CSS is concerned) tend to be Gecko only. If you're serious about learning CSS it's well worth getting a Gecko browser at any rate - Gecko's CSS support is more standards compliant than anything else currently available, so I recommend designing for the standards with Gecko and tweaking to support IE afterwards. Some people advocate designing for IE because it has buggier support, but once you've seen the tools available for Gecko I think you'll agree it really is a superb development platform. If you don't have access to a Gecko engine browser (that means Mozilla, Netscape 7, Camino, or Phoenix/Firebird) go and grab Firebird - it's only a 6 MB download and is available for most major platforms.

Now that you're tooled up with a good browser, drag the following links on to your links toolbar or add them as bookmarks:

Now give them a go. They're all useful, but by far the most useful for learning CSS are test styles and edit styles. test styles opens a popup window in which you can type CSS rules that will be applied instantly to the page you are viewing, while edit styles does the same thing but pre-populates the window with the style sheets of the current site, allowing you to edit them in place. ancestors is also useful; it shows the element hierarchy of the element your mouse is currently over, which can help you see what selector you need to use to modify that element's style. I cannot emphasize enough how powerful this is for working with CSS; using test styles I was able to redesign this site entirely in less than half an hour!

All of the above bookmarklets were written by Jesse Ruderman. Jesse has many more bookmarklets, all of which are available on his site. The bookmarklets listed above are from his Web Development collection (which includes further descriptions of these and many others). Jesse's bookmarklets have saved me countless hours of development time, and I hope they can do the same for you.

Fun with links

Simon Willison — 2003-05-27T23:58:05-00:00

Yesterday we talked about the box model. Today we're going to put a small part of it to work, by investigating ways of styling links. Before getting stuck in, we need to talk a bit about pseudo-selectors (also known as pseudo classes). The CSS specification defines pseudo classes as "characteristics that cannot be deduced from the document tree", but in practise the only widely implemented psuedo selectors are those that apply to links. The key psuedo selectors for links are:

a:link applies to normal links (but not to <a name=""> elements)
a:visited applies to visited links
a:active applies to active links (links that are currently being clicked on)
a:hover applies to links that the mouse is currently positioned over

It is the last of these that we shall be focusing on. One of the first and most popular effects that emerged when Javascript became popular was the image rollover, where an image (generally used as part of a site's navigation) would change when the mouse was positioned over it. a:hover allows us to achieve a similar effect using just CSS. The most striking change is to alter the background colour, as shown in this example.

After yesterday's discussion of the box model, it seems we would be able to achieve a lot more with this effect if links were block level elements. We can use the display: block; property to "promote" a link to block level status, which allows us to achieve all kinds of groovy effects. Consider the following HTML:

<div id="menu">
 <a href="/">Link 1</a>
 <a href="/">Link 2</a>
 <a href="/">Link 3</a>
 <a href="/">Link 4</a>
</div>

Left to its own devices, this would display as a rather uninteresting line of links. Add some CSS and we can make it look much more interesting:

div#menu {
  width: 5em;
  border: 1px solid red;
  border-bottom: none;
}

div#menu a {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid red;
  background-color: white;
  color: red;
  padding: 0 0.2em;
}

div#menu a:hover {
  background-color: red;
  color: white;
}

A few things to note. Most importantly, the links inside the div are set to display: block. This causes them to "stack up" on top of each other, and also causes them to expand to be as wide as their containing box (which is why we have restricted its width to 5 ems). The menu border is set to 1px all the way round, but then the bottom border is turned off. This means that when we set a bottom border on the links themselves the very bottom link does not end up with a double border. The result of the above can be seen here.

How about horizontal navigation? That can be achieved in a similar fashion, using the float property to position the links next to each other:

div#menu a {
  display: block;
  float: left;
  width: 5em;
  padding: 0 0.2em;
  margin-right: 1em;
  text-decoration: none;
  border: 1px solid red;
  background-color: white;
  color: red;
}

div#menu a:hover {
  background-color: red;
  color: white;
}

Check out the result here. Now that the links are floated it is important they have an explicit width assigned to them. A margin-right is used to place a gap between the links. There is one caveat to this method: It is important that any following element (preferably one that spans the whole page) as clear: both; applied to it, or any text in that element will flow around the menu rather than appearing below it. This is one of the most common upsets caused by using floats, and exactly the thing the clear property is designed to solve.

There is one problem with the technique described so far: accessibility. If you run the above examples through any accessibility checker they will flag up a warning that the links in the examples are seperated only by whitespace. Try disabling CSS or viewing the examples in a non-CSS browser and you'll see that this could definitely cause confusion - the links are displayed on a single line with only a single space between each one. A solution is at hand in the form of the humble <span> element accompanied by the display: none property:

div#menu span {
  display: none;
}

<div id="menu">
 <a href="/">Link 1</a><span> | </span>
 <a href="/">Link 2</a><span> | </span>
 <a href="/">Link 3</a><span> | </span>
 <a href="/">Link 4</a>
</div>

Here's a demonstration of the above. Note that it's identical to the previous example in CSS browsers; the separating pipes only show up when the CSS is not applied.

Understanding the Box Model

Simon Willison — 2003-05-26T23:58:23-00:00

Today's tutorial is going to be all theory. The box model is an inevitable part of CSS, and understanding it is critical if you want to do anything remotely interesting. Like most of CSS, it's a lot simpler than it sounds. Here it is:

Before discussing the box model, it is important to understand the difference between inline and block level elements. Inline elements are things like links, <em>s and <span>s - any element that appears "inline" in a piece of text without inserting any newlines. Block level elements on the other hand always start on a new line and cause any content following them to start on a new line as well. They include things like <p>, <div> and the various header tags. Block level elements can contain both block level and inline elements, but inline elements can only contain other inline elements. An inline element can be "promoted" to behave like a block level element using the display: block; property, and the reverse can be achieved using display: inline; - note however that doing this does not change the rules about what kind of elements something can contain. The box model principally applies to block level elements (although some of it works with inline elements as well).

As you can see from the diagram, the box model deals with the width, margin, padding and border around an element. You can specify a width using the width property; width can be specified in pixels, ems or percentages (and other units as well but these are the most common) and applies to the area on the diagram labelled "content area". It should be noted that the overall width of the box up to the borders (the dark grey area on the diagram) is actually the width, plus the left padding, plus the right padding, plus the width of the left and right borders.

It is here that IE5 gets things wrong: in IE5, the width property applies to the width AND the padding AND the border. There are two solutions to this problem. The first is to use Tantek's box model hack to feed alternative width values to IE5 (we have used this previously to improve IE5's rendering of Verdana). The second is to avoid setting any padding or thick borders on blocks that have a width declared, instead relying on the margin of elements contained within that block to add the illusion of padding. Which technique you use it up to you.

Margins, borders and padding can be set separately for each side, or set all at once using shorthand properties.

An important thing to understand is the difference between margin and padding. Obviously padding occurs inside the border and margin outside, but surely this means that either can be used to the same effect if no border is required. This is more or less true, but comes with a few caveats. Firstly, the area treated by elements nested within an element as the "width" of the element is the content area plus the padding - this becomes important later on when we start to look at positioning. Secondly, top and bottom margins have a special effect applied to them called margin collapse. Put simply, when two elements are positioned above and below each other the gap between them is the size of the largest margin, NOT the size of the combined margins. This becomes important when considering margins on paragraphs, where specifying a margin of 1em means you get a 1em gap between each paragraph, rather than 2ems due to the margins being added together.

CSS Tutorial: feedback so far

Simon Willison — 2003-05-23T23:59:27-00:00

My CSS tutorial series has been getting some fantastic feedback, both in this blog's comments system and elsewhere. This entry will summarise the most useful feedback, acting as a kind of errata to the previous entries. Thanks to everyone who commented, there are too many to credit individually but you can see most of the points in their original format by browsing the comments attached to each entry.

The anatomy of a stylesheet

In one of the examples I specified a color property without a background-color property. This causes a warning when run through the CSS validator, because it may lead to unreadable text if the user has configured their browser's user stylesheet in such a way that your applied colour becomes unreadable.
I failed to cover the Universal Selector. This is an * in place of the element selector, and means "any element". In fact, .classname and #idname are actually shorthands for *.classname and *#idname.
A couple of terminology points: "internal stylesheets" are better known as "embedded stylesheets" and the "descendant selector" is really called the "descendant combinator".
div#main a:link is preferable to div#main a for selecting all links inside a specific div, as it will match only hyperlinks while div#main a would match <a name="anchor"> points as well.

Scripting.com, with added CSS

This entry drew the greatest criticism for its extensive use of the Fahrner Image Replacement technique, which can cause accessibility problems and also has some browser compatibility problems. In particular, the purple permalink icons were not showing up in IE5/Mac, probably because the technique was being applied to an inline rather than a block-level element. I have prepared two alternative examples of the Scripting.com remake, one using a permalink image and one that uses CSS to style the '#' sign to appear small and purple: Scripting.com with inline image permalinks, Scripting.com with styled purple hashes.

Defeating IE5 CSS bugs with the help of jwz

Owen Brigg's Sane CSS text sizes was suggested as a useful text sizing tutorial.
Vincent Flanders commented that the teaching style of the course sacrificed instant availability of code for extensive explanations, when most people would probably just like to grab the code and run. The reason I'm explaining everything as I go along is that the hey to using CSS in a practical manner is to understand its limitations and the subtle browser bugs demonstrated by some modern browsers. Just providing code may teach people basic CSS faster, but the moment they try their site in IE5 they'll be stumped by the weird side effects. By explaining each workaround as and when I use it I hope to make the unpleasant surprises a bit less unpleasant.
Leonard Lin (broken permalink, try the front page) commented that this article essentially proved jwz right in that "CSS is too fuckin' hard". He's got a fair point, but I believe that for more people to successfully adopt CSS they need to be fully exposed to it, warts and all. The jwz example shows off CSS at its worst, but despite the hacks the result is still smaller, more structural and more maintainable than the original. Designs without centered blocks or using a font other than verdana would have avoided the hacks entirely.

Quick tip: Styling blockquotes with CSS

Most of the comments here involved alternative ways of applying the selectors, all of which are worth reading about but none of which are practical due to poor browser support. I recommend reading them anyway, as they give a good indication of how much cleaner CSS will be once Microsoft get their act together.

Quick tip: Styling blockquotes with CSS

Simon Willison — 2003-05-21T23:54:22-00:00

Today's tutorial is going to be short one, as I'm working on one last piece of coursework. This time I'm going to explain a clever CSS trick borrowed from Nick Boalch. Here's a screenshot:

Here's the HTML:

<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div>
Tables should not be used purely as a means to layout document content as 
this may present problems when rendering to non-visual media. 
Additionally, when used with graphics, these tables may force users to 
scroll horizontally to view a table designed on a system with a larger 
display. To minimize these problems, authors should use style sheets to 
control layout rather than tables.
</div>
</blockquote>

The <div> in the above code is a slight sticking point: it has no structural value but is required for the technique to work. This is a trade off between 100% structural purity and presentational effects but I think it is one that is worth making.

Here's the relevant CSS:

blockquote {
  background: transparent url(quoleft.png) left top no-repeat;
}
blockquote div {
  padding: 0 48px;
  background: transparent url(quoright.png) right bottom no-repeat;
}

There's a simple trick at work here. CSS backgrounds are extremely powerful but in CSS2 only one background can be applied to any single element. The blockquote effect requires two background images, one for the quote mark on the left hand side and one for the one on the right. The additional nested <div> allows us to do this, by applying one background image to the <blockquote> and one to the <div>.

The padding is applied to the <div> rather than the <blockquote> because the <div> needs to stretch the entire width of the <blockquote> in order for the background image to appear in the right place. The images are 38 pixels wide, so a padding is applied to the left and right hand sides of the <div> to allow space for the images and give an extra 10 pixels of whitespace.

You can see the technique being used on this sample page, or over on Nick's weblog.

One final note: while it's tempting to add font-style: italic to blockquotes, doing so may cause a horizontal scrollbar to appear in IE6/Windows. Strange but true.

Incidentally, I've been getting some absolutely fantastic feedback on this series on the comments attached to each entry - please keep it coming! The feedback has included a number of suggested improvements and other worthwhile tips. Rather than editing the original articles I plan to use tomorrow's update to revisit the previous day's articles and update them based on suggestions from the comments.

Defeating IE5 CSS bugs with the help of jwz

Simon Willison — 2003-05-20T23:58:01-00:00

Today's CSS case study will be Jamie Zawinski's LiveJournal. OK, I admit that he's something of a tempting target after his widely publicised CSS rant last month (which was the main inspiration for this course), but there are a number of sensible reasons his site makes a good case study as well. The theme for today is "bugs in IE5 for Windows", and jwz's site offers two classic examples that fit this theme nicely. The first is the fact that the design is centered on the page, and the second is his choice of Verdana, a font which requires some trickery to get working well in IE5. In addition, the design of the entries seems to be a natural fit for a table based layout, so demonstrating how much simpler the code can be in CSS will hopefully turn a few heads.

Here's the "before" screenshot:

And here's the original HTML (I've added some newlines but other than that it's as seen on the page):


<table summary="" border="0" cellpadding="2" class="entrybox" width="600" 
cellspacing="0">
<tr align="left">
<td align="center" bgcolor="#00CC00">
<table summary="" border="0" cellpadding="5" width="100%" cellspacing="0">

<tr align="left">
<td class="caption">Life isn't fun 24 hours a day, so shopping should be.</td>
<td class="index" align="right">[18&nbsp;May&nbsp;2003|<b>04:09pm</b>]</td>
</tr>
<tr align="left">
<td bgcolor="#000000" colspan="2">

<table summary="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="meta">[</td>

<td class="meta" align="right"><b>music</b></td>
<td class="meta" align="center">|</td>
<td class="meta">Luscious Jackson -- Bam Bam</td>
<td class="meta">]</td>
</tr>

</table><p>
<p><a href="
http://www.nytimes.com/2003/05/18/magazine/18TOKYO.html?8hpib=&amp;pagewanted=all">
The Economy of Cool</a> <p> Katayama has a dozen or so interiors to his credit in 
Harajuku-Aoyama, Tokyo's fashion and design district. All within walking distance 
of one another, they are boutiques that, in almost every case, aggressively cater 
to a youthful clientele for whom shopping is an adored cultural pursuit. ''You're 
not just buying the product,'' Katayama says. ''You're also buying the time you 
spend.'' [...] <p> Now 36, Masamichi Katayama studied interior design in Osaka, 
although he is quick to point out that it was strictly technical training, with 
no theoretical or academic courses. ''I learned the philosophy of what I do by 
shopping,'' he says. ''I'm a consumer first and foremost. Life isn't fun 24 hours 
a day, so shopping should be.'' He lights cigarette after cigarette as he speaks, 
taking no more than three drags on each before moving on to the next. [...] <p>

</td>
</tr>
<tr>
<td class="comments" width="100%" align="right" bgcolor="#004400" colspan="2">
<a href="http://www.livejournal.com/~jwz/203141.html"><b>2 comments</b></a>|
<a href="http://www.livejournal.com/~jwz/203141.html?mode=reply">post comment</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

That's three tables for every entry on the page. If we trim it down to basic structural HTML, we get the following:

<div class="entry">
<p class="date">[18 May 2003|<strong>04:09pm</strong>]</p>
<h2>Life isn't fun 24 hours a day, so shopping should be.</h2>
<p class="music">[<strong>music</strong>|Luscious Jackson -- Bam Bam]
<p><a href="
http://www.nytimes.com/2003/05/18/magazine/18TOKYO.html?8hpib=&amp;pagewanted=all">
 The Economy of Cool</a></p>

<p>Katayama has a dozen or so interiors to his credit in Harajuku-Aoyama,
Tokyo's fashion and design district. All within walking distance of one
another, they are boutiques that, in almost every case, aggressively
cater to a youthful clientele for whom shopping is an adored cultural
pursuit. ''You're not just buying the product,'' Katayama says.
''You're also buying the time you spend.'' [...] </p>

<p>Now 36, Masamichi Katayama studied interior design in Osaka, although he is
quick to point out that it was strictly technical training, with no
theoretical or academic courses. ''I learned the philosophy of what I
do by shopping,'' he says. ''I'm a consumer first and foremost. Life
isn't fun 24 hours a day, so shopping should be.'' He lights cigarette
after cigarette as he speaks, taking no more than three drags on each
before moving on to the next. [...] </p>

<p class="comments">
<a href="http://www.livejournal.com/%7Ejwz/203141.html" class="count">2 comments</a>
|<a href="http://www.livejournal.com/%7Ejwz/203141.html?mode=reply">post comment</a>
</p>
</div>

That's quite a substantial reduction in markup. Here's what it looks like. The challenge now is to make it look like it does in the picture.

First, let's set a few basic rules. JWZ's site has green text on a black background, both of which should be set as rules on the document body (they could be set on individual elements but since they apply to the whole document it's best to define them higher up):

body {
  background-color: #000;
  color: #0f0;
}

Note that while the original site uses #000000 and #00FF00 as hexadecimal colour attributes on the body tag, I have used #000 and #0f0. Since many common colours can be represented using three pairs of hexadecimal digits, CSS allows you to use three instead of six and will "double" each digit in its place. color: #00ff00; would have exactly the same effect.

Setting the font size (IE bug #1)

Now it's time to tackle our first IE5/Windows specific bug. Verdana is an extremely popular font among web designers, but suffers from the unfortunate problem that it is sinfully ugly when displayed at the browser's default text size. Knock it down just one size and it becomes a great deal pretty, while remaining completely readable. As a result, if we want to use Verdana we really need to make it smaller.

CSS provides a truly huge range of font sizing options, and each and every one of them carries its own set of flaws and limitations thanks to differences in implementation between the many CSS supporting browsers. A good resource for understanding the scope of this problem is Owen Brigg's excellent Text Sizing article, which includes 274 screenshots of different font sizing techniques in different environments. To cut a long story short, the only reliable cross browser sizing method is to specify the size of the font in pixels. This comes with one massive drawback: doing so will prevent IE users from resizing the text in their browsers. If you care at all about accessibility you'll know why this is a bad idea.

No matter which font sizing technique you use, it is widely recognised that the best way of dealing with font sizes is to set a single basic font size on the body and then size other text on the page relative to that initial size using ems (described briefly last tutorial) or percentages. Personally, I like to use a font such as Georgia which looks good at the default browser size setting and avoid the whole issue of setting an initial size, but as we have already discussed if you are using Verdana this is pretty much out of the question. When forced to resize the default font, my favoured method is to use the font-size keywords small and x-small.

This is where the IE5 bug comes in. Most browsers (including IE6 in standards mode, all Gecko engine browsers and Opera 7) display Verdana at the size I prefer if you specify font-size: small. IE5 for Windows on the other hand requires font-size: x-small. Since IE5 still has a relatively large market share, it's important to get things looking good in that browser, no matter how irritating it's support of CSS. It's time to apply a hack...

Hacks are something of a controversial issue within the CSS community. Some people see them as an anathema to everything that CSS is meant to represent, while others (myself included) see them as a slightly unpleasant tool that can help achieve a practical end. Since the focus of this tutorial is on the practical applications of CSS, I'll leave discussions of the validity of hacks to the css-discuss wiki.

The hack I shall be using here is the famous Box Model Hack by Tantek Celik. Originally devised to get around a serious flaw in IE's implementation of the box model (to be covered later in the course), the box model hack allows a CSS author to feed one value to IE5 and another to better, more standards compliant browsers. We want to give IE5 x-small and everything else small, and here's the code we are going to use:

body {
  background-color: #000;
  color: #0f0;
  font-family: verdana, sans-serif;
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body {
  font-size: small;
}

Ugly, isn't it? The way it works is explained elsewhere, but believe it or not the above code will kick IE5 in to line with the rest of the mainstream browsing world. Here's how it looks. Let's move on.

Styling the Entry

Now that text sizing is out of the way, we can get on with styling the entry itself. First, let's look at the div surrounding each entry. Firstly, it needs to be 600 pixels wide to match the width of the table in the original. The original design has a 2 pixel wide line around the edge of the table, and we can replicate this using a CSS border. Borders in CSS can be applied to the top, left, right and/or bottom of an element in any colour, any thickness and a number of different styles: they are a very powerful tool. In this case we just need a 2 pixel wide green border around the whole div. Here's the CSS:

div.entry {
  width: 600px;
  border: 2px solid #0c0; /* Applied all the way around the div */
}

The entry title is a critical part of the design. We have used an h2, but we need to style this with a green background and correctly sized black text. Headers always come with a default margin above and below the header, but since we are using the background colour of the element as part of the design we need to eliminate this by specifically setting the margins around the element to 0. We also need some padding to give the text inside the element some space - trial and error leads us to set this at 5 pixels:

h2 {
  margin: 0;
  padding: 5px;
  font-size: 1em;
  color: #000;
  background-color: #0c0;
}

The date for each entry appears alongside the title, on the right hand side. As we saw last time, this can be achieved with a float. I'll also set the font size to 0.85em (again found using trial and error) and add some padding to ensure the date appears inline with the heading:

div.entry p.date {
  font-size: 0.85em;
  float: right;
  color: #000;
  background-color: #0c0
  margin: 0;
  padding-top: 5px;
  padding-right: 5px;
}

I've specified the background-color again because it is good practise to always set a background colour at the same time as you set the colour of an element. This helps ensure you never accidentally end up with unreadable text that is the same colour as its background.

Here's what our redesign looks like now.

Tidying up the text

There are two glaring problems with what we now have. Firstly, there is no space between the borders and the text. Secondly, the link colours aren't as they should be. We can lift the link colours straight from the attributefs on the body tag in the original site:

a:link {
  color: #00DDFF;
  text-decoration: none;
}
a:visited {
  color: #FF6633;
}

We are using a:link as the selector rather than just a on its own, because a will match all <a> elements including those that are just being used as a link target. There aren't any on the page, but it's a good idea to get in to the practise of using a:link to style links anyway. a:visited applies styles to visited links. The :something syntax is called a pseudo-selector. It's also worth noting an accessibility point here: it's generally a very bad idea to set links apart from normal text by colour alone, so text-decoration: none should be discouraged unless some other non-colour based visual indicator is also specified. I'm ignoring that for this example in order to comply with the original design.

Space between the border and the text can be added in a number of ways: as padding within the entry, as a margin on the paragraphs or as padding on the paragraphs. Since we have set a width on the entry it's a good idea to avoid adding padding to this as this can result in IE5 misbehaving (a box model problem, which could be solved by the box model hack but why hack when you can possibly avoid it?). Instead we will set a margin on the paragraphs:

div.entry p {
  margin: 1em 5px;
}

Here we are using another CSS shorthand. Both padding and margin properties can be set with one, two, three or four properties. If only one is provided, it is applied to all four sides. If two are provided (as in this example) the first is applied to top and bottom and the second to left and right. If four are provided, they apply to Top, Right, Bottom, Left respectively (a good mnemonic for this is TRouBLe, which I picked up from Eric Meyer). Behaviour for three properties is defined but it's quite complicated so I recommend avoiding it entirely. The upshot of all this is that the above rule adds a 1em margin to the top and bottom of each paragraph and 5 pixels to either side. You'd be forgiven for thinking that this means margins would be spaced 2 ems apart, but in fact the margins on elements on top of each other collapse to fill the space of just one. I'll talk about this more when I cover the box model in detail.

The styles for the comments section at the bottom (complete with dark green background) and the music section at the top of the entry should be pretty self explanatory, so I'll provide them here without further analysis:

div.entry p.comments {
  background-color: #040;
  margin: 0;
  padding: 5px;
  text-align: right;
  font-size: 0.85em;
}
p.comments a.count {
  font-weight: bold;
}
div.entry p.music {
  font-size: 0.85em;
  margin-top: 0.5em;
}

Note that both paragraphs have a margin explicitly set - this is important as we need to over-ride the margin set on all paragraphs within div.entry earlier on. This is also related to the reason the full div.entry p.comments selector is used instead of just p.comments - if you want to know the full reason for this, look up the CSS specificity rules which are outside the scope of this article.

Centering the DIV

We're nearly there! All that remains is to center the div on the page. This is the point where our second IE5/Windows bug rears it's ugly head...

The standard way of centering a block level element (for example a div or a paragraph) in CSS is to set the left and right margins of the paragraph to "auto". This can be achieved using the shorthand property explained above: margin: 0 auto;. Were it not for IE5, our troubles would be over. Unfortunately, IE5 fails to recognise this method.

As luck would have it, we can now use another IE5 bug to our advantage. The text-align: center declaration, as you might expect, aligns text in the center of the element. IE5 incorrectly also applies the property to block level elements, which include our troublesome div. So we can set text-align: center on our body element and all is well...?

Not quite. Like most text properties (such as the font-size property we were playing with earlier) text-align is inherited. If we center the text in our body, we end up centering it in all of our other elements as well. Luckily we can use text-align: left on the other elements in our document to prevent this from happening. Combine these three CSS tricks and you get the following method for centering elements in an IE5 friendly way:

body {
  ...
  text-align: center;
}
div.entry {
  ...
  margin: 0 auto;
}
body div, body p, body h2 {
  text-align: left;
}

Which brings us to our final result: JWZ's blog entries in pure CSS. It took quite a bit of work, but I think the results speak for themselves.

What you should have learned

While most designs can be achieved in CSS, some are harder than others. This is not the fault of CSS; it is more a problem with faulty browser implementations of CSS. When people call IE5/Windows the "new Netscape 4", they are doing so with good reason! However, IE5's deficiencies are well understood with the CSS community and workarounds exist which, while initially tricky, for the most part work very well. With a bit of insider knowledge the beast can be tamed.

In this tutorial I've tried to roll up my sleeves and get stuck in to the dirtier side of CSS development. I've demonstrated some hacks, and I've shown how there can be more to practical CSS than meets the eye. It may seem like an awful lot of work, but in fact the initial jwz remake took me just over half an hour thanks to my previous experience with IE5 bugs.

For the next installment, I will be stepping back from hacks and unpleasantries and looking at CSS being used in a much simpler light: to visually enhance semantically structured page elements. I also have another case study planned which will make much lighter reading than this one. As always, comments are welcome.

And finally, apologies to jwz for borrowing without asking. I hope I haven't caused offence.

Scripting.com, with added CSS

Simon Willison — 2003-05-19T23:58:23-00:00

One of the aims of this course is to show how relatively simple CSS can be used to make dramatic improvements to existing sites. Today, I'll show how CSS can be used to reduce the amount of code needed for a small part of the design of Scripting.com.

Scripting.com presents the main blog entries as a series of paragraphs under a single header for each day. Here is a screenshot from today's edition of the site:

The HTML behind the above screenshot is as follows:

<table width="400" cellspacing="0" cellpadding="3" border="0">
	<tr bgcolor="#000000">
		<td colspan="2"><font color="#F5F5F5"> <b>Monday, May 19, 
2003</b></font></td>
		<td valign="middle"><font color="#F5F5F5"> 
<b><a href="http://scriptingnews.userland.com/2003/05/19" 
title="Permanent link to Scripting News archive for Monday, May 19, 2003.">
<img src="http://www.scripting.com/images/home/dailyLinkIcon.gif" 
height="15" width="12" border="0"></a></b></font></td>
		</tr>
	<tr bgcolor="white">
		<td width="5"> </td>
		<td valign="top">
			<br>
			<a name="When:1:11:34PM">
<a href="http://icann.blog.us/2003/05/19.html#a1356">Bret Fausett</a>: 
"It seems that an article making the rounds on Googlenews -- '.org Registry 
Vanishes Into Thin Air'  -- has no merit whatsoever.  
<a href="http://scriptingnews.userland.com/2003/05/19#When:1:11:34PM" 
title="Permanent link to this item in archive.">
<img src="http://www.scripting.com/images/2001/09/20/sharpPermaLink3.gif" 
height="9" width="6" border="0"></a><br><br>

<a name="When:7:06:28AM">Guardian: 
<a href="http://www.guardian.co.uk/online/comment/story/0,12449,959151,00.html">
The blog clog myth</a>.  
<a href="http://scriptingnews.userland.com/2003/05/19#When:7:06:28AM" 
title="Permanent link to this item in archive."><img 
src="http://www.scripting.com/images/2001/09/20/sharpPermaLink3.gif" 
height="9" width="6" border="0"></a><br><br>

I've added some extra line breaks to fit all of the code in the space available, but other than that it's unmodified.

First, let's reduce the above to the equivalent structural HTML, removing all of the presentational tags and adding in a few that might be useful. We're also going to remove the images - they'll still be there in the final version, but by using background images defined in the CSS we can save quite a lot of code.

<div class="entry">
<h2><a href="http://scriptingnews.userland.com/2003/05/19" 
title="Permanent link to Scripting News archive for Monday, May 19, 2003."
class="permalink"><span>#</span></a>Monday, May 19, 2003</h2>

<p><a name="When:1:11:34PM"></a>
<a href="http://icann.blog.us/2003/05/19.html#a1356">Bret Fausett</a>: 
"It seems that an article making the rounds on Googlenews -- '.org Registry 
Vanishes Into Thin Air' -- has no merit whatsoever. 
<a href="http://scriptingnews.userland.com/2003/05/19#When:1:11:34PM" 
title="Permanent link to this item in archive." class="permalink"><span>#</span></a></p>

<p><a name="When:7:06:28AM"></a>Guardian: 
<a href="http://www.guardian.co.uk/online/comment/story/0,12449,959151,00.html">
The blog clog myth</a>. 
<a href="http://scriptingnews.userland.com/2003/05/19#When:7:06:28AM" 
title="Permanent link to this item in archive." class="permalink"><span>#</span></a></p>

</div>

A few notes about the above. First, I've wrapped the whole entry in a div with the class "entry". This means I can use descendant selectors to style the other elements in the block qithout needing to add additional classes. The only classes I've added are the permalink classes on the various permalinks - these will be used in a moment. Note also that the '#' signs in the permalinks have a span tag around them. The reason for this will become apparent in a moment. The table used for the header has been replaced with a structural h2 tag. Header tags should be applied in order, with the most important header on the page using h1 and the other headers being used for sub headers, sub-sub headers and so on. I'm assuming that h1 would be used for the site title (or logo) so I'm using h2 in this example.

The unstyled HTML can be seen here.

Now let's style it with some CSS. First up, Scripting.com's main layout table is 400 pixels wide. We can emulate that by applying a width to our <div>:

div.entry {
  width: 400px;
}

Now let's concentrate on the header. The date header on Scripting.com has a black background with white text. The text is bold, and is displayed at the same size as the body text of the rest of the site. In CSS, relative sizes can be specified using the em unit. 1em means 1 times the current text size, so we'll set the font-size to 1em. Finally, the header is padded with about 3 pixels on every side. Here's the CSS:

h2 {
  background-color: black;
  color: white;
  font-size: 1em;
  font-weight: bold;
  padding: 3px;
}

See the result here. So far, so good - but what about the funky permalink? It's an image, and it appears over on the right. Normally this would be a sign that we need a table, but we can achieve the same effect in CSS using the float property. Floats are actually one of the hardest properties to fully understand, but if you've ever used the align attribute on an image you should have a good idea of what they do. We will use float: right on the permalink to cause it to shfit as far right as possible, appearing next to the main header text.


h2 a.permalink {
  float: right;
}

But what about the image? Here's where things get tricky. We're going to use a technique called the Fahrner Image Replacement. This is what the extra spans are for - we can apply a background image to the a element, then make the contents of the span invisible using display: none.

h2 a.permalink {
  float: right;
  width: 12px;
  height: 15px;
  background-image: url("dailyLinkIcon.gif");
}
h2 a.permalink span {
  display: none;
}

And here's the result.

That's the header finished - now for the paragraphs. The first thing to notice is that they are indented approximately 15 pixels on the left hand side. This can be easily emulated in CSS using either a margin or padding - I'll use padding, but margin would work just fine as well.

div.entry p {
  padding-left: 15px;
}

We're nearly finished - all that's left to do now is the permalinks at the end of each paragraph. We will use FIR again, but this time the background image we are using is far smaller than the # sign it is replacing so we can take a slightly different approach:

div.entry p a.permalink {
  background: #fff url("sharpPermaLink.gif") no-repeat center center;
  text-decoration: none;
}
div.entry p a.permalink span {
  visibility: hidden;
}

This time the permalink is made invisible using the visiblility property rather than being removed entirely - that way we don't have to worry about adding a width or height to the link. The background image is placed using a shorthand property which allows all of the background properties to be specified at once - it should be relatively clear what the property does.

The end result can be seen here - viewed in a standards compliant browser (I tried it in Firebird, IE 5 and Opera 7) I think you'll agree it's an almost exact replica of the original, but with a great deal less markup. Times that saving by several dozen entries on a page and it really starts to add up.

Final note: this entry comes with apologies to Dave Winer of scripting.com, who has not been consulted prior to the publication of the article.

The anatomy of a stylesheet

Simon Willison — 2003-05-18T23:56:15-00:00

To start my series of tutorials, I'm going to go over some of the basics of CSS. This is the boring bit: if you already know the difference between rules, properties and selectors you may want to skip this entry.

The basic building block of a stylesheet is the rule. A rule is a statement applying one or more properties to one or more elements. The declaration of a rule is split in to two parts; the selector and the declaration block, which itself consists of declarations. Each declaration consists of a property and a value. Confused by the terminology yet? Don't worry, that's about as complicated as it gets, and I'll be providing a summary of definitions later on.

Here is an example of a rule:

h1 {
  color: navy;
  border-bottom: 1px solid black;
}

In the above, h1 is the selector; it specifies the parts of the HTML document that the rule should be applied to. In this case, it means "all <h1> elements". The curly braces mark the declaration block, with the two declarations separated by semi-colons. I've placed the declarations on different lines but this is purely a coding style thing: CSS ignores whitespace as a general rule.

The meanings of the two declarations should be relatively self evident: color: navy (note the American spelling of "color") sets the colour of the text to navy blue, while border-bottom: 1px solid black; adds a 1 pixel wide solid black border to the bottom of the element. In fact, this is an example of a shorthand property which allows several properties to be set at once.

There are over 100 properties defined by the CSS2 specification, but they are generally quite straight forward and can be picked up as you go along. Selectors are also straight forward but their importance is often underestimated: in my opinion, understanding them thoroughly is critical to learning to use CSS effectively.

Selectors

The selector part of a rule specifies which parts of the associated document the rule should be applied to. Selectors are always positioned at the start of a rule before the open curly brace. More than one selector can be specified for a single rule, in which case the selectors must be separated by commas:

/* Make all <h1> and <h2> elements navy blue */
h1, h2 {
  color: navy; 
}

The most basic form of selector, demonstrated above, is the element or type selector. It is written as the tag name of an HTML element and matches all elements of that type.

The next most common selectors are those based on classes and IDs. A class is any string of numbers and letters, starting with a letter - for example, "blogentry", "nav", "codeSample", "row2". Classes can be assigned to any element within an HTML document using the class attribute. Multiple classes can be assigned to an element by placing a list of classes in the class attribute separated by spaces. For example:

<div class="blogentry first">...</div>

The above is the HTML for a div that has both "blogentry" and "first" as classes.

Classes can then be used as part of a selector, by appending a full-stop on to the front of the class name:

/* Colour anything with class="blogentry" navy blue */
.blogentry {
  color: navy;
}

Class selectors can include an element name as well, to limit the application of the rules to specific elements with the specified class:

/* Colour only divs with class="blogentry" navy blue */
div.blogentry {
  color: navy;
}

The above piece of CSS will change the colour of <div class="blogentry">, but will not affect <h3 class="blogentry">.

ID selectors affect elements with a specific id attribute. IDs are like classes in that they can be applied to any element, but unlike classes any specific ID can only be used once within any single document. Classes can be used as many times as you like. As a result, IDs should be used on page items that occur only once, such as a company logo that appears in the top left hand corner of a page. ID selectors consist of the ID with a # sign preprended on to it:

/* Position the element with id="logo" at the top left of the page */
#logo {
  position: absolute;
  top: 0px;
  left: 0px;
}

The above example would position any element with id="logo" at the top left of the page, using absolute positioning (which I will cover in detail later in the course).

As with class selectors, you can include the element name before the hash sign. This may seem unnecessary since only one item on any page can have a specific ID, but I find doing so helps make the resulting stylesheet more readable as it reminds me what type of element the ID is attached to.

With the basic selectors out of the way, the next most useful selector is the descendant selector. This consists of two or more selectors separated by spaces, and has the effect of matching things that match each of the selectors, going from first to last. For example, div#main a matches all links that occur inside <div id="main">, while div#nav ul.plain li would match all <li>s occuring inside a <ul class="plain"> that itself occurs inside <div id="nav">. Descendant selectors are extremely powerful, and can often be used in place of a large number of class attributes. In general, if you find yourself using a class attribute on every one of a whole bunch of similar elements you may be able to replace them all with a class attribute on a containing element accompanied by a descendant selector in the stylesheet.

Attaching a stylesheet

Now that you know what goes in a stylesheet, you need to know how to attach rules to an HTML document. There are two options: internal stylesheets, where the CSS is included at the top of the page, and external stylesheets, where the stylesheet is a separate file. External stylesheets are generally a better bet as they allow a single stylesheet to be shared across multiple pages (dramatically improving download times as the stylesheet can be downloaded once and then cached by the browser), but I will describe both methods here. Here is the code for an internal stylesheet:

...
<head>
<style type="text/css">
h1 {
  color: blue;
}
...
</style>
...

The CSS rules are placed within a <style> element within the head section of the document. The type="text/css" attribute specifies the stylesheet language being used (on the offchance that another stylesheet language is created some time in the future).

For an external stylesheet, the CSS rules are saved in a file with a .css extension (the file extension is not ompulsory but the file should be served with a text/css content type header, and most web servers are configured to serve .css files using that content type). The HTML to link in an external stylesheet, again placed in the head section, is as follows:

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

That's all the basic CSS I plan to cover; my next article will start on the core material of the course, which will be a set of case studies showing how existing sites using legacy markup can be dramatically improved through the addition of a little careful CSS.