suggest a good way to learn CSS

topic posted Fri, June 2, 2006 - 11:35 AM by  aimee_danger
Share/Save/Bookmark
Advertisement
Would you suggest books or class? If books, which ones?
posted by:
aimee_danger
Portland
Advertisement
Advertisement
  • the first thing to learn is not "this is the way to make links that don't underline" and "this is the way to make the margin the right size". The first thing to learn is how to manage the sheets, and the classes, and how to avoid class tags as much as possible and add style mainly to non-unique HTML tags. This way, your site style takes care of itself and you aren't running around adding classes or spans to each block of text, just the way you would with font tags.

    I got a feel for that here:
    realworldstyle.com/environm...tyle.html

    I think I'm quoting when I say,
    "Set up the CSS code so that the behavior of things is always determined by what box it lives in--not by the class slipped into it's tag. Use descendant selectors and nest the selectors for specific behaviors to be applied to rare instances. In this way, you can change the behavior of a thing by moving it to a new box--with no need to change the class in it's tag."

    It's best to say "this is what a [p] tag will look like as default" and "this is the color of everything that happens in a left-hand-side box." So you could say "all the paragraphs in the Kanagaroo box will be helvetica because they inherit the sitewide style, and all the links in the Kangaroo box will be red because of this nested style assignment"
    ----
    p {font: 12pt sans-serif; }
    a {color: blue}
    #kangaroo a {color: red}
    ----

    I'm now re-hauling a site that *thinks* it's a CSS site. But actually it's got spans and classes slapped onto every paragraph, just as if it were using font tags. And I worked on another site where at first I didn't even recognize that it was CSS; Each page was built from boxes of fixed dimensions [they didn't expand to fit the text] and there was no central style sheet. Every page had the style statements in the head. They also used bitmapped text that was unreadable by the robots--even on the front page. It was actually a "layers" layout.

    Once you've got a feel for how to use CSS as a structure, then you can spy on the pages at csszengarden.com/ to learn various tricks of styling. Also, spy on the big nerds that are using it, like wired.com and powazek's home page.

    The books I bought helped a little. But mostly they told me about all the exciting stuff in the CSS 3 Standard, meanwhile Internet Explorer 6 isn't even supporting 24-bit transparent PNG files. They would tell me how to build a page from the ground upward, but no mention of how to make the margins the same in Explorer and other browsers.

Recent topics in "CSS is not a disease!"