CSS signatures

Posted in:

I've added a CSS signature of lukeplant.me.uk to this site. What this allows you to do is to use your own user stylesheet to change things about the appearance of this site, without affecting any other sites. This relies on you browser supporting user CSS stylsheets.

For those of you unfamiliar with CSS/HTML, CSS is the modern way of specifying style and layout information for a web page. CSS allows you to write rules about all aspects of appearance of different elements in a web page. The author of a web page will usually provide a CSS file for the page, but each user can provide their own user stylesheet via their browser.

CSS signatures allow the user stylsheet to be site specific. So, if you wanted to change the font and and decrease the text size for my site, you could add these rules to your user stylesheet:

#lukeplant\.me\.uk {
    font-family: verdana ! important ;
    font-size: 0.8em ! important ;

The ! important bit means that your value will override the one I have supplied.

Using CSS signatures is an easy way to make user stylesheets a much more useful feature, but probably a better one is to have a browser feature that allows you to select per-site user stylesheets.

Technical notes

  • According to the CSS specs on cascading order, the CSS provided by the web page overrules the user's stylesheets. In most of the discussion you find about CSS signatures and user stylesheets, this seems to be ignored. I'm guessing that this is because most of the people using the feature are users of the Opera browser, and perhaps this has non- standard behaviour, such that user stylesheets override author stylesheets.

  • There seems to be some confusion about the use of dots (periods) in the ID element. In most other examples of CSS signatures, you'll find that the dots have been replaced by dashes, apparently because the dots are invalid characters. However, the HTML specs on data types say otherwise, and the CSS specs on characters allow you to use blackslashes to make the dots into valid characters, as shown above. As replacing dots with dashes has some bad side effects (e.g. you can distinguish between some.where.com and some-where .com), I see no reason to do it.

More web design stuff


While I'm here, I'll mention that I've actually removed my choice of font from my stylesheet (and I never had a font size set). This means that the choice of font and size that you have specified in your browser is the one that will be used (it also means that the ! important bit above are not needed for this site, but would be for most others). In all decent browsers you can choose your default font to be serif/sans-serif/whatever you want, at any size you want, and it's therefore guaranteed to be easy on your eyes.

This decision has mainly come from being frustrated with web sites that use small fonts because it looks cool, or because they think it will look right on my machine. I have set the font size I want to see on my browser -- just leaving that alone is all that needs to be done. There are no reliable ways of guessing what size to use -- specifying in pixel units (px) is terrible, as some people have much larger resolutions, and using points (pt) aren't much better for various reasons. (Konqueror actually has buttons and keyboard shortcuts for changing the font size, but having to use them all the time is a real pain).

Of course I don't mind menus and the like being smaller, but the main content should be the size I choose. Scaling should all be relative to the normal font size i.e. in units of em or ex, and that way everything will stay looking OK. I should say that sites where presentation is paramount, or that do not have long text content, are excused from this, but should still try to be sensible with font sizes.


You'll also notice that my site has no 'www' at the beginning of the domain name, as this is completely redundant - the http:// bit means you must be using the web. I recently found a site dedicated to deprecating www, so I'm not alone. As I heard someone pointing out, 'w' is the longest sounding letter by a factor of three - every other letter has just one syllable. To add 'www.' to the beginning of every URL adds 10 completely unneeded syllables.

Comments §

Comments should load when you scroll to here...