Advertisement
Advertisement
-
I started actually with looking at the CSS Dreamweaver created, then spent a lot of time with the Erik Meyer web site and books.
CSS/Edge is at www.meyerweb.com/eric/css/edge/
The books are Erik Meyer on CSS and More Erik Meyer on CSS.
The books will teach you a much more standard and succinct way to do CSS.
Also, check out CSS Zen Garden, www.csszengarden.com/. All of the CSS is available to download and look at.
-
This should get you started:
www.cssbasics.com/
home.tampabay.rr.com/bmerkey...heet.htm
css.maxdesign.com.au/index.htm
-
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.
-
Just came across a site that puts together lots of llinks on CSS and the various topics surrounding it: veerle.duoh.com/index.php/blog/links/
-
-
Wow, veerle's blog there is killer. I'll have to start digging through it to see if it actually covers all the good resources out there, and if it includes the crappy ones too for good measure.
I've found that the single most useful tool I have in actual CSS design (other than the beloved interweb itself) is Firefox's <a href="web" title="addons.mozilla.org/firefox/60/">web">addons.mozilla.org/firefox/60/">web developer toolbar</a> [mozilla.org] that lets you modify CSS on the fly. Granted, you have to keep in mind the various browser incompatibility issues -- don't design anything in there that's too reliant on the padding property, because then when you leave your Firefox haven with a lovely page, it will all break in IE. -
-
"Granted, you have to keep in mind the various browser incompatibility issues -- don't design anything in there that's too reliant on the padding property, because then when you leave your Firefox haven with a lovely page, it will all break in IE."
If you use XHTML Strict instead of Transitional as your doctype IE 6 will interpet padding properply
(ie. [total boxwidth = width + padding + border], as opposed [total boxwidth = (width - padding) + padding + border])
-
-