On Friday 09 March 2007 16:04, Eur Ing Chris Green wrote:

How do you know which CSS properties apply to which selectors?

I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.

Welcome to the wonderful world of HTML and CSS. There are standards for the syntax of both, and standards for the behaviour. But there are no standards or defaults for CSS property values. Every browser implements its own defaults for properties, not to mention interpretation of (or, in some cases, complete disregard for) the semantics and behaviour of HTML/CSS.

To answer your question: you don't. All you can do is experiment.

Have fun.

Cheers, Richard

Eur Ing Chris Green cl@isbd.net wrote:

How do you know which CSS properties apply to which selectors?

I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.

There are three main ways IIRC:

1. the specs state which properties of which selectors get priority and what the defaults should be for most cases when it matters;

2. then there are some famous browser breakages (mostly IE, but there are a few others) to avoid;

3. and finally you can use temporary divs, borders, user stylesheets, CSS-altering javascripts and/or test copies of sites to debug strange results seen in a browser.

Personally I think we should throw the whole lot in the bin and start again! After playing with this for quite a while and having looked at lots of templates and stylesheets they're all a total mess of the worst sort of unstructured 'code' - it's the equivalent of the worst excesses of spaghetti code in Basic. I don't think it's the fault of the writers of the code, it's inherent in the way that HTML and CSS work. It's almost invitable that the template and stylesheet will become a horrible interwoven mess of classes, IDs and so on.

Unsurprisingly, I disagree. Classes and IDs need be no more interweaving between template and stylesheet than the tag names are interweaving. If they get too fiddly, the design probably needs a rethink.

xhtml and CSS is a fairly good solution for what they aim to do and there's plenty of good advice out there from standards bodies and associations. Now, if only we could kick the worst bugs out of the browsers and weed out the non-web designers muddying the waters, life would become far easier.

It's not that similar (actually, surprisingly different) to print page design or screen interface design and people who think they can waltz straight from one of those other fields into web design without learning new skills or heeding the good advice almost inevitably come a complete cropper. Sadly, many buyers seem to take a quick look at printed portfolio or single-browser-tweaked views and go for them, instead of looking at the work across a number of views, and I think that's why 93% of web sites are inaccessible crap, according to http://news.bbc.co.uk/1/hi/technology/6210068.stm

Rescuing such sites is part of my bread and butter, but it's a hard sell sometimes ("I've spent X and my site looks no different to me" "but it does to many other people and computers") which I think has to be built on trust. I've often spoken out against the effects of search engines (rewarding spam, distracting from good cataloguing), but they seem to reward sites for being well-designed and that's making selling good web design easier, as do all the studies showing how easy-to-use means attractive-to-buy-from.

Not to mention - why is it that the default spacing of HTML headings, lists, etc. is so awful? [...]

Because they're legacy. Mistakes of the past. Like why FAT hard disks are so awful.

Hope that helps,