Articles

Tempted to use something like “1800number_box” for a ID? Don’t. Because it won’t work. Class identifiers are allowed to start with a number, but ID identifiers are not.

That is all.

If you have already existing HTML using it …

With browsers that support the CSS3 Spec (Safari only at the time of this writing) there is no longer need for the sliding doors technique to create horizontally expanding elements that utilize background images. The ability to assign multiple background …

You’ve seen this a million times:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

The classic menu HTML which you can transform into any number of beautiful things through CSS. You could include that in all your pages …

The 37 Signals Blog, Signal vs. Noise, has a post about a month ago with an interesting observation:
“Designing for the iPhone is like a hybrid of print and web design.”

Their point was with the iPhone, you know the …

The default way to include an external stylesheet is to use the the link tag inside your pages head:

<link rel="stylesheet" href="default.css">

That is a tried and true method and supports the whole spectrum of browsers from old and ancient …

Creating vertically-expanding boxes is easy, just declare a width in your div CSS but no height. The div will expand to as large as it needs to be for the content inside. It gets a little more complicated if you …

Has your CSS ever been acting funny on you, but it looks as if you’ve done everything perfectly? It just might be your HTML declarations that are screwing you up. Sometimes when you are just throwing together a little sample, …

Cascading Style Sheets, at its root, is intended to separate the style of a webpage from the content. That makes sense for control reasons, but also for general code beautification. Just a little browsing through the CSS Zen Garden or …

Footers on web pages are a great place to chuck copyright information, contact links, and quick navigational stuff. Visitors are trained to look to the bottom of pages to find these types of things, so why not help them out? …

Update November 2020: I think the best possible technique for this is Method 4 in this article. The <div> (or whatever wrapper element) remains semantic and accessible, while being “clickable” over the whole area. It doesn’t break text selection and …

We just posted on the nastiness of javascript-based rollovers. We showed you the basics of how to do it with CSS instead, but now it’s time to put our money where our mouths are and provide a real example.

This …