Filed under CSS, HTML

Separation in the blink of an eye

I’ve seen them so many times: pages where the HTML is mighty fine (!) but the CSS looks like it’s taken straight from Dreamweaver. While I hate having to deal with those kinds of designs there is something good about them. They prove the point that HTML and CSS are two separate units, and that it’s possible to mess up one of them and do fine on the other. That’s after all the point of CSS…

Now. A much more unusual combination is good CSS together with bad HTML. So I put together a little example for you. Separation illustrated (only works in Firefox, I’m lazy). I’ve made all lines about 80 characters long and removed all other whitespace. Enjoy!

How’s that for a company website?

Emil Stenström
23 Jan, 2007, CSS, HTML

Feel free to leave a comment, or subscribe to my feed.

List some related articles:

You might want to browse all articles.

linkback

These people have linked to this article:

No linkbacks yet

To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:

<a href="http://friendlybit.com/css/separation-in-the-blink-of-an-eye/">Separation in the blink of an eye</a>

You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.

add comment

This is the place where you get to say your opinion about this article, use it well. Formating with HTML is allowed. A red asterisk means that the following field is required.

Jesse Skinner 23 Jan

Haha, every tag is a blink tag. Thats fantastic!

I’m inspired to produce HTML like that for now on. Maybe we can even put together a new DOCTYPE.. HTML-BLINK 1.0.

Emil Stenström 23 Jan

@Jesse: You go! :)

To everyone: Seems the sk2_comment_spam table suddenly exploded, sorry if you weren’t able to comment, everything should be fine now.

Robert Nyman 23 Jan

Nice! :-)

Jrf 24 Jan

All I can say is… ROFL

Devon 24 Jan

LOL!! OH MY! That’s classic. I’ve seen some horrid code before, but I never ever imagined anything like this. As soon as I saw the code, I just sat there with a blank stare and my jaw hanging open and blinked a few times as I tried to get a grip on reality again. You just created a work of art.

Emil Stenström 24 Jan

Thanks everyone! You know you don’t have to tell me everything I do is art, just to be my friend… ;)

Alan 25 Jan

Nice one Emil, brightened up my day…

Innocent 29 Jan

i wish i could learn CSS. i have tried and given everything i can but somehow i lose it. i need help.

Emil Stenström 30 Jan

@Innocent: Have you looked at my beginners tutorial?

Blather 10 Mar

What exactly does “CSS looks like it’s taken straight from Dreamweaver” look like? CSS is CSS. I’m not sure how you could tell it apart. DW doesn’t add anything to hand-coded CSS.

Emil Stenström 11 Mar

@Blather: Dreamweaver does not do smart CSS. It generates classes and absolute position them all until they are exactly where you’ve said they should be. That obviously does not work.