What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, 'the look' and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG, XUL and others.
CSS is designed primarily to enable the separation of document content from document presentation, including but not limited to elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce clutter, complexity and repetition in the structural content.
CSS Essentials
CSS 1.0 | CSS 2.1 | Current Work | What's New
Getting Started with CSS
- An Introduction To CSS - Adrian Senior.
- Bare Bones, No Crap, CSS Text Control Primer - Wendy Peck.
- Cascading Style Sheets Made Easy - Taylor Anderson.
- Complete Guide to all of CSS - John Allsopp.
- Converting a Page to CSS - J. David Eisenberg.
- CSS Beginner's Guide - Patrick Griffiths.
- CSS Intermediate Guide - Patrick Griffiths.
- CSS Advanced Guide - Patrick Griffiths.
- CSS Based Design - Jeremy Keith.
- CSS Is Easy! - Kevin Yank.
- CSS Tutorial - w3schools.com.
- CSS tutorial: Starting with HTML + CSS - Bert Bos.
- Getting Started with Cascading Style Sheets - Miraz Jordan.
- Getting Started with CSS - Rachel Andrew.
- Introduction to Cascading Style Sheets - Christopher S L Heng.
- Stylesheets - Ross Shannon.
- The Early Bird Catches the CSS: Planning Structural HTML - Virginia DeBolt.
- Writing Efficient CSS - John Gallant and Holly Bergevin.
CSS Reference Guides
- CSS 1 Properties - Web Design Group.
- CSS Properties - Patrick Griffiths.
- CSS Crib Sheet - Dave Shea.
Presentations
- Designing with CSS: Past, Present, and Future - Dave Shea.
- Zen and the Art of Web Improvement - Dave Shea.
- Pushing Your Limits - Douglas Bowman.
- The Beauty and Business of CSS - Douglas Bowman.
Recommended Reading
CSS: The Definitive Guide
CSS: The Definitive Guide, 3rd Edition, provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, lists and generated content, table layout, user interface, paged media, and more.
View Book Cover | View Sample Chapeter (PDF) | Buy Now
Transcending CSS: The Fine Art of Web Design
In this groundbreaking book, you'll discover how to implement highly original designs using markup and CSS. As someone who understands the creative possibilities, author and designer Andy Clarke offers visual designers a progressive approach to creating artistic, usable, and accessible sites using transcendent CSS.
See also: CSS Artistry: A Web Design Master Class
Favorite Sites (with useful info about CSS)
- MeyerWeb - Eric A. Meyer.
- Position Is Everything - John Gallant.
Assorted Articles About CSS
The articles have been broken down into the following categories:
- Alternate Style Sheets
- Backgrounds & Borders
- Browser-Related Articles
- Forms (Styling Forms)
- Inheritance & Specificity
- Image Replacement
- Lists, Menus & Tabs
- Media Type
- Optimization
- Positioning
- Selectors
Alternate Style Sheets
- Alternate Style Sheets and Media Types - Mike Hall.
- Invasion of the Body Switchers - Andy Clarke and James Edwards.
- Invasion of the Body Switchers: The Director's Cut - Andy Clarke.
- Style Sheet Switching - Gez Lemon.
- Turbo-Charged Style-Sheet Switcher - Jim Byrne.
Backgrounds & Borders (CSS3 Topics)
- CSS 3 Backgrounds and Borders Module - W3C Working Draft 16 February 2005.
- CSS 3: The New Frontier - Dante Evans (AKA Sean M. Hall).
- Dynamic HTML Lab: Fun with Mozilla Border Radii - Peter Belesis.
Browser-Related CSS Articles
- CSS bug table - RichInStyle.com.
- Bug Report - Latest reports - Peter-Paul Koch.
- Cross-browser style - Part of RichInStyle's master class.
- CSS1 and CSS2 Browser Support - Westciv.
- CSS2 tests and compatibility chart - QuirksMode.
- CSS3 Tests: Compatibility Tables - Sean M. Hall.
- CSS Enhancements in Internet Explorer 6 - Lance Silver.
- CSS Support Could Be Internet Explorer's Weakest Link - Mary Jo Foley and Ryan Naraine.
- css filters (css hacks); Will the browser apply the rule? - Centricle.
- CSS Support in Safari - Apple.
Forms (Styling Forms with CSS)
- Accessible, stylish form layout templates - Cameron Adams.
- Applying CSS to forms - Trenton Moss.
- Creating form layouts using CSS - Andy Budd.
- Form Highlighting Rudex - Ryan Brill.
- Fun with forms - customized input elements - Soren Madsen.
- PerFORMance with CSS - MaKo.
- Real World Style Forms - Mark Newhouse.
- Style Web Forms Using CSS - Rachel Andrew.
- Sylish Buttons - M. C. Matti.
- Styling Form Controls - Roger Johansson.
- Styling Even More Form Controls - Roger Johansson.
- Stylin' Forms - Meryl Evans.
- Styling Form Fieldsets, Legends and Labels - Petr Stanicek.
- Stylish, accessible forms - Andy Clarke.
Inheritance & Specificity in CSS
- Cascade - 6.4, CSS2 Specification.
- Calculating a selector's specificity - 6.4.3, CSS2 Specification.
- Cascade and Inheritance - John Allsopp.
- Banking on CSS Inheritance - Dave Sawyer McFarland.
- CSS Inheritance by Brian Wilson.
- CSS Inheritance - Dan Cederholm.
- Inheritance and Cascade - Mike Hall.
- Inheritance: Friend And Foe - Eric A. Meyer.
- Link specificity - Eric A. Meyer.
- Specificity - Mike Hall.
- The Cascade by Brian Wilson.
Image Replacement
- Facts and Opinion About Fahrner Image Replacement - Joe Clark.
- Image Replacement Considered Evil - Patrick Griffiths.
- What do you think about the various image replacement methods? - John Allsopp.
- How to Use CSS for Flickerless Image Replacement - Stu Nicholls.
Lists, Menus & Tabs + Styling Navigation with CSS
Lists
- A Navbar Using Lists - Maxine Sherrin.
- Flowing a List Across Multiple Columns - Paul Novitski.
- Clickable Link Backgrounds - Dan Cederholm.
- CSS Design: Taming Lists - Mark Newhouse.
- Definition lists - misused or misunderstood? - Russ Weakley.
- Do You Want To Do That With CSS? - Multiple Column Lists - John Gallant, Holly Bergevin.
- Listamatic - Russ Weakley.
- Listamatic2 - Russ Weakley:
- More than Just Bullets - Brian Huisman.
- Turning a List into a Navigation Bar - Roger Johansson.
- Spruced-Up Site Maps - Kim Siever
Menus
- Structure your menus by marking them up as lists - Jim Byrne.
- The CSS Anthology: 101 Essential Tips, Tricks and Hacks: Chapter 4 - Navigation - Rachel Andrew.
- Multiple Column Lists - Zoe M. Gillenwater.
- Remote Control CSS - Russ Weakley.
- Remote Control CSS Revisited - Caving in to peer pressure - Russ Weakley.
- Remote Control CSS Revisited - Russ Weakley.
Tabs
- CSS and Round Corners: Build Accessible Menu Tabs - Trenton Moss.
- CSS Tabs - Joshua Kaufman.
- CSS tabs with Submenus - Kalsey.
- Rounding Tab Corners - Eric A. Meyer.
- Simple CSS Tabs - Daniel Burka.
- Styling Nested Lists - Dan Cederholm.
- Tabtastic - Gavin Kistner.
Media Type
General
- Defining CSS Media Types - Chuck Musciano.
- Media Types and Their Uses - Stephanie Sullivan.
Aural
- Aural Cascading Style Sheets - W3C.
- Content Cueing: Filmstrip Flashback - Chuck Musciano.
- CSS2 Audio Features - Chuck Musciano.
- Finding Your Voice - Chuck Musciano.
- Sound of Music: Background Sound with CSS2 - Chuck Musciano.
- Stylesheets for Speech Synthesisers - css-discuss Wiki.
Handheld
- 7Steps to Better Handheld Browsing - Simon Collison.
- HTML and CSS for Mobiles - Patrick Griffiths.
- Pocket-Sized Design: Taking Your Website to the Small Screen - Elika Etemadand Jorunn D. Newth.
- CSS3 Paged Media Module - W3C Working Draft 18 December 2003.
- Breaking Pages - Chuck Musciano.
- Even More CSS2 Printing Power - Chuck Musciano.
- CSS2, Printing and You - Short guide to creating printer version of a site using CSS2.
- CSS Media types and printer friendly pages - javascriptkit.
- Kissing Print Versions of Pages Goodbye - Lachlan Cannon.
- Paged Media properties for CSS - W3C.
- Print This! - Chuck Musciano.
- Printing with style - Lachlan Cannon.
- Printing - John Allsopp.
- Printing the Web - James Kalbach.
- Printing Web documents and CSS - Jim Wilkinson.
- Specifying page breaks for printing using CSS - Website Abstraction.
- Using CSS to Create "Easy Print" Pages - Eric A. Meyer.
- Using CSS to specify print-versions of your web page - John Miller.
Optimization
- CSS Shorthand at a Glance - Alejandro Gervasio.
- CSS Shorthand Properties By Trenton Moss.
- Efficient CSS with Shorthand Properties - Roger Johansson.
- Writing Lean CSS - Steve Smith.
Positioning & Layout
General
- Visual formatting model - W3C.
- A Simple Introduction to 3 Column Layouts - John Oxton.
- Absolutely Fixed Position - Relatively Speaking - Chuck Musciano.
- Absolute Layouts - css-discuss Wiki.
- Absolutely Relative - Joe Gillespie.
- Making the Absolute, Relative - Doug Bowman.
- Page layout properties - John Allsopp.
- Position This! CSS Positioning Demystified - Molly Holzschlag.
- Positioning and the Cascade - Dave Shea.
- Positioning Properties At-A-Glance Guide - Nigel Peck.
- Positioning Web Elements in the Background Using CSS - Eric A. Meyer.
- The Basics of Positioning - Adrian Senior.
- The layout is dead, long live the layout! - Maxine Sherrin.
The Box Model
- 3D CSS Box Model - Jon Hicks.
- Block vs. Inline, Part 1 By Tommy Olsson.
- Box model
- Box lesson - Owen Briggs.
- Box Model Hack - Tantek Celik.
- CSS Validator (Changes the Rules) is Broken - Jeffrey Zeldman.
- CSS validator bug - box model hack - Kynn Bartlett.
- It's All About Boxes - Simon Jessey.
- Little Boxes - Owen Briggs.
- Margins and Padding - Douglas Livingstone.
- The CSS box model - Al Sparber.
- The Box Model Problem - Holly Bergevin.
Centering
- Centering Block Elements - css-discuss.
- Centering using Cascading Style Sheets - David Dorward.
- Centering things - W3C.
- CSS Centering 101 - Dan Cederholm.
- Do You Want To Do That With CSS? Centering a Wrapper - John Gallant and Holly Bergevin.
- Colored Boxes - Russ Weakley.
- CSS columnar layout tool - CSS Enterprise.
- CSS Positioning - Mike Hall.
- CSS Positioning - Jennifer Kyrnin.
- CSS Positioning Properties At-A-Glance Guide - Nigel Peck.
- DIV Based Layout with CSS - Alejandro Gervasio.
- Effect of z-index value to RP and AP blocks - Aleksandar Vacic.
Inline Layout
- Inline Formatting Model Summary paper - Eric A. Meyer.
- line-height - Brian Wilson.
- Proposals: the inline box model - richinstyle.com
- vertical-align - Brian Wilson.
- Introduction to CSS Positioning Properties Part 1 - Alejandro Gervasio.
- Introduction to CSS Positioning Properties Part 2 - Alejandro Gervasio.
- Introduction to positioning with CSS - John Allsopp.
Floats
- Contained Floats - Tony Aslett.
- Containing Floats - Eric A. Meyer.
- CSS Float Html Tutorial - bigbaer.com.
- Easy Float Clearing - John Gallant and Holly Bergevin.
- Float Layouts - Tommy Olsson.
- Float Layouts - css-discuss Wiki.
- Float: The Theory - John Gallant and Holly Bergevin.
- Float Nightmares - Dave Hyatt.
- Floats Don't Suck If You Use Them Right - Eric A. Meyer.
- Floating Points - Eric A. Meyer.
- Floatutorial - Russ Weakley.
- How To Clear Floats Without Structural Markup - Tony Aslett.
- Pros and Cons of Absolute vs Float Page Layout - css-discuss Wiki.
- Simple Clearing of Floats - Alex Walker.
Liquid Layouts
- CSS Layouts: A tableless, CSS-based, liquid, three-column layout - Craig Saila.
- Creating Liquid Layouts with Negative Margins - Ryan Brill.
- Liquid Bleach - Douglas Bowman.
- Sliding Faux Columns - Eric A. Meyer.
- Liquid layouts - the easy way - Russ Weakley.
- Resolution Dependent Layout - Cameron Adams.
- Creating Liquid Faux Columns - Zoe Gillenwater.
Styling Tables (Layouts without Tables)
- An Objective Look at Table Based vs. CSS Based Design - Andy Budd.
- Tables My Ass - Patrick Griffiths.
- Centering Tables - Nicholas G. Theodorakis.
- CSS Gridlock - Eric A. Meyer.
- To Be Tabled - Eric A. Meyer.
- CSS Table Design: Overview - Al Sparber.
- CSS-Positioning, How to build a web site without tables - CSShark.
- Designing Without Tables - Julian Carroll.
- Designing Web Pages without Tables By Sasha Slutsker.
- Getting your DIVs to behave like TABLEs - Jonathan Snook.
- Look ma! no tables - Denis Wilford.
- Making Style and Tables Play Nice - Eric A. Meyer.
- Nested Tables - David Dorward.
- Table Layouts, Revisited - Jeffrey Zeldman.
- Revisiting "Table Layouts, Revisited" - Bill Mason.
- Tables or CSS: Choosing a layout - Craig Saila.
- Tables Vs. CSS - A Fight to the Death - Sergio Villarreal.
- TablesVsDivs: Why we shouldn't use tables - css-discuss WIKI.
- Throwing Tables Out the Window - Douglas Bowman.
- Toss out your Tables! CSS is the scene! - Charlie Morris.
- The "I can't believe it's not a table!" layout - John Gallant.
- Turning the Tables - Joe Gillespie.
- W3C Home Page Table-less Layout: HOWTO and FAQ.
- Why avoiding tables (for layout) is important - Dave Polaschek.
Styling Tables (Styling Tabular Data)
- A CSS Styled Table - Veerle Pieters.
- Bring on the tables - Roger Johansson.
- Designing Data Part 1: Table structure - Jonathan Snook.
- Designing Data Part 2: Adding Style - Jonathan Snook.
- HTML, CSS and tables - the beauty of data.
- Styling Tables with CSS - Dan Delaney.
- Tabular Weirdness - Eric A. Meyer.
- The Mystery Of Why Only Four Properties Apply To Table Columns - Ian Hickson.
Selectors (in CSS)
General
- Advanced Selectors - Ross Shannon.
- Contextual Selectors - Chuck Musciano.
- CSS 3 Selectors - Russell Dyer.
- CSS Selectors: Pattern Matching and Inheritance - Adrian Senior.
- How do I Select Thee, Let Me Count the Ways - Stephanos Piperoglou.
Attribute
- Attribute Selectors - Eric A. Meyer.
- Attribute Selectors Part 2 - Eric A. Meyer.
- Attribute Selectors Part 3 - Eric A. Meyer.
- Attribute Sectors in One Quick Bite - Chuck Musciano.
- Grammar Question - Eric A. Meyer.
Classes
- A touch of class - Lachlan Cannon.
- A Touch of Class - Tantek Celik.
- Are You Too Classy? - Virginia DeBolt.
- Competent Classing - Eric A. Meyer.
- CSS: A Tribute to Selectors - Andy Clarke.
- CSS: Mix and match Classes - David Eisenberg.
- So, You Want CSS Classes and IDs, Huh? - Joe Burns, Ph.D.
- The CLASS Attribute - htmlhelp.com.
- Use Class with Semantics in Mind - Sybren Stuvel.
Class and ID Naming
- The Benefits of Naming Conventions - Andy Clarke.
- What's in a Name part 2 - Andy Clarke.
- Structural Naming - Eric A. Meyer.
Pseudo-Classes
- CSS Link Styles 2004 - Al Sparber.
- Focus and not - Paul Scrivens.
- Link specificity - Eric A. Meyer.
- New Pseudo-Classes - Eric A. Meyer.
- Non-Graphical Rollovers for IE5 - Kurt Nimmo.
- Pseudo-classes - Brian Wilson.
- Roll Over, Rollovers - CSS Style - Eric A. Meyer.
- Uberlink CSS Rollovers 2004 - Al Sparber.
- Using CSS to create rollovers - Simon Coggins.
Pseudo-Elements
- Pseudo elements - Brian Wilson.
- Selectoracle - The Opal Group.
- Selectors by John Allsopp.
- Selectutorial - CSS selectors - Russ Weakley.
- The Adjacent-Sibling Selector - Eric A. Meyer.
- The Child Selector - Eric A. Meyer.
- The Universal Selector - Eric A. Meyer.
- Use Descendant Selectors - Andrew B. King.
- Selectors Test Index (for CSS 3) - W3C.
See also: CSS Tips & Tricks, CSS Design Intervention
