50 Extremely Useful And Powerful CSS Tools | CSS | Smashing Magazine

We love useful stuff. For months, we have been bookmarking
interesting, useful and creative CSS tools and related resources. We have been
contacting developers, encouraging them to improve their tools and release their
handy little apps to the public. Last year we prepared and published some of
them in a series
of smashing posts about CSS. Now again is the time to give these tools the
attention they deserve. Big thanks to all designers and developers who
contributed to the design community over the last months and years. We — our
community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators,
templates and resources. We did not include “traditional” CSS tools,
such as Firebug or the href="http://chrispederick.com/work/web-developer/">Web Developer extension,
but tried to focus on rather unknown tools that are definitely worth a look.
Some tools are new and some are old, but hopefully everybody will find a couple
of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas
presented here, release new tools for the public and let us know about them. We
would love to feature your handy tool in our next review.

Please take a look at the following related posts:

• href="http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/">Powerful
  CSS-Techniques For Effective Coding
  
• href="http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/">53
  CSS Techniques You Couldn’t Live Without
  
• href="http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/">CSS:
  Techniques, Tutorials, Layouts
  
• href="http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/">75
  (Really) Useful JavaScript Techniques

CSS and Typography

• href="http://code.google.com/p/hyphenator/">Hyphenator
  Hyphenator.js
  brings client-side hyphenation of HTML documents to every browser by inserting
  soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation
  algorithm commonly known from LaTeX and OpenOffice. The goal is to provide
  hyphenation in all browsers that support JavaScript and the soft hyphen for at
  least English, German and French. href="http://yellowgreen.de/hyphenation-in-web/">Here is the server-side script
  that does the hyphenation.
  
• CSS Type Set
  CSS Type Set is a
  hands-on typography tool that allows designers and developers to interactively
  test and learn how to style their Web content.
  

  src="http://88.198.60.17/images/useful-css-tools/typeset.gif" width=502>

  
  
• Typechart
  Typechart lets you flip
  through, preview and compare Web typography while retrieving the CSS.
  

  src="http://78.46.108.98/images/useful-css-tools/tc.jpg" width=500>

  
  
• CSS-Typoset
  Matrix and code generator
  A matrix table that presents font sizes and
  (symmetrical and asymmetrical) margins for various base font sizes — in pixel
  and em units. It also generates the source code on the fly. Created by Jan
  Quickels.
  
• Em Calculator
  Em Calculator is a
  small JavaScript tool that helps you make scalable and accessible CSS design. It
  converts sizes in pixels to relative em units, which are based on a given text
  size.
  

  src="http://88.198.60.17/images/useful-css-tools/emc.gif" width=500>

  
  
• Facelift Image Replacement
  (FLIR)
  Facelift Image Replacement (or FLIR, pronounced “fleer”) is an
  image replacement script that dynamically generates image representations of
  text on your Web page in fonts that might otherwise not be visible to your
  visitors. Written by Cory Mawhorter. href="http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/">How
  To Use Any Font With FLIR: Tutorial.
  
• href="http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/">Vertical
  rhythm calculator
  This tool converts pixel values to em values depending
  on the font size of the text. You can also set margins and paddings
  automatically, depending on the line height you’ve defined. Very useful.
  
  
  

  href="http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/">height=315 alt=Screenshot
  src="http://78.46.108.98/images/best-of-january08/csst.png" width=413>

  
  
• typeface.js
  Instead of just
  creating images or using Flash to show your website’s graphic text in the font
  you want, you can use typeface.js and write in plain HTML and CSS, just as if
  your visitors had the font installed locally.

CSS Online Tools

• PSD2CSS Online
  A free online
  service that generates Web pages from Photoshop designs. By following the href="http://psd2cssonline.com/node/128">guidelines and naming conventions,
  you can precisely choose how the transformation from PSD to (X)HTML and
  CSS is done.
  
• href="http://www.conditional-css.com/">Conditional-CSS
  Conditional-CSS
  allows you to write maintainable CSS with conditional logic to target specific
  CSS statements for both individual browsers and groups of browsers.
  
  
  

  src="http://88.198.60.17/images/useful-css-tools/cond.gif" width=469>

  
  
• MoreCSS
  MoreCSS is a
  design-oriented JavaScript library that allows you to write code for applying
  automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables,
  advanced list styling and cross-browser opacity style. But the really special
  thing is that you can do these things as you would with regular CSS.
  
• px to em
  This tool is what its
  developers call “px to em conversion made simple”. Type a base font size in
  pixels, and the tool will produce a complete pixel to em conversion table,
  making elastic Web design much easier to produce.
  
• CSS Frame Generator
  This
  tool returns corresponding CSS in a line-by-line way indented with spaces to
  reflect XHTML structure - each selector and all of its properties and values in
  one line. This may be a bit strange for you at the beginning, but if you get
  used to it you’ll find it much better.
  

  alt="CSS Frame Generator"
  src="http://78.46.108.98/images/useful-css-tools/framegen.jpg" width=500>
  

  
  
• CSS Redundancy
  Checker
  You can use this tool to find CSS selectors that aren’t used by
  any of your HTML files and that may be redundant.
  
• CleverCSS
  CleverCSS is
  a small markup language for CSS, and inspired by Python, that can be used to
  build a style sheet in a clean and structured way. In many ways, it’s cleaner
  and more powerful than CSS2. You can also work with variables.
  
• WordOff
  WordOff applies some rules to
  strip the cruft that is pasted into WYSIWYG editors from Word. For example,
  attributes are removed for all elements except <a>, <span> and
  <div>, empty elements are removed and consecutive line breaks are reduced
  to two. It also contains an API.
  
  
  

  src="http://88.198.60.17/images/useful-css-tools/word.gif" width=505>

  
  
• Postable
  “I absolutely
  hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and
  ‘>,’ respectively. I also hate having to write “&” any time I want to
  include an ampersand. It makes including code snippets on my blog and whatnot
  extremely annoying, and today I finally got fed up.” This handy tool is a little
  app that will do all that for you. Created by Elliot Swan.
  
  
  

  src="http://78.46.108.98/images/useful-css-tools/postable.jpg" width=500>
  

  
  
• href="http://www.askthecssguy.com/kotatsu/index.html">Kotatsu
  Kotatsu is
  a simple HTML table generator. The tool lets you attach classes to cells in the
  same column easily.
  
  
  

  alt=Kotatsu src="http://88.198.60.17/images/useful-css-tools/kot.gif"
  width=364>

  
  
• href="http://code.google.com/p/htmldevelopertools/">htmldevelopertools
  This
  tool allows you to update your CSS files on the server in a browser window.
  Currently works only under IIS + .NET 3.5. An interesting idea. Could someone
  create a similar script for Apache? Let us know, and we’ll support your both
  financially and with the broad coverage of our magazine.
  
  
  

  alt=htmldevelopertools
  src="http://78.46.108.98/images/useful-css-tools/devtools.gif" width=465>
  

  
  
• Deploy
  Deploy is a free
  open-source Web application that allows you to choose the name of a project, the
  Doctype, whether you want a CSS reset or jQuery integration, and it creates a
  zipped, ready-to-use package with all specified files and folders. The tool has
  been optimized for Fluid, the Mac application
  that creates SSBs (site-specific browsers) for websites.
  
  
  

  src="http://88.198.60.17/images/useful-css-tools/deploy.jpg" width=500>

  
  
• CSS Evolve
  CSSEvolve
  lets you play with many properties of a website, including the website’s color
  scheme, fonts, borders and more. CSSEvolve works through a process of simulated
  evolution in which you select website features that you like and refine them
  through multiple generations.”It uses a traditional blind watchmaker,
  user-driven genetic algorithm to drive CSS changes on a website of the user’s
  choosing. Basically, a set of mutated CSS variants are produced, the user
  selects changes that he or she likes, the algorithm randomly combines those
  changes through crossover and mutation and the process continues.” [ href="http://somanyschemes.com/2008/11/26/cssevolve-guided-stylesheet-evolution/">via
  ]
  
• Lorem 2
  This tool provides you with an
  “all around better Lorem experience.” It contains short paragraphs, long
  paragraphs, short list items and long list items to use in your wireframes.
  
• href="http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py">SelectORacle
  A
  small script that explains CSS selectors in plain English or Spanish.
  Particularly useful for CSS3 selectors.
  
• JS Bin
  A Web app specifically designed to
  help JavaScript and CSS folk test snippets of code in a particular context and
  debug the code collaboratively. It allows you to edit and test JavaScript and
  HTML (reloading the URL also maintains the state of your code: new tabs don’t).
  Once you’re happy, you can save and send the URL to a peer for review or help.
  They can then make further changes, saving anew if required. Alternative: href="http://paste.bradleygill.com/">CodePaste or href="http://etherpad.com/">EtherPad.
  

  src="http://www.drweb.de/magazin/wp-content/uploads/2008/11/jsbin-1225736869.gif">
  

  
  
• CSS Text Wrapper
  The CSS Text
  Wrapper allows you to easily make HTML text wrap in shapes other than just a
  rectangle. You can make text wrap around curves, zig-zags, or whatever you want.
  
  
  

  src="http://78.46.108.98/images/best-of-january08/tw.png" width=371>

  
  
• Writing Tests
  Against CSS
  CSS is hard to test automatically. Do font sizes meet
  expectations? Does the layout width correspond to the initial mockup? This tool
  helps you spot changes in unexpected areas of a website’s layout and design. It
  can also extract rendered DOM values, such as text size, from a given Web page
  and compare them against expected values. This could be useful for both
  regression testing and assertion-based, test-driven development. Written in
  Python by Gareth Rushgrove.
  
• CSS Sprite
  Generator
  With this tool, you can upload all of your images (you have to
  place them in a .zip file first) and it will combine the uploaded images into a
  single sprite and generate the CSS for you.
  
• Sky CSS Tool
  An online
  CSS authoring tool, Sky CSS allows you to create CSS classes almost without
  using handwritten code. A JavaScript-compatible browser is needed for proper
  functioning.
  
• CSS
  Tidy Online
  An online version of CSS Tidy, a tool that allows you to keep
  your code clean by compressing the code.
  
• href="http://sixrevisions.com/css/css_code_optimization_formatting_validation/">Web-Based
  Tools for Optimizing, Formatting and Checking CSS
  A huge compilation of
  some of the best free Web-based CSS optimizers/compressors, code formatters and
  validation services. By Jacob Gube.
  
• Grid Designer 2.4
  This tool
  enables you to create a grid by specifying the number of columns and the widths
  of the columns, gutters and margins. You can also specify typography in the same
  tool and export the final CSS and (X)HTML markup. You can also bookmark your
  grid and typography settings and create designs with spanning columns. Created
  by Rasmus Schultz.
  
  
  

  src="http://88.198.60.17/images/useful-css-tools/mind.gif" width=499>

  
  
• Yahoo’s
  Secret Text-Sprite Generator
  Basically this is a URL you can hit that
  creates a perfect sprite-ready PNG graphic of text you add to the URL.
  
• Replace CSS Colors -
  Editor
  This tool enables you to change the entire color scheme of your
  website without going through the CSS code. You choose your local CSS file,
  replace colors and then download the new CSS file.
  
• The Box Office
  The Box Office
  lets you wrap, float or contour text around free-form images using CSS for
  (X)HTML pages.
  
• href="http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/">MinifyMe
  A
  small AIR application that can compress multiple CSS and JavaScript files into
  one and runs on your desktop.
  
  
  

  href="http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/">height=201 alt=MinifyMe
  src="http://78.46.108.98/images/useful-css-tools/min.jpg" width=500>

  
  
• cssdoc
  CSSDOC is a convention for
  commenting in CSS to help individuals and teams to improve writing, coding,
  styling and managing CSS files. It is an adoption of the well known
  JavaDoc/DocBlock-based way of commenting in source code by putting style,
  DocBlocks and tags together.
  
• CSS Menu
  Generator
  This tool generates vertical, horizontal and drop-down menus
  online. Various color schemes are available, and you can also customize the
  menus online.
  
• sheetUp - DOM Stylesheet
  Library
  Simplify the tedious task of manipulating style sheets contained
  in document.styleSheets. You can use the href="javascript:var%20scr=document.createElement('script');scr.setAttribute('src','http://templateed.com/ted2.js');document.body.appendChild(scr);void(0);">sheetup
  bookmarklet to integrate a built-in CSS/HTML-editor in your browser.
  
• CSS SuperScrub
  This tool
  claims to significantly reduce the size and complexity of your CSS by
  programmatically stripping unneeded content, stripping redundant calls and
  intelligently grouping the remaining element names.
  
• DrawAble Markup Language
  Drawter Beta 2
  gives you the possibility of literally drawing your website’s code. It runs on
  every single Web browser, which makes it really useful and helpful. Each tag is
  presented as a layer you have drawn.
  
  
  

  src="http://88.198.60.17/images/best-of-january08/dra.png" width=330>
  

Handy Kits For Designing With CSS

• href="http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/">Regex
  Patterns for Single Line CSS
  If you are formatting your CSS style sheets
  single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This
  macro retains a single blank line where your original contained two or more
  blank lines (helpful if you group your rules) and adds white space that matches
  my standard formatting preferences (which I find makes it easier to scan
  quickly).” And if you don’t use Textmate, you can use a regular expression
  instead; it is also provided in the post.
  
  
  

  href="http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/">height=200 alt="Regular Expressions"
  src="http://78.46.108.98/images/useful-css-tools/regex.gif" width=500>

  
  
• href="http://speckyboy.com/2008/10/07/21-excellent-dreamweaver-extensions-for-css-productivity-and-standards/">21
  Excellent Dreamweaver Extensions for CSS Productivity and Standards
  An
  extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS
  Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
  
• Graph Paper
  This graph
  paper is made for visual designers, interactive designers and information
  architects. You’ll find styles for wireframing user interfaces, storyboarding
  interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic
  grid for drafting sitemaps or anything else that might come up.
  
• Starter Kit For Developers
  (PSD)
  This starter kit is a free Photoshop template that includes forms,
  grids, ad placeholders, dummy copy and other design elements (13 MB).
  
• href="http://nb.io/hacks/csshttprequest/">CSSHttpRequest
  CSSHttpRequest
  (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to
  JavaScript, this works because CSS is not subject to the same-origin policy that
  affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET
  requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the
  context of the calling page.

In-Browser CSS Tools

• href="http://www.klauskomenda.com/archives/2008/02/16/collection-of-web-developer-tools-per-browser/">Collection
  of Web Developer Tools, by Browser
  Sometimes it is not easy to keep track
  which tools are at a developer’s disposal (and which ones are actually useful).
  This article lists the best tools available and quickly describes how to
  activate, install and use them.
  
  
  

  href="http://www.klauskomenda.com/archives/2008/02/16/collection-of-web-developer-tools-per-browser/">height=388 alt=Screenshot
  src="http://88.198.60.17/images/best-of-april-2008/kla.jpg" width=473>
  

In-Browser CSS Tools: Firefox Extensions

• Dust-Me
  Selectors
  A Firefox extension (for v1.5 or later) that finds unused CSS
  selectors. It extracts all of the selectors from all of the style sheets on the
  page you’re viewing, then analyzes that page to see which of those selectors are
  not used. The data is then stored so that when testing subsequent pages,
  selectors can be crossed off the list as they’re encountered.
  
• Aardvark Firefox
  Extension
  With Aardvark, you can: clean up unwanted banners and
  surrounding “fluff,” especially prior to printing a page; see how a page is
  created, block by block; and view the source code of one or more elements.
  
• href="https://addons.mozilla.org/en-US/firefox/addon/2104">CSSViewer
  A
  CSS property viewer that displays all information about a design element.
  
• Dummy
  Lipsum
  This Firefox extension dynamically fills a selected field with
  Lorem ipsum text; the function is called via the context menu.
  
• href="http://www.drweb.de/magazin/firefox-test-und-entwicklungstools-fur-webentwickler/">Firefox:
  Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin
  
• GridFox
  GridFox
  is a Firefox extension that overlays a grid on any website. If you can open it
  in Firefox, you can put a grid on top of it. It’s easy to customize and allows
  you to create the exact grid you based your layout on.
  
  
  

  alt=Screenshot src="http://78.46.108.98/images/best-of-april-2008/gridfox.jpg"
  width=450>

  
  
• href="http://www.noupe.com/tools/20-firefox-add-ons-to-enhance-your-web-development.html">20
  Firefox Add-Ons To Enhance Your Web-Development
  Yet another overview of
  useful Firefox add-ons that can help developers create websites more
  efficiently. Among them are href="https://addons.mozilla.org/en-US/firefox/addon/1002">Codetch, href="https://addons.mozilla.org/en-US/firefox/addon/7943">Pixel Perfect, href="https://addons.mozilla.org/en-US/firefox/addon/532">Link Checker and
  ColorZilla.
  

Coding and Programming With CSS

• CSS Extra
  Coda Plug-in
  CSS Extra is a plug-in for Coda that gives you access to
  some dynamic CSS. Although it is not truly dynamic in that it
  will not force Coda to process the variables and settings, it gives you the
  commands to process the CSS instead. What this means is that you can have
  constants, bases and a layout module within your CSS.
  
• Edit in Place with
  JavaScript and CSS
  This tool offers you more intuitive editing (in-place
  editing) of your documents and style sheets. The idea: in a selected area, the
  user can enter the markup or change the current value directly.
  
• Simple CSS
  Simple CSS is a free
  CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from
  scratch and modify existing sheets, using a familiar point-and-click interface.
  Freeware.
  
• AWK
  AWK is
  a very powerful programming language that you can use on the command line for
  advanced text processing.
  
• cssutils
  A Python
  package for parsing and building CSS.
  

  src="http://88.198.60.17/images/useful-css-tools/scss.gif" width=375>

  
  
• RESTful
  CSS
  A new method for organizing CSS that better maps on to the way that
  popular Web application frameworks are built. The examples are based on Ruby on
  Rails, but the concepts should be easily transferrable to other MVC frameworks.
  By Steve Heffernan.
  

  alt="RESTful CSS" src="http://78.46.108.98/images/useful-css-tools/rb.gif"
  width=401>

New CSS Frameworks

• CSS Drop-Down Menu
  Framework
  A cross-browser, modular framework that contains 14
  customizable templates for designing drop-down-menus.
  
• BlueTripCSS Framework
  A full featured
  and beautiful CSS (Cascading Style Sheets) framework which combined the best of
  Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s
  simplicity, and Elements’ icons, and has now found a life of its own. The
  framework contains 24-column grid, sensible typography styles, clean form
  styles, a print styleshet, an empty starter stylesheet, sexy buttons and status
  message styles.
  
• Hartija - CSS Print
  Framework
  Hartija is a CSS print framework that attempts to unite the
  best CSS printing practices into one single CSS file.
  
• AM framework
  This framework
  contains six basic templates: for fixed, fluid, one-column, two-column and
  three-column layouts, as well as a jQuery template.
  
• href="http://kilianvalkhof.com/2008/css-xhtml/introducing-sencss/">Introducing
  SenCSS
  A clean, minimal CSS template for new projects.
  
• Typogridphy
  Typogridphy
  is a CSS framework constructed to allow Web designers and front-end developers
  to quickly code typograhically pleasing grid layouts.
  
• href="http://code.google.com/p/formy-css-framework/">formy-css-framework
  A
  CSS Framework for better form management.
  
• emastic
  Emastic is a CSS
  Framework. Its continuing mission: “to explore a strange new world, to seek out
  new life and new Web spaces, to boldly go where no CSS framework has gone
  before.”

CSS Bookmarklets

• Design
  Bookmarklet
  Design is a suite of Web design and development tools that
  can be used on any Web page. Encompassing utilities for grid layout, measurement
  (rule) and alignment (unit, crosshair), Design is a powerful and useful
  JavaScript bookmarklet.
  
• ReCSS: Reload your
  CSS
  This little bookmarklet makes refreshing your CSS a breeze. It comes
  in quite handy when you’re developing dynamic applications. Tested in IE and
  Firefox.
  
• XRAY
  A bookmarklet for
  Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari,
  Firefox, Camino and Mozilla). You can use it to see the box model of any element
  on any Web page.
  
• MRI
  MRI is a bookmarklet for
  Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari,
  Firefox, Camino and Mozilla). You can use it to debug and test selectors.
  
• CSSFly
  A tool for editing websites
  easily, directly and in real-time in your browser.
  
• href="http://www.webresourcesdepot.com/15-must-have-bookmarklets-for-web-designers-and-developers">15
  Must-Have Bookmarklets For Web Designers And Developers
  An extensive list
  of 15 handy Web designer and developer bookmarklets. The whole pack can be
  downloaded and imported into Firefox.

Tools For Generating CSS Layouts

• Construct Your CSS
  A
  visual layout editor based on Blueprint and jQuery. A href="http://www.constructyourcss.com/tutorial.html">video tutorial is
  available as well. You can use the keyboard to create layouts on the fly. By
  Christian Montoya.
  
• XHTML/CSS Markup
  Generator
  Markup Generator is a simple tool created for XHTML and CSS
  coders who are tired of writing boring frame code as they just begin slicing
  work. Its main purpose is to speed up your work by generating (X)HTML markup and
  a CSS frame out of very intuitive, shortened syntax, so that you can jump
  directly to the styling of elements.
  
  
  

  alt="Markup Generator" src="http://88.198.60.17/images/useful-css-tools/mg.gif"
  width=497>

  
  
• Dynamic Layout Generator
  This
  tool generates cross-browser multi-column liquid designs and
  enables you to visually change the width and colors. You can drag the sliders to
  choose the width you want in your layout and preview the layout online. The CSS
  code is generated automatically.
  
• iStylr - Online CSS Template
  Generator
  An advanced WYSIWIG online CSS-editor with syntax highlighting,
  drag’n'drop-functionality, template import/export, image manager, stylsheet
  sharing option and a visual DOM tree. A registration is required (OpenID-login
  is supported).
  

  src="http://78.46.108.98/images/useful-css-tools/ist.gif" width=500>
  

Blank CSS Layouts

• href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The
  Only CSS Layout You Need
  A collection of basic cross-browser layouts.
  
• href="http://www.code-sucks.com/css%20layouts/faux-css-layouts/">Faux-Column CSS
  Layouts
  There are a total of 42 faux-column CSS layouts for downloading.
  All markup has been validated against a strict Doctype.
  
  
  

  height=285 alt="Faux Column CSS Layouts"
  src="http://88.198.60.17/images/useful-css-tools/fw.gif" width=492>

  
  
• href="http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/">Fixed-Width
  CSS Layouts
  There are a total of 53 fixed-width CSS layouts for
  downloading. All markup has been validated against a strict Doctype.
  
  
  

  href="http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/">height=286 alt="Fixed Width CSS Layouts"
  src="http://78.46.108.98/images/useful-css-tools/fw2.jpg" width=502>

  
  
• ___layouts
  The
  foundational ___layouts file offers five preset page widths, the option to have
  a fixed width or a text “zoom”-style scaling effect and two core templates that
  give you the ability to nest subdivided regions of one to four columns. The
  framework supports fluid-width layouts and fixed-width layouts.

CSS Layouts

• href="http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/">100
  Free High-Quality XHTML/CSS Templates
  In this post, we showcase 100 free
  high-quality templates. Hopefully, some of them will save you some time in your
  design and development. While they are generally free for personal or commercial
  use, always remember to check the license first for any restrictions or
  guidelines.
  
• href="http://dzineblog.com/2008/07/45-excellent-free-web-templates.html">45
  Excellent Free Web Templates