CSS 101: Every element tag already has CSS applied

I gave a talk regarding CSS usage and typically one of the first things I cover is that all HTML tags by default are given default CSS tags by the browser - with the exception of some old (magic/shit) tags like BLINK and the timeless MARQUEE tag.

It is surprising how many people do not know this, the browser may also do some other unexpected things by default, for example it may create tags without you knowing about it to satisfy its parser. I know this because I've had to debug the Firefox parser before, which is no easy thing. Some examples of these auto-creating tags are HTML, HEAD, BODY, TBODY etc...

Out of nothing

It's surprising to think that you can navigate to about:blank open up the developer tools and start applying styling rules to HTML, HEAD & BODY even though they were never defined. Combine this with ::before and ::after pseudo elements and now you have nine elements you can style without ever writing any HTML code yourself.

Interesting but not practical, right? Because you need HTML to declare the reference to the stylesheet with a LINK tag, right? RIGHT?.... Wrong... If you have some control over your HTTP headers you can add a LINK header which can reference the stylesheet.

So now you know how to create a web page without writing HTML, but you'll only have access to upto nine elements, pretty useless right?

The default styles

The default stylesheets are a little long and typically contain browser specific instructions, but you can view the raw CSS here for FireFox and WebKit... there's a site with a nice UI for IE.

 

Post Reply