Learning CSS

**Visionray** · 07-13-2006, 02:28 AM

Well it's time for me to start applying for new jobs. I've been at the same job for awhile now and my web skills are very rusty. Most jobs that I'm looking at are calling for proficiency in CSS and I really don't have a clue. Does anyone know of any good books or online resources for CSS? I'm sure I can find some but was just curious to get other opinions on what are the best. Thanks.

**Genesis F5** · 07-13-2006, 02:37 AM

www.w3schools.com. Great place to start. CSS is EXTREMELY easy, but implementation for many is not so. It's easy to get carried away in a hurry.

Visit CSS zen garden for some inspiration.

Basics:

Direct object manipulation (like font / text areas), IDs, and Classes.
Everything (except brackets) needs to end with a semicolon (think C/C++). CSS isn't as forgiving as JS. Without the proper closing semicolon, anything after that won't be parsed correctly. If you ever have a design disaster, start by checking for missing semicolons.
Every style needs to be enclosed in brackets (ie: font{font-size:10pt;})
Like JS, you can (and most commonly) store data in external CSS files to create libraries of sorts. You can give it parse it in the HTML file with "style" header/footers (<style></style>) and you can also apply styles directly with " <font style="font{font-size:10pt;}"></font> "

***gerbick*** · 07-13-2006, 03:00 AM

http://www.alistapart.com
http://www.stylegala.com
http://www.zeldman.com

I'm using those to learn CSS among other things right now my damn self right now.

hurry up VR, get a job, become the manager, hire me.

**argonauta** · 07-13-2006, 03:04 AM

i think the basics of css is as easy to understand as the logic of xml. You can learn in 10 minutes. Then, it's just messing around, learning what properties each tag has, etc....the worst comes when you see the results in both firefox and IE and everything looks different. I guess that's hardly covered in books, better covered in blogs about css (start with a list apart). There's a lot of information about css in blogs, much more than any book I can think of about the same topic.

anyway: http://zenetide.com/sabrosus/tag/css there you have my personal bookmarks for css

**Visionray** · 07-13-2006, 03:07 AM

awesome thanks guys, this is a great start.

Yeah Gerbick I just lost my contract after 5 years. Apparently the DOD doesn't have any money to continue funding...ha! Do you have yahoo chat? If so PM me your name I have a question for you. I don't have msn anymore.

**Visionray** · 07-13-2006, 03:11 AM

I really am out of the loop when it comes to web design nowadays. I had an interview yesterday and the guy asked me what kind of wireframing experience I had. I was totally dumbfounded and couldn't even BS my way through it.

**Genesis F5** · 07-13-2006, 03:14 AM

Originally Posted by argonauta

The worst comes when you see the results in both firefox and IE and everything looks different.

Bingo. That's an important point Argonauta brings up. I like to load them up locally and check in on them every now and then just to make sure everything's peachy. It sure beats having to backtrack.

CSS is a lot of fun just because of the control you have. I just recently had a project where I had to put the scrollbar on the left side of the screen, but still maintain a left-to-right orientation. That was something fun to learn (direction:rtl; or direction:ltr;)

Don't put too much emphasis on actually learning all of the properties right away. Just make yourself a handy reference sheet or something. You'll learn them eventually as you work with them more and more. Fortunately, they all basically make use of common properties (color / orientation / placement / scale.)

***gerbick*** · 07-13-2006, 03:25 AM

Originally Posted by Visionray

Yeah Gerbick I just lost my contract after 5 years. Apparently the DOD doesn't have any money to continue funding...ha! Do you have yahoo chat? If so PM me your name I have a question for you. I don't have msn anymore.

pm sent.

lol... 5 years seems to be the magic number... I lasted for 5 years basically - '99 to '04.

Seriously... finding new contracts that aren't going to be out of funding shortly has been a problem lately for me too.

**Genesis F5** · 07-13-2006, 03:31 AM

Originally Posted by Visionray

I had an interview yesterday and the guy asked me what kind of wireframing experience I had.

I had to look that one up too: link At least, now we know.

**catbert303** · 07-13-2006, 05:27 AM

Some of the documents in the specifications can be really helpful (there are lots of little examples dotted throughout) - if you can't remember what value a property could have you'll find it fastest here.

http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS21/

Some other places that might be useful...

http://css-discuss.incutio.com/
http://www.positioniseverything.net/
http://css.maxdesign.com.au/listamatic/

There are a bunch of useful tools for working with CSS - most browsers have a developer toolbar available e.g. http://chrispederick.com/work/webdeveloper/ I also wrote my own tool to help debugging CSS layouts (should work in Opera 8+ and Firefox with the Greasemonkey extension)

Also - not really useful for learning CSS, but quite interesting anyway

- there is some good stuff about the evolution of CSS here - http://people.opera.com/howcome/2006/phd/

**jasonsplace** · 07-13-2006, 09:23 AM

I agree with www.w3schools.com. I visit there on nearly a daily basis. Also, the book "Eric Meyer on CSS" is very good.

To help with cross browser compatibility, check out CSSVista. It's a free program and for anyone who has ever used the Edit CSS feature in Firefox it's a lifesaver. It allows you to edit a pages CSS and have a live preview in IE and FF at the same time. It doesn't let you save your CSS but at least you can tweak and test easily and then copy and paste.

**SpockBert** · 07-13-2006, 10:12 AM

Agree with the other posts in here, its simple to learn (I've also heavily relied on that excellent w3schools site) but then tweaking it and learning workarounds so it looks the same FF and IE is a huge pain, something that still bugs me now.

You'll code your page, make it neat, congratulate yourself on getting away from nasty tables then just as a formality you'll check the page in IE.........

...then your stomach will churn as you realise it treats borders, padding, margin, alignment and just about everything different and your once fine looking page will look like a dog's breakfast!

**JWin** · 07-13-2006, 10:20 AM

Originally Posted by SpockBert

...then your stomach will churn as you realise it treats borders, padding, margin, alignment and just about everything different and your once fine looking page will look like a dog's breakfast!

It's not that bad, I usually get away with just a couple margin hacks. Actually my biggest headache recently was IE's wonderful 1 pixel rounding issue when centering things, which as of IE7 beta 2 was still not fixed.

**Ask The Geezer** · 07-13-2006, 11:20 AM

I find books easier to learn from. I recently bought these two;

101 Essential Tips, Tricks and Hacks, published by Sitepoint. And Designing Without Tables Using CSS, also by Sitepoint.

Very handy for reference. But, as CSS is changing so fast, any book is going to be out of date fast too.

**jasonsplace** · 07-13-2006, 11:22 AM

Originally Posted by Ask The Geezer

But, as CSS is changing so fast, any book is going to be out of date fast too.

It isn't changing all that much. CSS 3 is going to be cool but it can only change as fast as the browsers that support it and I don't see IE supporting the changes anytime soon.

**random25** · 07-13-2006, 11:23 AM

Originally Posted by Genesis F5

I had to look that one up too: link At least, now we know.

Wireframing...
Oooh...
I've never heard it called that,
Now i have a fancy new term to spring on people.

**Genesis F5** · 07-13-2006, 11:26 AM

Yeah, I'd call something like that a "working mockup." Good to know the technical jargon, though. Initially, I thought wireframing would be similar to a flow chart, which it is, I suppose. Just, there's actual pages involved, but it's the same principle.

**Ask The Geezer** · 07-13-2006, 11:34 AM

Yeah, I'd call something like that a "working mockup."

I still call it storyboarding.

**admedia** · 07-13-2006, 12:04 PM

If I was asked if I had any wireframing experience, I would probably answer... "no, 3-D rendering isn't really one of my strong points."

**Genesis F5** · 07-13-2006, 12:29 PM

I don't know, ATG. Whenever I think of a storyboard, I think of the project as a whole, fleshed out on paper with a little more detail. There's contextual clues as well as graphical representation.

Hahaha, Admedia. This is another reason why words with multiple meanings aren't a good thing.

Thread: Learning CSS

Thread Tools

Display

Learning CSS

Posting Permissions