Undo Default HTML Styles

Posted
September 15 2004

The past few months I've been working on many, many style sheets, approaching them more and more modular. More often than not, I would start by making (or re-using) a module in which I reset/undo a lot of the styles many modern visual browsers apply to an (x)HTML document by default.

Inspired by recent discussion on this very matter by Tantek Çelik and Eric Meyer, I decided to dissect my latest undo.css right here.


undo.css

* {
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	margin: 0;
	list-style: none;
	padding: 0;
	text-decoration: none;
}

What does it do?

WinIE does not fully respect all these rules, sadly.

Next up: default.css.

ACJ

Comments

9 comments so far.

1/9

Specifically, which rules does Win/IE not respect? Thanks.

Posted by: Andy Mason on September 16, 2004, at 00:21

2/9

In Internet Explorer 6, the rules with inherit are not respected. This means the color, and various fontvalues are preserved.

You could force IE (and other browsers) to remove the default font styles by the following rules:

* {
font-size: 1em;
font-style: normal;
font-weight: normal
}

…but that's asking for trouble, really. Especially when it comes to nested elements; working around this would bloat the code like crazy (<em><strong>foo</strong></em>, for example would be rendered bold, but not italic, without extra rules).

By the way, in the next Style Sheet module that I will describe here (default.css) I will address some nice solutions I've come up with.

Posted by: ACJ on September 16, 2004, at 00:42

3/9

I tried to do this once, but I just give everything the correct value. Maybe I should save a couple of kilobytes and do it too. Tantek didn't even emphasise that, though it is a nice side-effect.

Posted by: Rob Mientjes on September 16, 2004, at 07:34

4/9

Hello, this idea seems to run quite well. But i had a bug in Safari, the body background wasn

Posted by: Gatan on January 12, 2005, at 10:59

5/9

Very interresting ! Have you done a default.css ?

Posted by: Encausse Jean-Philippe on July 28, 2005, at 09:44

6/9

Actually, I

Posted by: ACJ on July 29, 2005, at 00:56

7/9

One thing to note, transparent background doesn't always give a white b/g to everything. Some users have the b/g's set to another colour so assuming you are giving everyone white could leave you with coloured gaps in your page.

Posted by: Steven on September 30, 2005, at 23:38

8/9

In the roughly one and a half years I have used this method, I ran into several minor problems, which are fixed in this updated code:

* {
    background-color: transparent;
    border: none;
    color: inherit;
    font: inherit;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
    text-indent: 0;
}
Note:
This is efficient, standards complient css. Browser specific hackery is intentionally left out.

Posted by: ACJ on January 2, 2006, at 07:24

9/9

so, did you ever create your post about default.css?

Posted by: gadfly on April 19, 2006, at 14:59

Comment

Identify
Remember Me?
Note
Markup allowed. Linebreaks and paragraphs are automatically converted. Email and ip addresses are logged but never shared with third parties. Comments are not moderated on opinion or use of language, but on relevance. I hate spam with a passion.