|
|
Where to start with CSS?
|
|
|
|
Forum Regular
Join Date: Feb 2003
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Jun 2001
Status:
Offline
|
|
Might want to mess around with CSSEdit...it makes it really easy to set up CSS.
|
|
|
|
|
|
|
|
|
Forum Regular
Join Date: Apr 2001
Status:
Offline
|
|
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
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.
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Aug 2002
Location: Chicago
Status:
Offline
|
|
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2001
Location: CO
Status:
Offline
|
|
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
|
TOMBSTONE: "He's trashed his last preferences"
|
|
|
|
|
|
|
|
Senior User
Join Date: Mar 2002
Location: Chicago, IL
Status:
Offline
|
|
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.
|
We need less Democrats and Republicans, and more people that think for themselves.
infinite expanse
|
|
|
|
|
|
|
|
Forum Regular
Join Date: Feb 2003
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
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.
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Jan 2002
Location: College in the Land of Oz
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
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.
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Aug 2002
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Jan 2002
Location: College in the Land of Oz
Status:
Offline
|
|
Very good technique, much better than my original thought of changing a table cell's background color. And much cleaner than using Javascript. Thanks!
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Jun 2001
Status:
Offline
|
|
That's really slick! I like that
|
|
|
|
|
|
|
|
|
Forum Regular
Join Date: Jun 2003
Location: San Francisco
Status:
Offline
|
|
|
"He only has one look... it's like I've been taking crazy pills!"
...
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2003
Location: Rockville, MD
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|