Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Where to start with CSS?

Where to start with CSS?
Thread Tools
PabloTX
Forum Regular
Join Date: Feb 2003
Status: Offline
Reply With Quote
Nov 7, 2003, 11:44 PM
 
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
Grizzled Veteran
Join Date: Jun 2001
Status: Offline
Reply With Quote
Nov 8, 2003, 02:44 AM
 
Might want to mess around with CSSEdit...it makes it really easy to set up CSS.
     
Thor
Forum Regular
Join Date: Apr 2001
Status: Offline
Reply With Quote
Nov 8, 2003, 08:32 AM
 
     
Millennium
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Nov 8, 2003, 09:24 AM
 
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!
     
nica
Dedicated MacNNer
Join Date: Aug 2002
Location: Chicago
Status: Offline
Reply With Quote
Nov 11, 2003, 11:04 AM
 
You must read w3Schools CSS section they have some demos you can tweak.
     
Love Calm Quiet
Mac Elite
Join Date: Mar 2001
Location: CO
Status: Offline
Reply With Quote
Nov 11, 2003, 09:53 PM
 
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"
     
york28
Senior User
Join Date: Mar 2002
Location: Chicago, IL
Status: Offline
Reply With Quote
Nov 14, 2003, 11:32 AM
 
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
     
PabloTX  (op)
Forum Regular
Join Date: Feb 2003
Status: Offline
Reply With Quote
Nov 16, 2003, 12:34 PM
 
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
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Nov 17, 2003, 07:13 AM
 
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!
     
RGB
Mac Elite
Join Date: Jan 2002
Location: College in the Land of Oz
Status: Offline
Reply With Quote
Nov 18, 2003, 01:52 AM
 
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
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Nov 18, 2003, 09:28 AM
 
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!
     
Scarpa
Dedicated MacNNer
Join Date: Aug 2002
Status: Offline
Reply With Quote
Nov 18, 2003, 03:50 PM
 
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
Mac Elite
Join Date: Jan 2002
Location: College in the Land of Oz
Status: Offline
Reply With Quote
Nov 19, 2003, 01:56 AM
 
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
Grizzled Veteran
Join Date: Jun 2001
Status: Offline
Reply With Quote
Nov 19, 2003, 08:53 AM
 
That's really slick! I like that
     
Mooga2
Forum Regular
Join Date: Jun 2003
Location: San Francisco
Status: Offline
Reply With Quote
Nov 22, 2003, 10:22 PM
 
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!
"He only has one look... it's like I've been taking crazy pills!"
...
     
selowitch
Mac Elite
Join Date: Nov 2003
Location: Rockville, MD
Status: Offline
Reply With Quote
Nov 30, 2003, 12:46 AM
 
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.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 03:27 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,