One of the biggest challenges when transitioning from tables to a standards-based layout is dealing with forms. But, from these challenges come many opportunities and with help from techniques like the Uni-Form you can dive right in even with little experience. Check out the related thread, too.
The CSS Cheat Sheet is a handy resource for beginners or anyone who just needs to take a quick peek and get a refresh of a particular property. Very cool.
Liquid layouts can be difficult to create when using a CSS-based layout because CSS isn't as forgiving as tables can be when resizing the window and the content contained within each content block. So, when you first start working with liquid layouts, it can be a battle. Luckily there are articles like Create a simple liquid layout that get you off on the right foot.
CSS tips and tricks is a tight little list of some easy ways to quickly improve the creation and maintenance of your site's design and CSS files.
You'll eventually learn these 20 pro tips the more web design experience you gain, so why not read this now and get a head start?
Beginners guide to CSS and standards is an extensive introduction to getting rid of your table-based layouts for good. This easy to read guide gets extra bonus points for providing lots of links to outside resources and numerous examples.
Learn CSS Positioning in Ten Steps tackles explaining CSS positioning with a clever and easy to understand tutorial that progresses from static positioning to more advanced topics like using floats and clearing.
This is great for anyone new to creating CSS-driven layouts.
CSS Basics - Making Cascading Style Sheets Easy to Understand is an exceptional comprehensive guide to learning CSS. If you have no experience with CSS, CSS Basics will guide you through the fundamentals you'll need to understand before you can transition to more advanced design techniques.
via CSS Beauty
If you're new to the box model or CSS in general, taking a look at CSS Stamps is a fun way to start playing around with border, padding and background. Not the most advanced technique, CSS Stamps combines some basic properties together to achieve a basic effect that shows how these properties work together.
One way to avoid browser bugs with your standards-based layouts is to start as cross-browser as possible. Cross-browser strategies for CSS has a good explanation of the basic elements you need to be aware of when you begin construction of your page and how paying attention to these details at the start can save you many headaches down the line.
Be sure to check out the CSS section of Friendly Bit, too; it's filled with even more helpful information for beginners.
Wrestling with default style properties can be a chore; so, it's really cool that kurafire.net created a snappy download to save us all some time and, possibly, learn something about defaults and browsers.
One way to learn about something is to experiment. So, if that's true then brunildo.org must have picked up a hellofalot when creating its numerous and varied CSS tests. Find tricks, tips, hacks and even layouts.
via cssbeauty.com
A summary of the traditional CSS-based, tableless layouts has good examples and descriptions of common and not-so-common CSS-based layout techniques. The summary also includes pros and cons of each layout -- a great way to help decide what layout is best for your site.
via benjaminadam.com
One of the best reasons to learn standards-based design is that it allows you to easily produce and display content. You don't need fancy templates with complicated tables to create smart, functional layouts; you just need a little vanilla XHTML and an introduction to CSS to get started. This is especially important with web application development because applications require a high level of flexibility -- you don't want to be held down by hard coded layout details or complex templates.
That's why it's great to see things like ASP.NET Resources - Crafting Lightweight Page Templates with CSS target developers and introduce the benefits of CSS and standards-based design.
Alsacreations, creating websites with CSS and (X)HTML : tutorials and lessons is comprehensive set of tutorials that give detailed explanations on a wide variety of common CSS and XHTML topics.
Wow. Seriously. A simple introduction to 3 column layouts is about as good of tutorial I've ever seen. From Joshuaink.com, the post gives a ton of background information but it's also very well written and incorporates a lot of other elements like accessible skip-links and layout design. Even if you're not a beginner, check this article out because it's possible you'll see something new.
via returnofdesign.com
If you're looking for a way to get a fluid 3 column CSS layout where the background of all the columns extends the full length of dynamic content, check out Flexi-Floats - 3 Column CSS Layout - Fluid, Multi-Column Stretch. This layout uses the IE7 JavaScript fix for min-width compliance as well as a few other tricks that any beginner can benefit from seeing applied to a layout example.
Be sure to check out the entire tanfa.co.uk site for even more CSS-related information.
If you're looking for information on how to create a CSS rollover -- or if you're looking for a way to improve on the rollovers you've already created, be sure and take a look at Collylogic's impressive CSS rollover generator. This method of image positioning (instead of image swapping) has all sorts of great applications, from graphical tabs to interactive product views.
A step by step guide on how to create rich site navigation from a simple unnumbered list was recently published at 456 Bereastreet. Using its own navigation as an example the write up manages to incorporate a decent amount of information, much of which is useful beyond strictly navigational elements because it exposes common issues that arise when dealing with lists and how to deal with them.
via CSSbeauty.com
The BrainJar.com CSS positioning tutorial puts my wimpy lab to great shame as it actually tackles the finer points of postioning with some really diverse examples of common positioning technics. Even those well-versed in the ways of the CSS will probably find some nuggets of useful information.
via: (after an extensive, painful, battle -- I'm not sure if I've won the war -- knock down drag out fight with IE5.0, finally I found a solution, and this link, at the ever-spectacular) Position is Everything.net.
This is part IV in a series of lessons that aim (and succeed) to work through an example CSS based site. Designing a CSS based template - part I gets you started working through the images offering some excellent PhotoShop tips and this latest lesson, dealing with the template itself, (linked above part IV) will help get your pages looking good as well as your style and mark-up.
via Veerle's blog
Get started with accessible forms at the Web Standards Project's excellent write-up: Learn: Accessible forms. From the page:
"So, those are a few basic rule [sic] regarding layout and positioning of form elements and the associated text which will get you off to a good start. "
Epicstudios.co.uk has put together some tutorials to get yer CSS on. If you're brand-spanking new to CSS start off with the CSS Beginners Tutorial and progress through the CSS Intermediate Tutorial and CSS Advanced Tutorial. The tutorials themselves are really super short but should get anyone new to CSS off on the right foot.
Once again Max Design takes the time to provide the web-community a valuable resource with the tutorial: Liquid layouts the easy way. Step-by-step the process of creating a liquid layout is explained with simple, easy to understand examples provided along the way. I like how the author(s?) took the time to examine a margin-related IE bug and how IE incorrectly interprets the box model.
via gwenharlow.com/resources
Another nice template resource to add to the pile, this time from thenoodleincident.com, creators of the famous CSS Panic Guide.
via anil dash's daily links
From the good people at mako4css.com comes a fine tutorial: How to build a web site without tables. Another good resource on the mako site, Mako 4 CSS: Frequently Asked Questions and a section on CSS Basics.
Web Page Design for Designers gives a great introduction to CSS and web design for those who have no experience building web pages. This simple article will get anyone new to web design, CSS and web standards off on the right foot. Easy to read with clear examples, CSS from the Ground Up is a wonderful resource for beginners.
Be sure to also poke around the rest of the wpdfd.com site, there are plenty of additional resources regarding web design throughout.
Reading a post over at 7nights.com/Asterisk (also read the follow-up post) regarding developing sites with the XHTML Strict 1.0 doctype lead to a very interesting discussion in the comments of that thread. It's important to be aware of the role that doctype plays when dealing with irregularities that may occur when developing your sites. For some basic introduction Blogdsgn.com also had some write up on the subject of transitional vs. strict for beginners. Any additional resources relating to doctype, which I'm sure there are many, would be beneficial in the comments of this thread. (*cough*) (hint hint)
After [finally] signing up for the CSS-discuss.org mailing list I poked around the archives and immediately found some interesting links and topics. Normally I'm not much of a mailing list type, but there are pretty strict policies that should keep the discussions on-topic. Also, there appears to be emphasis placed specifically on those new to CSS -- this is the place to go for beginners to ask questions and receive answers.
The companion Wiki, previously linked to in the css help pile's resources, is another great reference available to subscribers and non-subscribers alike.
Another gathering of CSS page layout templates. The layouts, available from ss-developer.net, are grouped into three flavors. Different options available are: general templates, 3 column templates, and 2 column templates. A quick way for a beginner to get a standards-based design off the ground.
via geekman.com
The Man in Blue, in fine above and beyond tradition, updates his Technicolor layout-based color-picker experiment to include outputting the valid CSS styles respective to your color combinations. From the Man in Blue site:
So, Technicolor not only gives you some colour combinations to try out on people with atypical monochromatism, but it also allows you to paint a web page in your chosen psychedelic mood! [view in context]
It's really handy to be able to flow out a color palette/scheme in a general sense before really getting into the nitty-gritty of a specific design. Very helpful.
Intensivstation.ch provides more templates offering different table-less layout options. The site is not in English, but of course the code is, and clicking on the desired layout template will give up the CSS.
via Mezzoblue Dailies
Now that you can easily create that CSS-based layout, you need to know more fundamental standards-compliant tags and conventions. Fortunately the good people at Silverorange.com have made an example style guide available to all. Get off on the right foot in terms of content standards, writing valid code, and using style sheets.
Inknoise.com has created a handy layout-o-matic that allows you to build a handful of different CSS-based layouts. If you're new to the idea of building standards-based designs, i.e. not using tables for layout, this will help you gain a basic understanding about how to achieve those same results without all the table markup.
From the site: "CSS Depot is a collection of CSS templates - not entire designs, only the actual layout boxes. Each template is a valid XHTML 1 document, with the necessary CSS visible in the document to facilitate easier copy/pasting. Feel free to use these templates as a basis for your own work - either personal or professional." If you're just getting started with CSS, this is an incredible resource in understanding how to recreate layouts you'd ordinary achieve with tables.