Advanced CSS syntax or omission??? Need clarification.

I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document.

In the stylesheet, the p element is specified but then in the html code, this type of code is used:

<p class="p1">

<p class="p2">

<p class="p3">

For each new paragraph the class p is incremented by 1.
However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet.

Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission?
Can anybody explain to me how this affects those paragraphs?

you should note that the markup at csszengraden have lots of extra classes, empty elements, so when making a layout for csszengarden you shouldn't be limited by the markup.
as you only can alter the css not the markup when submitting a layout for csszengarden.

and there is nothing wrong in declaring a class and not using it,
though if you have lots of that it might be come a bit untidy.

and instead of having a dozen classes like p1, p2 one could have used Adjacent sibling selectors but ofcourse that isn't supported in some browsers (read msie)

Thanks for your answer AKH, but it still leaves me with some questions.



As I see it it is just the other way around. In the mentioned document, some of the classes that are used, are not specified in any stylesheet.



I probably haven't understood the concept of Adjecent Sibling Selectors correctly, but in the several documents about A.S.S. I didn't find any mention of using a class p1, p2, p3 etc. if they are not specified somewhere.

All info on A.S.S. that I found, assumes that the classes that are actually used, are specified explicitly in a style sheet.

Either way around doesn't really make any difference to the end page. You could put as many classes on a tag as you like and it won't make any difference to anything but the bandwidth of your site if they aren't defined in the stylesheet.

Similarly, you can define as many classes in the stylesheet as you wish and not use them in the tags. Again, it won't make any difference to the finished page other than bandwidth usage.

Is it good practise? Depends on what you need to achieve with your site. Bear in mind that the stylesheet is not the only thing to use classes, they can be useful in javascript as well as automated server scripts for checking pages for various properties.

With the A S S, you do have to specify it in the stylesheet (well in the style information at some point), but I think you may have misinterpreted the point he was making.

what i ment was that they have added the extra classes in the markup,
so that you have a option to style them if you want, you shouldn't be limited by the html.
and you don't have to assign style even if there is a class there.
as i said when making a layout for csszengarden you can only alter the css,
not the markup.

normally you wouldn't add all those classes to your own markup,
as you usually have the same style on every paragraph, maybe just add classes to the exeptions.


as for Adjecent Sibling Selectors you can use them instead of placing
classes on each element,

like
p { /*some style */ }
p + p {/* a paragraph that comes after a paragraph has this style */ }


you can take a look at this example using a combination of Child selectors and Adjacent sibling selectors, to make a chessboard styled table ( works in mozilla, opera, konqueror )
http://test.9ls.org/css-examples/chess.html

Aha, now I understand. It seems I did indeed (as Glide suggested) misinterpret your first reply.

So the extra classes are just present in the html to offer the designers more flexibility.

Thanks fo clarifying