css defaults

html has no style

Probably the most important key element that prevents a better understanding of the separation of style and content concept is css defaults. While these defaults are extremely useful and make our everyday job a lot more enjoyable, they eclipse a small yet important part of our job that leads to a lot of confusion for people not aware of these defaults actually kicking in.

We all know that html is not meant for styling, yet there is a big different between the behavior of a standard div, span or p element in a browser. A div will behave like a block element while a span will behave like an inline element. And a p looks a lot like a div but comes with stardard margins. So even though you might be writing simple html and haven't even started your first line of css, a minimum of styling is already applied to your html document.

Most people go on to assume that this basic styling comes from the html elements themselves. This might sound plausible at first but goes right against our base axiom that demands separation of style and content. Even then you could argue that front-end developers usually prefer breaking rules rather than following them, but in this particular case things are a little different.

css defaults

What happens is that each browser has its own default css file it applies to a html document. These default css files might map quite well between browsers but you cannot assume that each browser will render the same default styling. Hence part of the reason why most people prefer to use some kind of reset css, leveling the standard styling between all (or most) browsers.

If you check Firebug (or most other similar tools) you can see traces of these default css declarations. Just highlight a simple div and see how the browser css applies a display:block style. If you want to be a true adventurer you can even go and change these css files, though there's quite little to be gained there. This should also explain why brand new tags (html5) don't come with standard styling in a browser (if you were wondering about that).

conquer your fears

Some people seem a little scared to start tinkering with these css defaults, especially when it concerns the display property. But even the most basic css rules often changes common css defaults. Simply adapting the color of a link means overwriting the default browser css. Overwriting a display property isn't any different from that and shouldn't be considered a hack at all (which some people seem to suggest).

You might remember the little table-row/table-css hype from a little while ago. Use divs to create your own table layout. This never really took off (for various reasons, but mainly because tables have very limited positioning potential) but the essence of this little trick is still quite important. You might be using simple divs, but you're creating a table layout in css. The perfect example that styling and layout is not inherently connected to html.

You can also go the other way around. Working on some crappy project with table-layouts? Simply set the table, tbody, thead, tfoot, tr and td tags to display:block and they will behave like normal block elements. You can start floating tr elements to turn them into columns, or you can use absolute positioning to allow for more flexibility in your layout changes. And once again, remember this is not a hack, just plain and normal use of css as it was intended.

conclusion

While css defaults are a useful necessity guaranteeing the separation of content and style, you should not be afraid to change them around to better match the layout you need to create. It all starts by realizing that the basic browser styling is just some simple default css hidden away in a separate file. If you get to that point, overwriting it is just the next logical step.