Thread: Practicing CSS via View Source

Lately, I've been looking at the CSS used by sites I like and playing around with them in Firebug. (such a cool tool)

I decided to get the code at CSS Zen Garden and play around with it. I'm still learning, so I don't know when something is right or wrong, but say, maybe 2% of the time. Anyway, I noticed the HTML had all these divs with spans inside them. Nothing else. Just divs like the following:

Code:

<div id="extraDiv1"><span></span>

That couldn't be right, could it?

Also, is there such a thing as having too many divs? And what's the order that divs are called by the browser? Is it right to left, top to bottom, zig zag??

Yes it is correct. There will be a style.css file that is loaded at the top of the page. It will look something like:

<link rel="stylesheet" href="style.css" TYPE="text/css">

In the style.css, you will find the bulk of the style properties.

Hope this helps,
Ron

Hey Ron...I don't understand your response, because that wasn't my question. Care to elaborate?

CSS Zen Garden is coded like that to give as many options to designers as possible. If you look at the stylesheets for different designs you'll find that the authors make use of some of the 'extra' divs or spans to get the effect they want (perhaps adding illuminated first letters as images or a fancy border).

Obviously this isn't a great way to code up your own site as it's very wasteful - as you're writing the CSS and HTML yourself, you can limit it just to the tags you need.

Also, is there such a thing as having too many divs? And what's the order that divs are called by the browser? Is it right to left, top to bottom, zig zag??

I don't think there are any problems with too many divs (other than excess file size of course), though it's possible some old version of IE would complain. HTML elements aren't called in any order: they're just there. Unlike, say, JavaScript or PHP, they aren't executed, so there's no need to specify which one comes first. I guess it's a bit like a still life of fruit: some of the grapes will be next to each other and the grapes will be inside the bowl, but there's no first grape.

Of course that doesn't stop us from doing things to the divs in some order. We may choose to iterate through them with JavaScript and access or modify them somehow. We could do that in any order, though the element relationships in JavaScript makes some orders (depth first, basically) much easier to do than others.