[PabloTX]

I really haven't done to much work with HTML development (about 5 years since college, and then it was just a basic page).

I've got Dreamweaver MX, and am getting my feet wet again with a small personal site with the upcoming birth of my first son as the main focus.

I've done quite a bit of reading to get up to snuff again on the basics, but I'm really in the dark as far as CSS goes. I realize it's not essential, but that there are nice advantages.

So does anyone have any suggestions on where (online or other) to get some insights, but not over my head?

[macgyvr64]

Might want to mess around with CSSEdit...it makes it really easy to set up CSS.

[Thor]

Webmonkey I

Webmonkey II

[Millennium]

If, on the other hand, you're looking for what part of CSS to learn first, the place to start is without a doubt the selectors.

Far too many people know only three selectors: tag, id, and class. These are good, of course, and a necessary part of things, but they barely scratch the surface of what CSS can do, and their misuse (especially for the class selector) will bloat your HTML almost as much as FONT tags would.

It's like chess. The first step to getting good at chess is being intimately familiar with how each piece moves, and what you can do with those moves. The first step to getting good at CSS is being intimately familiar with how the selectors work, and what you can do with them.

Sadly, selectors may be the place where IE/Windows is most deficient. It's a rather interesting paradox, because the updated Tasman engine from MSN/OSX actually supports more selectors than anyone else; even Gecko doesn't come close. But, thanks to Microsoft's idiotic insistence on forcing people subscribe to MSN just to use the browser, nobody knows this, because nobody can test on it. I can't test on it either. It's why I wish they'd release one last update of IE with the new Tasman; I'd switch to that in a heartbeat, because the engine is just that good.

I suspect that they've halted development on IE so that they can port Tasman to Windows for Longhorn, after which they will promptly abandon their Mac development effort.

[nica]

You must read w3Schools CSS section they have some demos you can tweak.

[Love Calm Quiet]

Eric Meyer is The Man on CSS. His web site is certainly great, but his Cascading Style Sheets 2.0: Programmer's Reference is the handiest thing to have on the physical desk top.

His "Eric Meyer on CSS" is also a really worthwhile investment - a beautifully conceptualized introduction on how to achieve a variety of effects with CSS (and workarounds for ther *&^%$ browser incompatibilities). Great design examples to follow along with and adapt the principles of to your own work.

Eric's site:
http://www.meyerweb.com/eric/css/edge/index.html

[york28]

Isn't the new Tasman engine the one in MSN for Mac? I've heard that it's incredible in a few particular places, but that Mozilla still does a better job overall.

As far as being on topic, in my sig there is a link to a MacNN web faq project that has bone too long without attention, but there is still some good stuff in there. In particluar, there is a link to a CSS tutorial at WestCiv which is great. It explains everything.

[PabloTX]

Thanks for the suggestions. All great resources.

I got about halfway through the webmonkey tutorial when I decided to go a completely different direction and use postNuke (with a few added modules).

Thanks again. Definitely good bookmarks.

[Millennium]

Originally posted by york28:
Isn't the new Tasman engine the one in MSN for Mac? I've heard that it's incredible in a few particular places, but that Mozilla still does a better job overall.

Yep. Tasman started life in IE/Mac, and has continued on in MSN/Mac. I suspect it will be dropped entirely on the Mac when Longhorn comes out, but that a port of it will live on that platform.

While its support for some things is still a bit off, nothing beats its support for selectors, where it is supreme ruler and ultimate dictator. I mean, it actually supports nth-child and nth-of-type.

[RGB]

Okay, so I'm using more CSS in every site I do. Now I'm wondering:

Is it appropriate to use CSS to do rollovers, instead of javascript? For example, there'd be text in a div, and the background image of the div would change on hover? And aside from appropriateness, would this work the same in all major browsers?

[Millennium]

Originally posted by RGB:
Is it appropriate to use CSS to do rollovers, instead of javascript? For example, there'd be text in a div, and the background image of the div would change on hover? And aside from appropriateness, would this work the same in all major browsers?

This won't work quite right on all browsers if you use DIVs, because IE/Windows' substandard CSS support can't deal with :hover on anything other than links. The same was true with Opera 6; I don't know enough about 7 to comment.

However, if all you were going to use the DIV for was to contain an A, then just use the A, put a class on it, and set the display property on that class to "block". The result should work like a DIV, which is really nothing more than a generic element with display:block on it anyway.

[Scarpa]

Originally posted by RGB:
For example, there'd be text in a div, and the background image of the div would change on hover?

I've seen that technique, but instead of changing the image, a single image with multiple "states" is loaded and you change the offset of the background image to show the appropriate state. It works pretty well, without any flicker or lag.

Here's a link to the article I saw: http://www.simplebits.com/archives/2...rollovers.html

Which was in turn found from Inknoise:
http://www.inknoise.com/experimental/rolloverer.php

[RGB]

Originally posted by Scarpa:
I've seen that technique, but instead of changing the image, a single image with multiple "states" is loaded and you change the offset of the background image to show the appropriate state. It works pretty well, without any flicker or lag.

Here's a link to the article I saw: http://www.simplebits.com/archives/2...rollovers.html

Which was in turn found from Inknoise:
http://www.inknoise.com/experimental/rolloverer.php

Very good technique, much better than my original thought of changing a table cell's background color. And much cleaner than using Javascript. Thanks!

[macgyvr64]

That's really slick! I like that

[Mooga2]

Here are another few CSS resources that are full of helpful tips and examples:

http://www.alistapart.org
http://www.csszengarden.com
http://www.zeldman.com

Zeldman is the man.
Hope these can help you!

- Moo!

[selowitch]

I agree; Zeldman is tremendous. His book, <i>Designing with Web Standards</i>, is a real eye-opener.

Also, consider Molly Holtzschlag's book, <i>Cascading Style Sheets: The Designer's Edge</i> for a very lucid and easy introduction to some good CSS concepts.