How Would You Recommend a Novice Get Started Using CSS?

Question

As web based designer who has designed web sites using tables but never with css, how can a novice get started with css?

---

Related SO posts

SO - Css Book & website for CSS

SO - Css blog

Answer 1

Get started by reading tutorial web site first. This way, he will see how to create simple CSS and see the benefits.

• http://www.w3schools.com/css/
• http://www.echoecho.com/css.htm
• http://www.csstutorial.net/
• http://www.w3.org/Style/Examples/011/firstcss
• http://www.westciv.com/style_master/academy/css_tutorial/

Than, I suggest since he knows how to design website to check other website source and see their CSS files. Zen Garden is a good start.

If he requires more information, he can always get a book (I do not think it's necessary but if he wants a book), he could try Core-Css.

Answer 2

Start simple. Read a few sites like A List Apart and Position Is Everything.

Don't try to replace your whole site at once - change one piece at a time.

Keep testing it in different browsers - the earlier you find out it looks different in one (or all!) the better.

Answer 3

Read CSS: The Definitive Guide, Third Edition by Eric A. Meyer. It's one of the best technical books I've read.

Answer 4

SitePoint have a large amount of tutorials and reference on this. They even have a book that sound like it would answer your question directly!

HTML Utopia: Designing Without Tables Using CSS, 2nd Edition

http://www.sitepoint.com/books/css2/

with 4 chapters available free

Answer 5

To all the other suggestions I would add Smashing Magazine's list of CSS articles.

Answer 6

I'm a big fan of reading tech books, so I learned from Beginning CSS Web Development: From Novice to Professional

Answer 7

I learned a lot from Eric Meyer on CSS and More Eric Meyer on CSS. The books take you through several examples step-by-step, starting with unstyled pages and explain the purpose for each step along the way. They would only be a starting point though, since they're a little bit dated. Sites like A List Apart will give you the most up-to-date information.

Answer 8

Definitely get the Firebug plugin for Firefox. Go to a site you like and check out the CSS for it. Turn some off and on, change things, just get a feel for how it all comes together. Great learning tool.

Answer 9

For French there is a good site : http://www.alsacreations.com/ there is tutorials on HTML, xHTML and CSS and many examples (how to create "pretty" menus etc...)

Answer 10

Related question @ Stackoverflow

Answer 11

I learned a lot of CSS by downloading free site designs from http://www.oswd.org/ and trying to implement the same effects on my own. It also gave me some insights into ideas for site-wide design patterns in CSS.

Answer 12

The book that got me started was Web Standards Solutions: The Markup and Style Handbook. by Dan Cederholm It is not a reference, but gives you a good start with real-world examples. Dan does a good job of holding your hand, taking it slow and not boring you. I bought it several years ago and still refer to it on occasion.

This is the only CSS book I own. I use the web as my CSS reference.

Answer 13

I'm a fan of the brute-force approach. Learn a few basics then start trying to recode your HTML using pure CSS. Every time you need a new technique, google it. You may want to subscribe to the CSS-discuss mailing list or read the wiki.

Answer 14

http://www.w3.org/Style/CSS/#specs

Someone already listed a w3c link. This link goes to the specs which is how I learned what I know about css. Anyway, start with level 1 then move on to the other levels. Well, level 1 should get you most of what you'll use so you may just want to learn level 1 then google the other things you want to do as needed.

Answer 15

I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke. It's less about the technical aspects of CSS and more about the mindset switch that needs to happen when moving from tables based design to separating content from design.

When I started learning CSS, I found myself coding pretty much the same way. Instead of tables and tds, I was using divs and spans. Still working from the outside (design) inward (toward the content) and designing my markup and contents around the look of the page, locking it into the design. Transcending CSS gets into the process of going from the inside (content and markup) out (design) leaving the site's appearance flexible.

Technical info is easy enough to find. I tend to frequent W3Schools.

Answer 16

I have found that using a DreamWeaver template is a good first place to start when creating a new page. They have made some very simple templates that allow you add any formatting you want, you just need to know things like 2 or 3 columns or elastic or fixed. Before I started doing this, I was constantly trying to figure out how to position stuff, but this has helped a lot, at least giving me a start.

Also consider a reset CSS file. It really helps dealing with browser differences.

Along with this, of course read tutorials and search the net.

Answer 17

Have a look at the Web Design From Scratch website. It has been really useful to me.

Answer 18

One important concept that most references are missing is that the CSS attributes aren't independent or cumulative. The most important properties, 'display' and 'position' react to each other and even change the behavior of other attributes. They interact in such a way that any guide that tries to teach these attributes independently is fail.

Most people doing HTML/CSS don't understand this, and are stuck fiddling without a real clue.

The only book I've found that relates these attributes at all is "Pro CSS and HTML Design Patterns". Eric Meyers book might... Personally I hate the style "Pro CSS and HTML Design Patterns" is written in, but its still the most effective guide to CSS that I have found.

Answer 19

I wrote an overall intro guide including some good CSS links elsewhere (see the comments too)... might be useful.