Topic: Writing Good CSS

Have any of you come across a good synopsis of the rules of a stylesheet? I've been sort of combing the W3 but there is just too much to wade through there. What I am looking for is an article that explains what order elements should be defined in a stylesheet, the order to specify attributes under an element, etc. etc.

I've looked around have found bits and pieces in different places but I haven't found one place that really explains all of it.

:::11oh1:::

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

forgive if I'm misunderstanding your question but if I've interpreted it right maybe these will help

http://www.htmlhelp.com/reference/css/
http://www.htmlhelp.com/reference/css/structure.html
http://www.google.com/search?hl=en&lr=&ie=UTF-8&oe=UTF-8&q=style+sheets+%22th e+cascade%22&spell=1
http://www.w3schools.com/css/css_syntax.asp

Jason

[This message has been edited by Petskull (edited 10-10-2003).]

Well, for instance Slime pointed out to me in another thread that when you're specifying the background property by using shorthand it has to be in this format:

<'background-color'>

aaah, heh, good luck finding that info.

The only thing I've seen that it's actually an issue on is the order of
a:link, a:visited, a:active {}
and that's not a consistent problem. I generally don't worry about such things as they're generally of no consequence. But then I'm quite sloppy according to some folks' standards

Jason

quote:

---

generally don't worry about such things as they're generally of no consequence

---

quite often, these tpyes of issues can break a page, or skew your colors...

I've found them to be pretty significant actually.

I don't know of any one place to find a list of any sort though....

well dagummitt man, if they're that significant share your notes!

I'd read em.

Jason

krets: You can consult the CSS2 Specifications and download then as a PDF. I use ( not often enough ) the PDF version. It's a gold mine that provides many informations among with the shorthand you mentionned. Like any other official specs they are very dense ( 338 pages ), but the PDF is well done and is not that hard to use. At least you've got everything in a single structured file with hypelinks.

For those wondering where to find the shorthand version of say the font property, browse the chapter "15 Fonts" of the PDF few seconds/minutes and you'll find the sub-chapter "15.2.5 Shorthand font property: the ?font? property", and voilà. It's not always that easy, but if the information exists then it's in the specs.

Hope that helps,

Mathieu "POÏ" HENRI
[edit] providing a link to the specs online + a direct link to the PDF version [/edit]

[This message has been edited by poi (edited 10-10-2003).]

Be like me: memorize all of it. Release your inner nerd.

^exactly =)

JK - no notes....just make sure things like that are in order. Or, if things don't seem to be working the way they should, make sure that's what you check first....

Each element that allows for 'shorthand' has the order listed in the spec.

I suppose that's what's happened, I've learned what I've learned and took it for granted. Now that I actually go back and look at the background example krets posted (instead of answering flippantly like I've been doing a lot lately) I see yeah, order important. In fact on background I get lost after the url() bit normally and consult w3schools.

thanks for the pdf link there poi, that thing's a bit of a monster, hard to find stuff, but there it is =)

Jason

things to remember:

- border's / margins / padding / anything that can be applied to all four sides of an element:
~ these start at the top and work round clockwise (basic, so you probably know that one)

- with the rest:
~ just try it, if it doesn't work - you got it wrong, do it again.

alternatively:

if you use dreamweaver a lot of the time have a look at the order is puts things in when you apply them in one go - this order often works when you condense the code to shorthand.

if you use dreamweaver mx 2004 then you can set it as an option to always use shorthand where possible, it might by useful for you to cycle thru the css and create your own document of what goes where and when. If you don't have it you could get the 30 day demo and create the document for your future hand coding reference.

eventually you'll just remember the order (there is something logical about it but I can't say what, it just makes sense... eventually).

remember this also, good code isn't always the most condensed, it terms of readabilty for further and future development of a site then the long format is better in that sense. The more you combine classes' and ids' propeties and condence stuff up the more complicated and harder to change the code becomes, but it does look cool to others and make you feel elite. Choice is yours, and in different situations you'll choose differently - nothing wrong with that.

quote:

---

just try it, if it doesn't work - you got it wrong, do it again.

---

In a perfect world, maybe. Unfortunately, I've found that browsers can't be trusted to judge what is "wrong" and "right."

More than once, I've written something like "font-style: none;" only to have it work in 90% of browsers, and then realize it's supposed to be something like "font-style: normal;" when I run it through the validator.