«

DRX

Web Developer Resource Index: CSS

Cascading Style Sheets allow the Web developer to separate the structure (HTML) and content of a document from its presentation, including such things as layout, fonts and colors. This separation has many benefits, including greater control of the design aspects and reduced complexity of the markup. Style sheets can also be used to target different devices, including browsers (screen), printers and hand-held devices such as PDAs or cell phones.

Visit the CSS Zen Garden to see examples of how the same page can be rendered in vastly different styles using the same markup and content.

Visit this layout Overview to gain a better understanding of how to get started on a CSS-based design, and how many of the resources listed here are related.

Admiring the results of some really talented people can bring inspiration, and you may need it first. Designing with CSS can be very challenging, and frustrating at times. But it is worth it, once you get over the initial hurdle.

Updated: Saturday, March 4th, 2006 @ 7:56 PM EST [18]

Visit Category: Treeview of the Index  Accessibility  Apache  Browsers  C  CGI  CSS  Character Encoding  Clients  Data Formats  Databases  Design and Development  Developer Resources  Directories  Dublin Core  FOAF  Firefox  FreeBSD  GeoURL  HTML  HTTP  History  Innovators  Internet  JavaScript  Languages  Licenses  Linux  Mac OS X  Markup Languages  Media Types  Metadata  MySQL  OPML  OWL  Open Source  Opera  Operating Systems  PHP  PICS  Perl  PostgreSQL  Programming  Protocols  Python  RDF  RSS  Safari  Semantic Web  Servers  Site Promotion  Software  Standards  Style Sheets  URI  Unix  WWW  Web Developer News  XHTML  XMDP  XML  XML Languages  XPath  XPointer  XQuery  XSL  XSL-FO  XSLT

Navigation

Resources

• 1.Cascading Style Sheets

  Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. [15]

  ★★★★☆
  URI:http://www.w3.org/Style/CSS/
  Author:
  Bert Bos
  [2]
  Reviewed:Sunday, April 3rd, 2005 @ 12:34 AM EST
  by:
  Douglas Clifton
  
  Cascading Style Sheets cssw3c
   

• 2.Layout Gala

  A collection of 40 layouts based on the same markup, each with valid CSS and HTML. The stylesheets are free of hacks and workarounds, and support multiple browsers. Includes percentage, fixed and liquid designs in various combinations and column counts. [1660]

  ★★★★☆
  URI:http://blog.html.it/layoutgala/
  Author:
  Alessandro Fulciniti
  [1]
  Reviewed:Saturday, March 4th, 2006 @ 7:56 PM EST
  by:
  Douglas Clifton
  
  Layout Gala cssdesigndeveloperhtmllayoutmarkup
   

• 3.Creating Websites with CSS and XHTML

  A wonderful set of 30 tutorials on designing with CSS and X/HTML. Raphael first covers a few basics, then moves on to tableless layout, menus and advanced topics. These articles are translated from French, so there are a few spelling and other mistakes. [1659]

  ★★★★☆
  URI:http://tutorials.alsacreations.com/
  Author:
  Raphael Goetter
  [1]
  Reviewed:Saturday, March 4th, 2006 @ 2:01 PM EST
  by:
  Douglas Clifton
  
  Creating Websites with CSS and XHTML cssdesigndeveloperhowtohtmltutorialxhtml
   

• 4.SkimCSS

  Features a keyword tagged and searchable database of CSS resources. Visitors may submit suggestions, and vote on the quality of existing articles thus creating a social rating system. A tag cloud is provided, as well as RSS feeds for recent additions. [1620]

  ★★★★☆
  URI:http://www.skimcss.com/skimlist
  Author:
  John Wiseman
  [1]
  Reviewed:Tuesday, January 31st, 2006 @ 2:02 AM EST
  by:
  Douglas Clifton
  
  SkimCSS cssresourcestagging
   

• 5.Z's not dead baby, Z's not dead

  Layout possibilities are infinite once you understand positioning and the z-index property. I recommend giving Tommy Olsson's Relatively Absolute a read, followed by this tutorial on the ins and outs of z-indexes. Personally, floats make my head spin... [1576]

  ★★★★☆
  URI:http://24ways.org/advent/zs-not-dead-baby-zs-not-dead/
  Author:
  Andy Clarke
  [1]
  Reviewed:Tuesday, December 20th, 2005 @ 12:22 AM EST
  by:
  Douglas Clifton
  
  Z's not dead baby, Z's not dead cssdesignlayouttutorial
   

• 6.Ruthsarian Layouts

  Talk about belated props! A quick look around these excellent CSS layout techniques and you will understand why I selected them as the basis for this site. And that was after I had searched and studied countless others. Sorry for the delay Mr. Ruthsarian. [1568]

  ★★★★☆
  URI:http://webhost.bridgew.edu/etribou/layouts/
  Author:
  Eric Tribou
  [1]
  Reviewed:Tuesday, November 29th, 2005 @ 10:01 PM EST
  by:
  Douglas Clifton
  
  Ruthsarian Layouts cssdesignlayout
   

• 7.An Overview of Current CSS Layout Techniques

  Covers the current strategies used to build the foundation of every CSS-based web site: layouts. Creating a layout in CSS is one of the hardest skills to master both conceptually, and in practice, because the vocabulary is large, and often contradictory. [1509]

  ★★★★☆
  URI:http://particletree.com/features/an-overview-of-current-css-layout-te...
  Author:
  Kevin Hale
  [2]
  Reviewed:Tuesday, August 23rd, 2005 @ 12:45 AM EST
  by:
  Douglas Clifton
  
  An Overview of Current CSS Layout Techniques cssdesignlayouttutorial
   

• 8.Soup to Nuts

  Learn how to build a CSS-based layout from start to finish. From design in-flight, which used to be a pay-for PDF magazine only. Nice to finally add some of Nathan's work to this portfolio. He (et al.) does some outstanding work over at web-graphics.com. [1503]

  ★★★★☆
  URI:http://designinflight.com/05January/soup_to_nuts_making_a_css-based_l...
  Author:
  Nathan Steiner
  [1]
  Reviewed:Saturday, August 20th, 2005 @ 12:03 AM EST
  by:
  Douglas Clifton
  
  Soup to Nuts cssdesignlayouttutorial
   

• 9.Will the Browser Apply the Rule?

  Vertically, you have a list of CSS selector hacks used to filter in/out certain browsers. Horizontally, you have a list of platforms, browsers and versions. Matching the two will tell you if the rule applies. Slick! Hint: turn on interactive highlighting. [1489]

  ★★★★☆
  URI:http://centricle.com/ref/css/filters/
  Author:
  Kevin Smith
  [1]
  Reviewed:Monday, August 15th, 2005 @ 3:51 PM EST
  by:
  Douglas Clifton
  
  Will the Browser Apply the Rule? browsercssresourcesstandards
   

• 10.Relatively Absolute

  One of the most misunderstood and confusing aspects of using CSS, and in particular when it comes to page layout, are the rules for positioning using static, relative, absolute and fixed. Tommy does a good job of clearing the confusion in this tutorial. [1461]

  ★★★★☆
  URI:http://autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolu...
  Author:
  Tommy Olsson
  [3]
  Reviewed:Tuesday, August 2nd, 2005 @ 11:06 PM EST
  by:
  Douglas Clifton
  
  Relatively Absolute cssdesignlayouttutorial
   

• 11.CSS Panic Guide

  It's 2:00am, that design you've been working so hard on is looking good, and the client is scheduled to review it in the morning. But wait, it doesn't work in browser X! Don't panic! Here be Owen, with tips and resources to keep you from coming unglued. [1447]

  ★★★★☆
  URI:http://thenoodleincident.com/tutorials/css/
  Author:
  Owen Briggs
  [2]
  Reviewed:Saturday, July 30th, 2005 @ 12:18 PM EST
  by:
  Douglas Clifton
  
  CSS Panic Guide browsercssdesignresources
   

• 12.CSS Reboot

  Is an "attempt to bring together Web professionals who design with CSS and standards in mind to launch their redesigns on May 1st." A good place to window shop for design inspiration. Drop a slice of humblepie in Adam's mailbox for me on the way out. [1248]

  ★★★★☆
  URI:http://www.cssreboot.com/
  Author:
  B. Adam Howell
  [1]
  Reviewed:Saturday, May 28th, 2005 @ 5:17 PM EST
  by:
  Douglas Clifton
  
  CSS Reboot cssdesignstandards
   

• 13.The Definitive Post on Gzipping your CSS

  Or: how to use PHP to compress your stylesheets on the fly if you don't have Apache's mod_gzip available. Two methods are presented, one if you can use .htaccess files, and one if you cannot. Links related to the technique are also provided. [1242]

  ★★★★☆
  URI:http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/the-definitive...
  Author:
  Mike Papageorge
  [2]
  Reviewed:Friday, May 27th, 2005 @ 9:51 AM EST
  by:
  Douglas Clifton
  
  The Definitive Post on Gzipping your CSS apachecssgzipmodulephp
   

• 14.Modular CSS

  Whoa! I've been looking for an article on this topic. Except I take it one step further and control which stylesheet modules I'm importing on a page-by-page basis using PHP. Have a look at the source code to this one for a usage example. [1225]

  ★★★★☆
  URI:http://contentwithstyle.co.uk/index.php?id=12&s=Articles
  Author:
  Mike Stenhouse
  [1]
  Reviewed:Sunday, May 22nd, 2005 @ 7:28 PM EST
  by:
  Douglas Clifton
  
  Modular CSS cssmodulephp
   

• 15.CSS Creator Forum

  A phpBB forum for CSS developers from novice to expert. Topics include beginner questions, howtos, layouts, styling, site check, and other non-CSS related categories. If you prefer a forum to mailing lists like css-discuss, this is the place to go. [1216]

  ★★★★☆
  URI:http://csscreator.com/css-forum/
  Author:
  Tony Aslett
  [1]
  Reviewed:Saturday, May 21st, 2005 @ 6:15 PM EST
  by:
  Douglas Clifton
  
  CSS Creator Forum cssforumhowto
   

• 16.Comprehensive Design List

  Dave has released the archives of all 569 (to date) of the CSS Zen Garden designs. I really had no idea, although I'm not surprised, that there were that many of them out there. I'm kinda partial to "bugs" myself. Go get inspired. [1181]

  ★★★★☆
  URI:http://mezzoblue.com/zengarden/alldesigns/
  Author:
  Dave Shea
  [4]
  Reviewed:Tuesday, May 17th, 2005 @ 7:48 AM EST
  by:
  Douglas Clifton
  
  Comprehensive Design List cssdesign
   

• 17.mezzoblue: CSS Resource Guide

  More CSS resources to augment this list. [238]

  ★★★★☆
  URI:http://mezzoblue.com/zengarden/resources/
  Author:
  Dave Shea
  [4]
  Reviewed:Tuesday, May 17th, 2005 @ 7:48 AM EST
  by:
  Douglas Clifton
  
  mezzoblue: CSS Resource Guide cssdeveloper
   

• 18.Box Lessons

  Here be Owen...in his own unique style, bringing you a set of little CSS boxes, and the design problems and workarounds caused by major browser vendors and their "implementations" of the specs. Worth a visit even if you're not learning CSS. [1166]

  ★★★★★
  URI:http://thenoodleincident.com/tutorials/box_lesson/
  Author:
  Owen Briggs
  [2]
  Reviewed:Monday, May 16th, 2005 @ 6:36 AM EST
  by:
  Douglas Clifton
  
  Box Lessons browsercssspec
   

• 19.Position is Everything

  How could I forget about Big John and Holly? Smack! CSS browser bugs and solutions, articles, demos, tutorials, links, lots of example code, you name it and they've got it. A must bookmark. [1078]

  ★★★★★
  URI:http://positioniseverything.net/
  Author:
  John and Holly Bergevin
  [1]
  Reviewed:Sunday, May 15th, 2005 @ 3:01 PM EST
  by:
  Douglas Clifton
  
  Position is Everything browsercodecss
   

• 20.The CSS Box Model Hierarchy

  For developers new to CSS and the box model, this is an excellent 3D visual aid. I also highly recommend following the link to Douglas Livingstone's interactive Flash demonstration version. [1127]

  ★★★★☆
  URI:http://hicksdesign.co.uk/3dboxmodel/
  Author:
  Jon Hicks
  [3]
  Reviewed:Wednesday, May 11th, 2005 @ 8:08 PM EST
  by:
  Douglas Clifton
  
  The CSS Box Model Hierarchy cssflash
   

• 21.CSS Vault

  A gallery of inspirational, CSS-designed sites, as well as many CSS resources. A good place to check out examples of CSS applied to real (commercial) Web sites. New material is added every month, on top of a large archive. [1098]

  ★★★★☆
  URI:http://cssvault.com/
  Author:
  Jacob Gower
  [1]
  Reviewed:Thursday, May 5th, 2005 @ 10:33 PM EST
  by:
  Douglas Clifton
  
  CSS Vault cssdesign
   

• 22.Whitespace: Learning CSS

  If you're ready to take the plunge into learning CSS, but you're not sure how to get started, then this short article presents some good ideas how how to do just that. [1095]

  ★★★★☆
  URI:http://9rules.com/whitespace/learning_css.php
  Author:
  Paul Scrivens
  [2]
  Reviewed:Thursday, May 5th, 2005 @ 1:33 AM EST
  by:
  Douglas Clifton
  
  Whitespace: Learning CSS csstutorial
   

• 23.CSS Cheat Sheet

  Designed for printing and storing near your desk, this handy quick reference includes a properties list, CSS syntax, selectors and pseudo selectors, media types (for linking), units, the box model, and inheritance and the cascade. [1073]

  ★★★★☆
  URI:http://www.ilovejackdaniels.com/css/css-cheat-sheet/
  Author:
  Dave Child
  [4]
  Reviewed:Sunday, May 1st, 2005 @ 5:58 AM EST
  by:
  Douglas Clifton
  
  CSS Cheat Sheet cssreference
   

• 24.CSS and Browser Compatibility

  CSS selectors and declarations, tests and browser compatibility. Lots of information about browser modes (hence the name) and CSS hacks, conditional comments, etc. [1046]

  ★★★★☆
  URI:http://www.quirksmode.org/css/contents.html
  Author:
  Peter-Paul Koch
  [2]
  Reviewed:Monday, April 25th, 2005 @ 2:36 AM EST
  by:
  Douglas Clifton
  
  CSS and Browser Compatibility browsercss
   

• 25.CSS Zen Garden

  For lingering skeptics, a visit to the Zen Garden should convince you of the power of stylesheets: See numerous beautiful designs (CSS) applied to the same document structure and content (HTML). [237]

  ★★★★★
  URI:http://www.csszengarden.com/
  Author:
  Dave Shea
  [4]
  Reviewed:Saturday, April 23rd, 2005 @ 5:27 PM EST
  by:
  Douglas Clifton
  
  CSS Zen Garden cssdesign
   

• 26.Stylegala: CSS Reference

  An alphabetical list of the most common CSS1 and CSS2 properties. Each entry includes syntax, legal values, example declarations and browser support. [1037]

  ★★★★☆
  URI:http://www.stylegala.com/features/css-reference/
  Author:
  David Hellsing
  [1]
  Reviewed:Saturday, April 23rd, 2005 @ 6:09 AM EST
  by:
  Douglas Clifton
  
  Stylegala: CSS Reference cssreference
   

• 27.css-discuss

  css-discuss is a mailing list devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications. [17]

  ★★★★☆
  URI:http://css-discuss.incutio.com/
  Author:
  Community
  [22]
  Reviewed:Thursday, April 14th, 2005 @ 2:46 PM EST
  by:
  Douglas Clifton
  
  css-discuss css
   

• 28.Holy CSS Zeldman!

  An exaustive list of CSS links, and other Web designer/developer resources. [239]

  ★★★★☆
  URI:http://www.dezwozhere.com/links.html
  Author:
  Andrew Fernandez
  [1]
  Reviewed:Wednesday, April 13th, 2005 @ 4:30 PM EST
  by:
  Douglas Clifton
  
  Holy CSS Zeldman! cssdesigndeveloperdirectory
   

• 29.Maxdesign: CSS Tutorials

  A series of excellent articles and tutorials on CSS topics that include lists, floating elements and selectors. [19]

  ★★★★★
  URI:http://css.maxdesign.com.au/
  Author:
  Russ Weakley
  [7]
  Reviewed:Wednesday, April 6th, 2005 @ 12:05 AM EST
  by:
  Douglas Clifton
  
  Maxdesign: CSS Tutorials css
   

• 30.CSS Validation Service

  A free service that checks Cascading Style Sheets (CSS) in (X)HTML documents or standalone for conformance to W3C recommendations. [89]

  ★★★★☆
  URI:http://jigsaw.w3.org/css-validator/
  Author:
  CSS Validator Team
  [1]
  Reviewed:Wednesday, April 6th, 2005 @ 12:02 AM EST
  by:
  Douglas Clifton
  
  CSS Validation Service cssvalidatorw3c
   

• 31.Learn CSS: Complete CSS Guide

  A free online reference to every aspect of Cascading Style Sheets. If you've got a question about CSS the answer is sure to be here. [18]

  ★★★★☆
  URI:http://westciv.com/style_master/academy/css_tutorial/
  Author:
  John Allsopp
  [2]
  Reviewed:Sunday, April 3rd, 2005 @ 1:54 AM EST
  by:
  Douglas Clifton
  
  Learn CSS: Complete CSS Guide cssreference
   

• 32.Eric Meyer: CSS Work

  A whole collection of resources from the leading expert in the field of CSS. Includes articles, tutorials and discussions. [16]

  ★★★★★
  URI:http://meyerweb.com/eric/css/
  Author:
  Eric Meyer
  [2]
  Reviewed:Sunday, April 3rd, 2005 @ 12:52 AM EST
  by:
  Douglas Clifton
  
  Eric Meyer: CSS Work cssreference
   

Related Categories

Matching Tags

apache browser code css design developer directory flash forum gzip howto html layout markup module php reference resources spec standards tagging tutorial validator w3c xhtml

Indexes

Search for Cascading Style Sheets on:

drx Search:

Last updated: Saturday, March 4th, 2006 @ 7:56 PM EST [2006-03-05T00:56:40Z]