Quicklinks for this page:

Why use CSS?
Tutorials & Guides
Resources, Templates, misc. freebies
Validators

Why use CSS?09/19/01

This site provides reasons for and against CSS.

Tutorials & Guides: (reverse order of date)

CSS Quick Reference: A list of properties all on one page includes "only the CSS features that work in most browsers."12/01/07

Position Is Everything: "We're Big John & Holly Bergebin, and together we built this site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes." 12/01/07

Bravenet CSS Reference Sheet: What I like about this one is how thorough it is -- each entry (1) explains the property, (2) gives a list of all possible values for it (3) gives an example of how to use it. Excellent for beginners and beyond. 01/24/06

CSS How-To: from Intensivstation. The site also has a Templates section. 12/02/05

Ten CSS tricks you may not know: I've been using CSS for quite a while. But I learned a few new tricks on this webcredible site. NOTE that near the bottom of the page there's a link to some other CSS resources, including Ten more CSS tricks you may not know. 09/12/05

Creating CSS Design from scratch: From the Informit.com's Web Design Reference Guide: "Even for experienced Web designers, creating a site in CSS for the first time can be a daunting task. In this tutorial, I'll help you face your first CSS site design without fear by breaking the process into three easy steps, starting with a blank canvas and finishing up with a fully functioning Web site. I used this very process to create an existing site, which I'll discuss more later in this guide." 09/01/05

CSS Panic Guide: Also entitled A Guide For The Unglued. :) "This is not a complete resource, this is a fast resource. These are the sites that I refer to first, and that I tell people to read. When you want more, just about all of them have their own links to good sites." 06/25/05

Modular CSS: by Mike Stenhouse at Content With Style. I'd never thought of this concept before, and it seems to be a good approach to simply life in the CSS lane. "This isn't a new idea but looking at people's code it doesn't seem to be a particularly widely used practice: modular CSS. That's a poncy name for the very simple idea of grouping related styles into separate stylesheets. The same set of tasks turn up on project after project and a little careful thought can save hours of foundation work, allowing you to get on with the serious business of turning a flat design into a web page far more quickly. The broad groups that I use are: typography, forms, layout, navigation and colour." 05/24/05

Index DOT CSS ~ Advanced CSS Reference: 05/01/05

How To Create Columns With Div's: "When we...started using div's rather than table for web page layout, the most daunting experience for me was how to create columns using div's. So, here is the solution for all those website developers who are struggling to use div's for web page layout." 01/03/05

Complete CSS Guide: (click this link, then use their menu on the right) 12/25/04

BROWSER COMPATIBILITY CHART for CSS Properties "...shows all CSS1, CSS2 and Internet Explorer CSS extensions and grades the level of support each recieves in a given browser." Covers IE, Netscape, Mozilla, Opera, Kong, Safari, Mac IE, etc. 11/05/04

CssDiscussWiki: "Specifics, the nitty-gritty of writing good stylesheets." "The css-discuss Wiki is a companion to the CssDiscussList mailing list [see next entry below]. Among other things the wiki serves as a collective long-term memory for the list participants." 11/09/04

CssDiscussList "is a mailing list for the discussion of Cascading Style Sheets, a powerful standard for adding presentational information to HTML pages." 11/09/04

CSS Boxes: "This is a Problem & Workaround Set for a series of CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations. There are also some relevant content placement issues that affect box positioning, a little gem of a bg image problem or two, and my own explanation of what it's all about. What this isn't, is a how-to for CSS layout. This is a how-to for dealing with the misinterpretations of our current browsers. If you're new to CSS, this is a better place to start." 10/30/04

Ten CSS tricks you may not know: Yup, it's true, I didn't know some of them and they're useful tips. 09/03/04

I love this site! I learn so much here! Mandarin Design is full of CSS tips n tricks, complete with illustrations of the effects of their code. For example, they showed me the code for the shadowed text above and the highlighted box (all done with CSS!). The published purpose is to help people jazz up their blogs, but of course the CSS code could be used on any webpage for effect. 03/14/04

CSS Cheatsheet: Covers all the basics in a clear format that also prints out nicely to create handy reference pages. 04/11/04

CSS Creator.com - Resource Kit: A blurb from Lockergnome's newsletter says, "The CSS Creator Web site is a good place to start for the beginning CSS enthusiast. ... The CSS Creator Web site has a forum where you can interact with other CSS writers and get help when the light seems the darkest. ... The CSS Creator site also has a cool little menu builder that you can snag for use on your Web site as well as the more robust CSS Creator itself which lets you enter in all your parameters for your Web page and builds your CSS for you on the fly. A godsend for the CSS newbie who is looking to learn by trying." 02/26/04

CSS Reference at Index DOT CSS: "The Advanced CSS Reference" [recommended by Bernie Kirkey] 11/11/03

**W3Schools:

• CSS "try it" Examples page: Enter your text and try out CSS properties, see the results instantly on their page. My online instructor says, "I STRONGLY recommend spending some time playing with the "try it" here. You can see immediate results from the changes that you make in the css to really fine tune your learning experience." 12/02/07
• Great CSS tutorials and guides: Plus some very clear resource files for CSS elements. 03/31/04

Tutorial: CSS Cursors: Change the look of the cursor at your site using CSS. Whoever woulda thought! 04/01/04

Tutorial: Adding A Touch Of Style: EXCELLENT tutorial Dave Raggett

Tutorials from W3Schools: some

Tutorials: from 'HTML Goodies' - excellent tutorials!

Tutorials: Designing for the Web: an online book by Håkon Wium Lie and Bert Bos

Tutorials by CSSMaxDesign: How to make Lists (background image lists, rollover lists, nested lists and horizontal lists, nested lists) and Float elements (floating images, images with captions, next and back buttons, drop caps, inline lists and more). Clearly illustrated and easy to understand. 10/18/03

/CSS/ - a guide for the unglued: "This is not a complete resource, this is a fast resource." I like this guy's approach. Examples: "Access is not about adding wheelchair ramps to existing pages. It's about getting your page right in the first place." and "Our browsers suck. Just thought I'd mention that. If it was only a question of learning CSS and applying it, there'd be no reason to panic. But years of lousy standards support by the browser companies has made CSS a study in heartbreak. Most of your time will be spent trying to solve browser trouble." 01/04/02

CSS Creator: "...a CSS generator which you can use to create styles and test them on your site." It's both a good learning tool and a way to easily experiment with your preferences in color, style, etc. with instant webpage visual feedback. You can then generate the CSS code for your selections. The site also hosts discussion forums so you can get help when you need it. 09/07/03

**CSS Tutorials: the ones my CSS teacher refers me to for examples and details

**CSS Properties Index with links to illustrations, details: another site from my CSS teacher

**CSS Tutorials: another from my CSS teacher

**CSS List of Properties: from the site above

**CSS Information: another site from my CSS teacher

**CSS Reference: I like this one for ease of use! atProject Cool, Developer Zone

**CSS Tutorials from Web.Blazonry: EXCELLENT as a resource/guide too. 03/21/05

TabbedNav Menu: If you're not into CSS coding and just want to reproduce the look, this one seems a little simpler to understand than the one above. 09/23/03

Resources, Templates, misc. freebies (alpha order)

Backgrounds: At Web.Blazonry, a page all about CSS background properties. 03/21/05

Boxes using CSS: Boxes; column arrangments; doing "table" formats without table tags. Woweee there's some good stuff here. 03/21/05

Boxes - page layout in boxes, using CSS: Same guy as above. Fully illustrated page layouts, and complete code included. 01/04/03

Clash of the Style Sheets: "When two or more styles apply to the same page element, which style wins? The answer [in this NetMechanic article] helps explain why they're called "Cascading" Style Sheets." 08/28/02

CSS Beauty: "A project focused on providing its audience with a database of well designed CSS based websites from around the world. Its purpose is to showcase designers' work and to act as a small portal to the CSS design community." 12/01/07

CSS Edge: "The goal here is to find ways to make CSS live up to its fullest potential with only minimal regard to browser limitations." 12/01/07

CSS Type.com: Generate code visually. Create a box of type using their online element selectors, including font, size, color, etc. See your selection results right on screen. Then click to generate the CSS code for it. 11/12/07

CSS Vault: A site of resource links to inspiring websites done entirely with CSS. The site also has a blog that covers CSS topics, tips, tricks, ideas, etc. 12/01/07

Browser Incompatibilities with CSS: Excellent article with solutions - recommended read by my CSS/Dreamweaver teacher! 09/29/01

Bugs and workarounds: Pointers' Group

Cascading & Inheritance: a very clear explanation with visual examples. Helps to understand the two concepts.

Checker: Web Design Group's CSS Checker (input your URL or copy and paste your style sheet)

EclipseStyle (free CSS software): EclipseStyle puts other stylesheet editors to shame with its features such as a preview window, intuitive tabbed interface, and much more. It even includes an introduction to stylesheets if you are unfamiliar, as well as complete tutorials and references to the EclipseStyle interface. EclipseStyle also features a code window for seeing what your style looks like in good old CSS code, automatic organization of your existing stylesheets, and extracting stylesheets from existing web pages. 10/22/03

Iconico Online Dynamic CSS Editor: Edit in your browser & capture the code. This CSS Editor allows you to edit an entire CSS file at once with a dynamic preview shown as you work. The preview will show the exact line you're editing, and it will update as you type. Works on modern versions of Internet Explorer, Firefox (Mac and PC), Safari, Mozilla. 12/29/05

IE 6.0 Headaches with CSS? A tips article from Netmechanic. 11/28/01

IE6 - New CSS rules: (from Netmechanic): 01/11/02

Layout Reservoir: "Please feel free to borrow, steal, abduct, and/or torture the documents contained in the Layout Reservoir." 01/03/05

Pointers Group: Information, examples, links

Properties: Web Design Group's excellent properties list

Property Index: extensive alphabetical listing

Properties, values, with examples: Project Cool

Rapid CSS Editor:" With Rapid CSS Editor 2004 you can quickly and easily create and edit cascading style sheets of any complexity. You can write the style sheet code manually or let the program do it for you. In each case it is easy because of various helpful functions like auto complete and code inspector. Results are shown instantly using built-in preview. Rapid CSS is also an HTML editor and it makes CSS powered HTML editing a snap." 11/05/04

Resource URLs: A big (BIG) resource page full of URLs about CSS

Simple CSS — A Free CSS Authoring Tool: "Runs on both Mac OS X as well as Windows computers. Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface." 01/17/04

Style Templates: "... this is like peeking at the answers at the back of the book. Some of these styles are like low hanging fruit, ready to pluck and use. Others take a little work to adapt. And some even let you specify a couple of things on a form, turn a crank, and out comes your styles. So you've got no excuse for building nasty, unmaintainable web pages any more. Let's get stylin! " 04/10/05

Stylesheet Guide: WebMonkey

StyleSheets for free: from RichInStyle.com. Free info, bugs, good stuff for beginners & advanced

Tables - Replacing Tables with CSS: A topic-specific discussion forum. 09/07/03

Tables - Practical CSS Layout: I just read "Tables are dead, CSS is the new standard" for creating page layout. In this article, read how "Advanced CSS layout techniques empower you to do what you thought could only be done with HTML tables." 12/02/02

Techniques, Resources, Tutorials, Templates ~ CSS: An excellent all-in-one page; includes permission to "steal" any code at the site. 08/19/03

Templates with no tables: from MaxDesign. 10/18/03

Templates: from Intensivstation. The site also has a How-To section. 12/02/05

Web Developers Toolbar: This FREE browser plugin/toolbar/extension was recommended by a fellow online student. She said, "It adds a toolbar to your browser that gives you all kinds of control of cookies, CSS, forms, images, page and code source, etc. You can have it outline areas of CSS, tables and such on your page to help figure out how it was constructed. It will display all sorts of info such as HTML items, JAVA, links, META data, etc. You can disable CSS on a page to see what it looks like without the styling. It has validators for CSS, HTML and links. You can view the CSS split screen with the actual page to see how things are defined (both linked and embedded css). There are three little icons on the right side of the toolbar that give you a quick visual on whether the page you're viewing is standards compliant, has CSS errors or JavaScript errors. The list goes on and on. Take a look... can't beat the price!" 12/02/07

Zen Pages - CSS examples: Taking exactly the same information and elements, this site gives several beautiful examples of what can be done with CSS. The code for each is the same; the changes are made by changing the external style sheet. Awe inspiring. 08/14/03

Validators:

W3C CSS Validation Service for TEXT: A free service that checks CSS code (copy and paste to site).

W3C CSS Validation Service for DOCUMENTS: A free service that checks Cascading Style Sheets (CSS) in (X)HTML documents or standalone for conformance to W3C recommendations.