- You are here:
- WebsiteTips Home
- Web Site Resources
- Markup, Code
- CSS
- CSS Tools
CSS - Cascading Style Sheets
CSS Tools - Editors, Reference Charts, Validators, and More
The CSS Tools section below includes links to CSS editors / CSS editing software, CSS reference charts, validators, tools to generate CSS automatically, and more.
IE7 CSS Hacks, IE8 CSS Bugs, Bug Fixes, Solutions: Wondering what to expect with CSS and Internet Explorer 8? Want some information about conditional comments? Looking for IE7 CSS hacks? Going nuts with a browser problem with your CSS? Check out Solutions to CSS Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform CSS Issues.
On this page:
- Dedicated CSS Editors and Other CSS Editor Links Resources
- CSS Reference Charts, Tables
- CSS Pixels to EM Conversion Calculators
- CSS Selector Meaning Tools
- Automated CSS Generating Tools
- CSS Validating Tools
Also within CSS - Cascading Style Sheets:
- CSS - Cascading Style Sheets Home
- W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
- CSS Tutorials, Articles (6 pages)
- Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, Cross-Browser, Cross-Platform CSS Issues (1 page)
- CSS Sites, Resources, and Books (1 page)
- CSS Templates (1 page)
- CSS Discussion Lists, Newsgroups (1 page)
More Tools, Software within Web Site Resources
Dedicated CSS Editors and Other CSS Editor Links Resources
Dedicated CSS Editors
See also HTML
HTML Tools Web Authoring / HTML Editors for more helpful editors for your Web site.
- Coffee Cup Style Sheet Maker, by CoffeeCup Software, Inc.
Rated 5 stars with ZDNet, and other rave reviews. Helpful program for PCs for creating and editing style sheets for your website. Same company as the Coffee Cup HTML editor. Download trial or purchase available. [Software by CoffeeCup Software, Inc.] - CSSEdit, by Macrabbit
CSS Editor for Mac OS X 10.2 or higher. Plenty of rave reviews and highly regarded among Mac users. Try the demo version or buy the full version from their Web site. See also an interview of its creator, Jan Van Boghout, by Veerle. [Software by Jan Van Boghout, Macrabbit.] - Style Studio CSS Editor, by OverZone Software
Full-featured CSS editor, plenty of features, reasonably priced. For Windows.[Software by OverZone Software.] - Style Master by Westciv, John Allsopp.
Pro version also available for both PCs and Macs. Trial demo and purchase at the site. Given ZDNet's 5-star rating. Highly regarded popular program, strong reputation, solid company. For Windows and Mac. - TopStyle CSS, HTML, XHTML Editor, by NewsGator Technologies, Inc. (formerly by Bradsoft)
by Nick Bradbury, who also created Macromedia HomeSite and FeedDemon. Top-rated editor for PCs (5 stars with ZDNet, PCMagazine, CNet, more). Integrates seamlessly with Macromedia HomeSite, Macromedia Dreamweaver, CSE HTML Validator, NoteTab, and others. The Lite version is already included in HomeSite (and possibly other programs, too). Popular program with Web site developers. Highly recommended by WebsiteTips.com and used for this Web site. Download trial or purchase online. There's also a fabulous online forum for TopStyle — see WebsiteTips.com's Online Forums on TopStyle section. [Software by NewsGator Technologies, Inc. (formerly by Bradsoft).]
Other CSS Editor Links Resources
- CSS Editors: Recommended CSS Editors
Fabulous listing of recommended dedicated CSS editors and recommended text editors for Windows, Mac, Linux, and multi-platforms. [Listing by CSS Wiki.]
CSS Reference Charts, Tables
See the annotated links below for helpful CSS reference charts on CSS bugs, CSS browser support charts, and more.
Wondering which fonts are installed in most people's computers, whether Windows, Mac, Linux, etc? Check out Cross-Browser, Cross-Platform Font References, Information for helpful font charts, listings of fonts included in various software and operating systems, and more.
- CSS Bugs and Workarounds
Fabulous chart with workarounds from the CSS Pointers Group. Editor note February 2006: This site was taken over by GreyTower Technologies October 2005 with new volunteers, so info should now be updated before long. [CSS Pointers Group, css.nu] - CSS Cheat Sheet
Fabulous cheat sheet and CSS reference chart. Also designed to print easily. Covers syntax, general CSS, fonts, text, box model, borders, positioning, backgrounds, and lists. Well done. [Provided by Leslie Frank.] - CSS Enhancements in Internet Explorer 6
Microsoft's documentation about enhancements for IE6 for CSS, including more support for CSS1, the !DOCTYPE "Switch" and much more. 14 printable pages, and a helpful reference for IE6. [03/2001 by Lance Silver, Microsoft Corporation] - css filters (css hacks)
Helpful chart via centricle.com showing CSS filters or hacks to hide or allow various browsers and platforms. “Will the browser apply the rule(s)?” Includes links and information for each one, resources. [04/21/2003 by centricle.com] - CSS Master Compatibility Chart
Great chart by Eric Meyer, indicating browser compatibilities for specific values and properties of CSS, has notes, more. Great reference. [Dated 2001 by Eric Meyer.] - CSS Shorthand Guide
Covers all the CSS shorthands and includes examples with brief explanations. Fabulous reference. [Article/tutorial dated 10/23/2005, by Dustin Diaz.] - CSS Style Properties
From Project Cool Developer Zone. Excellent chart for older browsers (version 3 and 4) that summarizes the 5 style properties of supported CSS. Designed to quickly scan, the chart indicates browser compatibilities, incompatibilities. (FYI: the 5 style properties are Text, Font, Color and Background, Placement, Classification.) [projectcool.com] - CSS1 and CSS2 Browser Support
by WestCiv. This chart is very thorough and covers Netscape 4 and 6, Internet Explorer 4, 5, 5.5, 6, Opera 3 and 5, WebTV 1 for Windows, Mac. [WestCiv.com] - CSS2 Reference
W3Schools' CSS2 reference chart. Helpful chart includes property, description, values, browser support, W3C recommendations, links to online examples and more details, too. [W3Schools.com] - CSS 2 Tests
Peter-Paul Koch's fascinating tests and results with documentation, screen shots, and more. Currently includes CSS2 selectors, declarations, and a compatibility chart for Netscape 4.x and 6, IE 4, 5 and 6, Opera 5, and Konqueror. [Tests by Peter-Paul Koch] - Float Containing Rules By Browser
Helpful chart that “shows which rules cause a container to clear its floats in each of the main browsers.” [Article/tutorial dated 10/12/2006, by Ed Eliot.] - Summary Chart: How to hide CSS from buggy browsers
by Johannes Koch. Excellent chart for quickly viewing the workarounds for various browsers, with links to how to implement them. [by Johannes Koch]
Books on CSS
Recommended by WebsiteTips.com
See more CSS books, read reviews, why we recommend each book
In association with 
CSS Pixels to EM Conversion Calculators
- EM Calculator
Fantastic online tool to take the guesswork out of converting CSS pixel units to em units - “a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.” [EM Calculator by Piotr Petrus ('Riddle').]
CSS Selector Meaning Tools
- SelectORacle
by the Opal Group (by Kevin Jacobs, coding and expertise, Eric Meyer, CSS guru). Input complex CSS selectors and this tool will translate it for you to understand it. [Tool by Eric Meyer and Kevin Jacobs, the Opal Group]
Automated CSS Generating Tools
The tools below are great as learning tools or to use the CSS and markup generated automatically. Well worth checking out!
Automated CSS List, Menu Generating Tools
- Colly's CSS rollover generator
You can create two distinct styles of rollover button, using CSS and just one image. Or you can create a standard CSS button with no text or background space. [CSS rollover generator by Simon Collison, colly logic.] - Listamatic
Using CSS and simple HTML lists, there are seemingly endless possibilities. Listamatic provides step-by-step instructions with well-written explanations so that you can learn all about how to create them yourself. This includes vertical and horizontal (inline) lists, and with or without images for bullets, or with or without bullets at all. In addition, though, is Listamatic's list auto-generator that will create your list markup for you. In addition are links to resources about CSS lists. Fantastic. Highly recommended. [Listamatic is by Russ Weakley, Max Design.] - Listamatic 2
Adding to the above already fantastic Listamatic is Listamatic 2 that adds nested lists capability. Now there are even more seemingly endless possibilities! You'll find many different examples here along with the markup and CSS on how to do it for both vertical and horizontal nested lists. Just like Listamatic above, each has been cross-browser, cross-platform tested. In addition are links to resources about CSS lists. Also fantastic and highly recommended. [Listamatic 2 is by Russ Weakley, Max Design.]
Automated CSS Page Layout Generators
- CSS Creator: CSS Page Layout Generator
Create a CSS layout by selecting the structural elements for your layout needs, such as a header, a footer, and columns. You can also specify a size in the field provided and choose a background color from the color chooser. You can also choose yourDOCTYPE, page alignment, widths, more. Helpful tool for learning, for using as basis for your page layout, or both. [Page Layout Generator Version 2, dated 08/03/2005. By Tony Aslett, CSS Creator.] - Layout-O-Matic
Cross-browser compatible CSS layout generator with a wide range of choices - no columns, 1, 2, or 3 columns; choose your colors, widths, and more, and this tool will generate the layout and CSS for you. [Page layout tool dated 2003, by InkNoise.]
Automated CSS Sprites Generators
- CSS Sprites Generator
Upload your image(s) to have this free tool create your CSS sprites code automatically generated. See also CSS Sprites generation tool where the author explains this tool. [CSS Sprites Tool dated 07/2007 by Stoyan Stefanov, phpied.com.]
See also CSS Tutorials CSS Sprites: “Sprites” Method of HTML Lists and CSS for more on CSS sprites.
CSS Validators
- W3C CSS Validation Service
Validate your style sheets either at the site or download it to your own computer. Fabulous FREE service.- W3C CSS Validator FAQ
Answers to common questions about the W3C CSS Validator, including what some of the errors mean with links to more information.
- W3C CSS Validator FAQ
- CSE HTML Validator
Integrates within Macromedia HomeSite, Bradsoft TopStyle, and several other programs. Also stands alone as an HTML validator or syntax checker, CSS validator, link checking program, spelling checker, too. Numerous settings for types of validation, and highly customizable. Easy to use, great program. Highly recommended by Websitetips.com. Try this free online version of CSE HTML Validator Lite to validate a document:Editor note: I've used CSE HTML Validator every day for my Web work since its inception in 1997. An especially great feature is its batch processing, available in the CSE HTML Validator Professional Edition, that will validate an entire website. I also batch process an entire site using a combination of validation, link checking, and spell checking. I rely on this fabulous tool every single day. (Disclaimer: I'm not paid to promote CSE HTML Validator - I'm just a happy customer.)NEW! Check your document online with CSE HTML Validator Lite. Add this to your site.
- CSS Check
WDG's online validator for CSS. You can check online Web pages or files from your own computer. Very friendly approach to its reports, and provides hints and warnings as well as errors.
