I don’t really get CSS

Saturday 11 October 2003 — This is more than 21 years old. Be careful.

I’ve fiddled with the type size on this page. I wanted it smaller, because frankly, I’ve never liked the shapes of the letters the way it was before. I like larger type generally, but I’m trying this smaller type for a while to see what I think.

But here’s the thing: CSS makes me antsy. I understand the concept, and separation of style from content is a wonderful thing. Being able to declaratively make changes throughout a page with simple edits is tremendous. Max and I just had some fun making my links as wacky as possible:

a.wacky:hover {
  text-decoration: underline;
  font-weight: bold; font-size: 200%;
  background-color: black; color: white;
  text-transform: uppercase;
  border: 3px dotted yellow;
  margin: 10px;
  padding: 30px;
}

(try it: hover here).

But when it comes to setting font sizes and line heights in nested elements, I just don’t get what’s happening. I’m sure some of it is just browser implementation differences, but can someone please give me a simple rule for how to get it right? I’ve had the same problem when it comes to setting padding or margin or whatever on consecutive boxes. How do you come up with a system that works, without having to test all possible combinations of things? I want it to look good, but I don’t want to fall down a CSS rabbit hole.

» 4 reactions

Comments

[gravatar]
Kayode Okeyode 3:24 AM on 12 Oct 2003
Your wacky links have no effect on Opera 7.20 when I hover over it; but it does work on Firebird.
[gravatar]
Simon Willison 4:17 AM on 12 Oct 2003
My golden rule for CSS text sizing is to set a base size on the body tag using keywords (font-size: small) for example, then use ems to resize individual parts of the page relevant to that base size. This is only necessary when using fonts like Verdana which look unpleasant at default size. These days I tend to stick with Georgia instead, which looks fine at default text size meaning you don't need to set a size on the body tag (I still use ems to set the size of footers and headers).
[gravatar]
Bernard Farrell 8:25 AM on 13 Oct 2003
Ned

You need to start looking at the stuff promoted by Eric Meyer and Jeff Zeldman. Probably a good place to start is A List Apart. Try their Fear of Style Sheets article at http://www.alistapart.com/stories/fear3/.

Bernard
[gravatar]
ludo 2:31 PM on 14 Oct 2003
Maybe you're already using it, but Mozilla Firebird has some very useful bookmarklets that let you view computed style sheets (ie the css rules hierarchy) for a given element by clicking on it. Pretty invaluable to debug css.
Another useful tool is Mozilla's DOM inspector.

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.