The CSS Anarchist's Cookbook

O’Reilly Network
July 2000

I tried to resist. Honest. Standards are good things, and they should be used for benefit of the Web. I know that. But I was reading Tap the power of Mozilla's user stylesheets, by Andrew Wooldridge of Netscape, when I felt this eerie tickle on the back of my neck. It turned out to be my wife teasing me, but at the same time, I was getting... thoughts. Ideas. Bad ideas. And once it started, I couldn't stop it. Oh, I tried. I kept telling myself that CSS should never be used for evil. That in the wrong hands, it could wreak havoc upon the face of the Web as we know it.

Then I thought, what the heck, it's not like anyone can hack servers with CSS. So I gave in and joined the dark side. Once joined, I felt the need to lure others into the same trap. Sure, it's evil, but what can you do?

So now I come to you with news of weapons of great destruction. Using common browsers and a little ingenuity, we can erode and explode look-and-feel as we know it. The Web will never look the same again. How will we unleash this awesome force? Simple user stylesheets. These seemingly innocuous files can be used to:

...and so much more.

Assembling Your Arsenal

Ready to cause damage? First, you'll need one or more of the following browsers: Mozilla, preferably M16 or later; Microsoft Internet Explorer 5.0 or later for either Windows or Macintosh, preferably the latest available version; and Opera 3.6 or 4.0, preferably the latter. I recommend these versions because they all support user stylesheets, which is necessary, and also because all of them support CSS2 to some degree. You'll also need software to write CSS, whether that's a text editor like BBEdit or something more point-and-click, such as Style Master or TopStyle.

Most of the examples in this article will use Mozilla M16. This is because of the three browsers mentioned, it's the most standards-capable rendering engine, and it typically downloads quickly. Also, it has the same designation as a common military weapon, so it makes a bonus reference to general violence and mayhem. Opera 4 is very close to Mozilla, if not better, in the download size and standards compliance categories, and is certainly a worthwhile purchase if you want to spend money to get a standards-compliant browser. However, its name doesn't sound nearly as violent, unless you have sensitive eardrums. Or really hate Pavarotti.

With your weapon of choice in hand, all you need to do is set up a user stylesheet containing one or more of the nasty little tricks I'm about to share with you. If you don't know how to create or use user stylesheets, refer to your browser's help files before proceeding.

Target: FONT

We first train our sights on the FONT element. The use of FONT is so common on the Web that you almost can't use this trick without affecting every page you visit. However, since FONT is unnecessary presentational HTML and shouldn't exist at all, we should feel no remorse at attacking it.

For those who wish to still see the FONT content, but basically render it inert, fellow revolutionary Darin McGrew suggested this one to me: 

FONT { color: inherit !important;
  background: inherit !important;
 font-family: inherit !important;
   font-size: inherit !important; }

Thanks to the values of inherit, the FONT element will inherit from its parent element the parent's values of color, background, the font-family, and font-size.

For those with nastier tempraments and no compunction about completely zapping out parts of Web pages, you can try this much simpler statement: 

FONT {display: none !important;}

This will cause any FONT element, and all of its contents, to simply not be rendered, as though it had never existed at all. And isn't that what should be true anyway?

Wrecking Tables

The FONT element may be almost everywhere, but tables are far beyond that. Finding a page which isn't laid out using tables is a truly special challenge. Most tables are stealthy, using cells with no border, padding, or intra-cell spacing, but they are still there. Designers go to great lengths to set up tables which will are exactly what they want. So wouldn't it be fun to totally upset those carefully tuned designs?

The easiest way is to simply blow apart the contents of the cells. Try this one on for size: 

TH, TD {padding: 1em !important;}

This should be the same as setting all tables to have a cellpadding of 1em, which in practice will work out to somewhere between 10 to 15 pixels. Of course, the amount of padding will vary with the font-size for each cell. If you want something more uniform, you could try setting the padding to something like 10px. Hey, do whatever you want. That's one of the benefits of being evil.

If you like blank pages, you could always try this one: 

TD, TH {color: white !important; background: white !important;}

White text on a white background... always fun for reading. This still leaves the images behind to look as though they're just hanging in empty space, which can be an interesting effect. If you want to blow them away too, then you might prefer something like this: 

TABLE {display: none;}

And there goes at least 95% of the Web.

As fun as all this wanton destruction might be, there are sneakier ways to upset a table layout without making the content unreadable. For example, many tables use left and right alignment to get split-up images to appear joined, or to otherwise create a certain look. That's an easy one to overcome as well: 

TD, TH {text-align: center !important;}

Everything within a table will now be centered. You could change that to left or right alignment, too, and get very different (but still disruptive) results. Isn't this fun?

Eliminating Ad Banners

Tired of blinking, moving, annoying ad banners? Feel like protesting the capitalist hegemony? Just feeling cranky? Here's your chance to strike back at The Man by filtering out the standard-sized ad banners you see across the top of so many pages.

First, we have to realize that most of these ads are a certain size: 60 pixels tall by 468 pixels wide. This gives us the perfect opportunity to target and eliminate them. Here's how: 

IMG[height="60"][width="468"], IMG[height="60px"][width="468px"]
   {display: none !important;}

We've written selectors for both sets of attribute values (e.g., "60" and "60px") to make sure that we cover all our bases. With this in your user stylesheet, a large portion of Web ads will simply disappear. Remember that this rule only prevents display of the images. They're still downloaded by the browser, so you don't save any bandwidth.

Of course, if you simply want them to fade into the background, you could lower their opacity: 

IMG[height="60"][width="468"], IMG[height="60px"][width="468px"]
   {opacity: 0.1 !important;}

They'll still be visible, but only barely. That way, you can still figure out whose they are if you really care, but otherwise just ignore them. Because this approach uses opacity, though, it's restricted to Mozilla. Of course, given that the whole approach uses attribute selectors, you can't use it in MSIE5 or Opera 3.6 either.

The other thing to remember about this rule is that it will affect any image of the specified size, whether or not it's an ad banner. So if somebody's title graphic happens to be 468x60 pixels, it will disappear too. That's what we call "collateral damage." It can be grim, but it's the price we pay for striking back at the capitalist running-dog lackeys who have overrun the Web. (I don't know about you, but I kind of miss old-school Soviet rhetoric.)

Exposing Linked Images

The other things designers spend lots of time doing is turning off broders on images which are also links. This can make them hard to pick out. Designers tell us that the changing mouse cursor will tell us which images are links, but that's obviously because they want us mousing over all of their images, thus spending more time looking at their work. I say, bah! Make those linked images stand out: 

A:link IMG, A:visited IMG {border: 2px solid blue !important;}
A:hover IMG {border: 2px solid red !important;}

The first rule sets a border on any image which is contained within a hyperlink, visited or not, and the second rule changes that border to red for any image over which you've placed the mouse cursor.

An alternative approach which uses attribute selectors is this: 

IMG[border="0"] {border: 2px solid blue !important;}

However, this will select any image with a border of 0, whether or not it's part of a link. This can be a little confusing if you're using the border to tell you where you can click, but fun if you just want to sprinkle borders around a page.

Reducing Images

You could also take the step of changing the size of every image you encounter on the Web. All that's required is to change the height and width of the images on a page, like this: 

IMG {height: 40px !important; width: 40px !important;}

This will make every image on a page 40 pixels tall and wide. An interesting side effect of this rule is that single-pixel GIFs will become 40-pixel GIFs, which will wreck a whole lot of page designs out there. Woohoo! If you want to be able to see images at normal size, then use this trick, which Andrew Wooldridge detailed in his article: 

IMG:hover {height: 100% !important; width: 100% !important;}

Now, all you have to do to make images "normal size" is move the mouse pointer over them. Move the pointer away, and they shrink back to 1/100th size.

Just the Opening Salvo

Ah, the dark side. It's so much fun, and even better, you don't have to stop here. The tricks I've discussed today are the barest beginning of what can be done to Web pages. All that's missing is a subversive outlook and some CSS experimentation. So let me know what you come up with, and I'll add it to the list of CSS terrorist recipes. Deconstruction was never so fun!