CSS Garden markup help

[andyjamesnelson]

Hey I'm trying to do a CSS mock up of the CSS Garden XHTML but there are something I don't understand about...

1, why are there so many <span> tags in the markup? I don't really understand the purpose of these tags?

2, why don't the <p> introduce a line break between themselves?

One ends up with blocks of text like this:

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.
Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

I thought that in HTML <p> introduce line breaks between themselves? Is there a way to deal with this in CSS or do I need to use the <br/> tag in the markup itself?

Sorry if these questions are dumb. Thanks, Andy

 

[angelwatt]

Those are perfectly reasonable questions for someone new to CSS.

1, why are there so many <span> tags in the markup? I don't really understand the purpose of these tags?

The span tags are simply to add verbose CSS capabilities. Generally code should be written in a semantic way. CSS Garden has extra tags simply to help expand the possibilities of what people can make that page look like. Think of it as a proof-of-concept page for CSS.

2, why don't the <p> introduce a line break between themselves?

By default a p tag is a block element, which means it has a line break before and after it. CSS can modify this (display: inline or block) so that those line breaks are ignored. There can be various reasons a designer may want to change thi behavior.

If you have further questions or need some more clarity on this just let us know.

 

[andyjamesnelson]

Hey thanks for the response. I will read the link you sent me as well.

I just still don't get why there are no line breaks after each paragraph?

I haven't set the display: to be inline (also I have tried setting it to block and thats not helping).

I opened a new html doc in dreamweaver and if I write a basic html structure with a couple of <p>'s then there is line breaks.

There must be something in the markup I guess. I just have no idea what.

Andy

 

[andyjamesnelson]

Yes I read the link you sent... its pretty good. I understand that I should read / write html in the semantic sense.

I also understand that the <span> and <div> tag has no semantic value unless one gives it.

I still am unsure of the function of the <span> tag. Is it just a different form of the <div> tag?

Andy

 

[angelwatt]

I still am unsure of the function of the <span> tag. Is it just a different form of the <div> tag?

The only real difference between div and span is that a div is a block element and span is a inline element, which is why divs are generally used as containers for different parts of the layout and spans are used to just capture a piece of text.

I just still don't get why there are no line breaks after each paragraph?

I haven't set the display: to be inline (also I have tried setting it to block and thats not helping).

I looked at the home page for the CSS Zen Garden and saw the text you were talking about in your first post, but with the default theme the paragraphs weren't being shown as inline so I can't tell you exactly what's going on. I can take a guess though.

The 'C' in CSS stands for cascading, which means rules can overwrite other rules. If you have:

p {
 color: red;
}
p.p1 {
 color: blue;
}

Most paragraphs will have red text, but if the paragraph has a class of "p1" it will then have blue text. This is because the second CSS selector is more specific so it overwrites the first color declaration. So on whichever themed CSS Garden page you're looking at there may be multiple CSS selectors that are being applied to those paragraphs that are more specific than what you're writing. Hopefully that makes sense.

 

[andyjamesnelson]

Yeah that all makes sense. I guess thats what must be happening.

Thanks again for your help. Must useful.

I get the <span> tag now as well. Cheers. Andy