The CSS Anarchist's Cookbook

I tried to resist. Honest. Standards are good things, and they should be used for the 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:

• Subvert FONT formatting
• Eliminate FONT tags completely
• Crack tables apart
• Blank out tables entirely
• Knock table cells out of alignment
• Eliminate ad banners
• Reduce images to almost nothing
• Highlight active images, or get rid of non-active ones

...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; }

Since FONT is deprecated, why not wipe out any use of it? (Click for full-size view)

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 temperaments 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 exactly as they want them. 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 !important;}

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?