Topic: Writing Good CSS Pages that link to <a href="https://ozoneasylum.com/backlink?for=11072" title="Pages that link to Topic: Writing Good CSS" rel="nofollow" >Topic: Writing Good CSS\

 
Author Thread
krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-09-2003 16:35 Edit Quote

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:::

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

IP logged posted posted 10-09-2003 16:51 Edit Quote

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.

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 10-09-2003 16:53 Edit Quote

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).]

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-09-2003 17:27 Edit Quote

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'>

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 10-09-2003 19:32 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-09-2003 19:48 Edit Quote
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....

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 10-09-2003 22:30 Edit Quote

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

I'd read em.

Jason

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-10-2003 00:22 Edit Quote

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).]

twItch^
Maniac (V) Mad Scientist

From: the west wing
Insane since: Aug 2000

IP logged posted posted 10-10-2003 09:48 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-10-2003 15:25 Edit Quote

^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.

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 10-10-2003 16:19 Edit Quote

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

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

IP logged posted posted 10-11-2003 22:57 Edit Quote

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.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 10-12-2003 06:48 Edit Quote
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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu