CSS design tutorials?

[stev0rz]

I recently stumbled across the idea of designing page layouts with CSS. Yeah, its been around for a long time but I just learned of it. Anyways, I was wondering if anyone here knew of any really good tutorials to learn how to design using CSS. I've read some source code, but I'm not quite sure I get it yet. Any suggestions?

[phoenixshade]

See the sticky thread in this forum, which has some good links. Here (http://www.codingforums.com/showthread.php?t=20862). Look under the "various resources" section.

[butlins]

If you're happy with old-fashioned paper based tutorials (that'd be books!), then Sitepoint (http://www.sitepoint.com/books/) does some excellent titles: HTML Utopia: Designing Without Tables Using CSS, Build Your Own Standards Compliant Website Using Dreamweaver 8, and Build Your Own Web Site The Right Way Using HTML & CSS all sit by my desk, along with a number of their other titles, and a smattering of Friends of Ed (http://www.friendsofed.com/catalog.html?books=web) and New Riders: Voices that Matter titles (http://www.peachpit.com/series/series.asp?st=44090&rl=1) too.

If you're a complete beginner, then Sitepoint's Build Your Own Web Site The Right Way Using HTML & CSS is where I'd start, followed by Build Your Own Standards Compliant Website Using Dreamweaver 8 if that's the software you're using.

[ronaldb66]

A good place to start with CSS would be the tutorials on HTML Dog (http://www.htmldog.com/guides/); another valuable resource are the CSS related articles on A List Apart (http://alistapart.com/topics/code/css/) (but do look beyond just CSS!). There's a lot of useful stuff on BonRouge's site (http://bonrouge.com/) as well.

[butlins]

One other thing I'd say in the getting your head around the whole CSS thing, is not to spend your first attempts at CSS design using abolutely positioned divs (or, as Dreamweaver calls them, layers) to replicate what you'd be doing using tables. That way you'll avoid how I spent my first six months, thinking I was designing using CSS just because I had an external CSS file to control the presentation.

The idea of XHTML/CSS and semantic design is that you start off from an HTML document that contains your content - headlines with appropriate h1, h2 etc tags, paragraphs, forms, tables (for your tabular data), images (that's content images, not background images or page furniture), and use HTML elements to appropriately tag your content - grouping groups of form elements with fieldset, tagging quoted text with blockquote, identifying table headers, body and footers with thead, tbody and tfoot, and header cells with th, etc. You can at the same time address many issues of accessibility - providing alt tags for images, captions and summaries for tables, legends for fieldsets, explanations for acronyms and abbreviations and labels for form items, for a start.

Once you're done with this, you should end up with what looks like an ugly Word document. You then group parts of the HTML into logical sections - the header, the navigation area, main content, footer etc.

It's important to get this right before you start, because when search engines are looking through your site, this is what they'll be indexing, so if your content is logically presented, and semantic, they'll be able to get at it more easily than if it was stuck in table cells in a table-based design.

Finally, you use CSS to pull everything into place. And then you swear quite a lot because IE decides it has a different idea as to where things should go.

[stev0rz]

good stuff. thanks a lot guys.