Introduction to CSS3 (2024)

Abstract

The members of the CSS&FP Working Group have decided to modularize theCSS specification. This modularization will help to clarify the relationshipsbetween the different parts of the specification, and reduce the size of thecomplete document. It will also allow us to build specific tests on a permodule basis and will help implementors in deciding which portions of CSS tosupport. Furthermore, the modular nature of the specification will make itpossible for individual modules to be updated as needed, thus allowing for amore flexible and timely evolution of the specification as a whole.

This document lists all the modules to be contained in the future CSS3specification.

Status of this document

This is an official introduction, issued by the CSS Working Group, whichdetails the modularization of the CSS3 specification and the CSS test suite.This document should be considered to be informative, not normative. See theStyle overview pages for more information on W3C's workon style sheets, including CSS.

This is a public W3C Working Draft for review by W3C members and otherinterested parties. As a draft document, it may be updated, replaced, orobsoleted by other documents at any time. It is inappropriate to use W3CWorking Drafts as reference material or to cite them as other than "work inprogress."

A list of current W3C Recommendations and other technical documentsincluding Working Drafts and Notes can be found at http://www.w3.org/TR.

Please send comments to the www-style@w3.org mailing list (see how tosubscribe) or to the editor.

Table of contents

• 1. Why Modules?
• 2. Module Overview
• 3. Module Descriptions andRelated Information
  • 3.1. Introduction
  • 3.2. Syntax / grammar
  • 3.3. Selectors
  • 3.5. Value assignment /cascade / inheritance
  • 3.6. Box model /vertical
  • 3.7. Positioning
  • 3.8. Color / gamma / colorprofiles
  • 3.9. Colors andBackgrounds
  • 3.10. Line boxmodel
  • 3.11. Text
  • 3.12. Fonts
  • 3.13. Ruby
  • 3.14. Generated content /markers
  • 3.15. Replaced content
  • 3.16. Paged media
  • 3.17. User interface
  • 3.18. WebFonts
  • 3.19. ACSS
  • 3.20. SMIL
  • 3.21. Tables
  • 3.22. Columns
  • 3.23. SVG
  • 3.24. Math
  • 3.25. BECSS
  • 3.26. Mediaqueries
  • 3.27. Test Suite
• 4. Appendices
• 5. Module template

1. Why Modules?

As the popularity of CSS grows, so does interest in making additions tothe specification. Rather than attempting to shove dozens of updates into asingle monolithic specification, it will be much easier and more efficient tobe able to update individual pieces of the specification. Modules will enableCSS to be updated in a more timely and precise fashion, thus allowing for amore flexible and timely evolution of the specification as a whole.

For resource constrained devices, it may be impractical to support all ofCSS. For example, an aural browser may be concerned only with aural styles,whereas a visual browser may care nothing for aural styles. In such cases, auser agent may implement a subset of CSS. Subsets of CSS are limited tocombining selected CSS modules, and once a module has been chosen, all of itsfeatures must be supported.

2. Module Overview

All modules contain a "Conformance: Requirements and Recommendations"section. Any module whose table row is backed with green is considered partof the "CSS Core." The listed deadlines (backed in red) represent the time atwhich a module should be ready for Working Draft publication. There are alsocolumns which indicate a module's participation in each of three "profiles":HTML Basic, CSS3, and SVG. A module without any indicated moduleparticipation is at risk of being dropped from CSS3 before it reachesProposed Recommendation status. A module without a listed editor is backed inyellow, and is in serious danger of being dropped.

3. Module Descriptions and RelatedInformation

3.1. Introduction

This provides a general overview of the specification's goals, as well asbasic notes on how CSS works, acknowledgments, and so forth.

• 1. About the CSS2 Specification
• 2. Introduction to CSS2

3.2. Syntax / grammar

A way to attach arbitrary properties to a hierarchically structureddocument or other data structure, with the characteristic that it hasbuilt-in "forward-compatibility" (a.k.a. "extensibility").

• 4. CSS2 syntax and basicdata types
• 7. Media types
• Appendix D. The grammarof CSS2
• Namespaces

3.3. Selectors

Describes the selectors of CSS3. Selectors are used to select elements inan HTML or XML document, in order to attach (style) properties to them. Thedraft includes the selectors of CSS1 and CSS2 and extends them with newproposals that allow, for example, elements to be selected based on whetherthey contain a certain word, or whether they are the only element of theirkind.

• 5. Selectors
• 6.4.3.Specificity of selectors
• Appendix D.1Selectors' grammar
• Namespaces

3.4. Values & units

Things which are applied to values.

• 4.3. Values
• Dynamic properties

3.5. Value assignment / cascade /inheritance

How properties interact, and the core of how CSS operates.

• 6. Assigning propertyvalues, Cascading, and Inheritance

3.6. Box model / vertical

The box model describes the basics of the normal text flow, including howto "float" blocks of text or images, but excluding columns, tables, and otheradvanced layouts; i.e., it describes how text and other objects are strunginto lines, and lines into blocks (paragraphs), and how those blocks are putbelow each other or side by side with the help of margins and borders. Ittreats both horizontal text and vertical writing modes.

• 8. Box model
• 9. Visual formattingmodel
• 10. Visual formattingmodel details
• 11. Visual effects
• Floating boxes to top/bottom of page

3.7. Positioning

This describes the process of placing an element someplace other than itwould normally be in the normal flow of the document.

• 8. Box model
• 9. Visual formattingmodel
• 10. Visual formattingmodel details
• 11. Visual effects
• Floating boxes to top/bottom of page

3.8. Color / gamma / color profiles

In general, basic color descriptions and color handling in multipleenvironments. The color profiles section describes how two properties can beattached to embedded images to specify their "color space," which is theinformation a renderer needs to paint the right color for each pixel. Itshould do away with the annoying problem that images, especially GIF andJPEG, but sometimes also PNG, look different on a Mac than on a PC, or otherplatforms.

• 14. Color
• 14.1 Foregroundcolor: the 'color' property
• 14.3Gamma correction
• Transparency
• Color profile for replaced elements

3.9. Colors and Backgrounds

A description of how element foregrounds and backgrounds are formatted.

• 14.2. Thebackground

3.10. Line box model

A description of the line box model for inline elements, and the inlinecontent of block elements.

• Inlinemodel document

3.11. Text

Description of the handling of text in user agents. Includes bidi,vertical alignment, text decoration, line breaking, etc.

• 16. Text
• Copy-fitting/auto-sizing/auto-spacing
• "International layout"

3.12. Fonts

Description of the handling of fonts in user agents.

• 15. Fonts

3.13. Ruby

A draft that contains proposals for new style properties for typographictraditions that have so far had little attention in CSS, such as verticalJapanese and Arabic. The CSS working group is cooperating with W3C'sInternationalization working group on this.

• The Internationalization CSS WD

3.14. Generated content /markers

A description of how content is generated and markers are displayed.

• 12. Generated content,automatic numbering, and lists

3.15. Replaced content

A module explaining how replaced content is handled and what qualifies asreplaced content.

• ???

3.16. Paged media

Extends the properties that CSS2 already had with new ones to control suchthings as running headers and footers, page numbers and print-stylecross-references ("see page...").

• 13. Paged media
• The CSS3 Page WD
• Running headers and footers
• Cross-references
• Float : gutter-side/fore-edge-side
• Floating boxes to top/bottom of page

3.17. User interface

Contains features for styling some interactive, dynamic aspects of Webpages: the look of form elements in their various states, more cursors andcolors to describe GUIs (graphical user interfaces) that blend well with theuser's desktop environment, and a proposal for "kiosk" mode.

• 18. User interface
• The UI/Forms WD
• Rendering objects for forms

3.18. WebFonts

Authors continue to clamor for "more control" over their pages, and thefonts used in presenting them. This module will attempt to provide a way tomake fonts more Web-friendly.

• 15. Fonts
• Appendix C. Implementationand performance notes for fonts
• Appendix G. Descriptorindex

3.19. ACSS

An attempt to make styled content even more accessible.

• 19. Aural style sheets
• Accessibility features ofCSS

3.20. SMIL

An attempt to link CSS and SMIL together.

• SMIL 1.0
• SYMM

3.21. Tables

The tables module contains the properties to lay out boxes in rows andcolumns. It allows a designer to assign roles like "table," "cell," "row," or"caption" to boxes and provides for various alignments and border styles.

• 17. Tables

3.22. Columns

Proposes new properties to create flexible column layouts.

• Multicolumnlayout in CSS

3.23. SVG

A format that expresses shapes (lines, circles, splines, etc.) in anXML-based language and their style (fill color, stroke width, etc.) in CSS.This should make it easy to create text and graphics in the same style simplyby using a single style sheet for both. SVG uses several existing CSSproperties, but also introduces new ones that may or may not be useful forstyling text. It will progress to Recommendation as a separate specification,but the (new) CSS properties are coordinated with the CSS working group.

• SVG

3.24. Math

An attempt to provide style properties for mathematical expressions. Thiswill obviously be deeply linked to the MathML specification.

• MathML 1.0

3.25. BECSS

A proposal to use the CSS syntax and CSS's system of cascading andinheritance to attach "behavior" (rather than style) to elements. Behavior inthis context refers to any dynamic changes to the style or the document inresponse to user events, such as clicks and key presses. The behaviorsthemselves are expressed as pieces of script, in languages such asECMAscript.

• BECSS draft

3.26. Media queries

To describe in more detail what type of devices a style sheet applies to,this document proposes media queries. A media query consists of a media typeand one or more expressions to limit the scope of a certain style sheet.Among the proposed media features that can be used in expressions are"width", "height" (size of the display), and "color" (color depth of thedisplay).

3.27. Test Suite

Providing implementation guidelines, concrete examples, and user insightinto implementation support, a test suite is crucial to the success of anyspecification. Although the Test Suite is a module in itself and has a moduleowner, individual module owners are responsible for assisting in the creationand review of tests for their specific module.

• CSS1 Test Suite

4. Appendices

Some appendices will be split up to go with individual modules. These are:

• Appendix B. Changes from CSS1
• Appendix E. References
• Appendix F. Property index

For example, the changes between one version of a module and anothershould be tracked in an appendix to that module, not a single appendix to theentire specification. Similarly, there should be a property reference foreach module. There may be a single cumulative reference for the entirespecification, although this is not yet known with any certainty. Each moduleshould also include an appendix listing any dependencies on other modules orspecifications.

There will also be a few specification-wide appendices. There areprojected to be:

• Appendix A. A sample style sheet for HTML 4.0
• Appendix H. Index

5. Module template

All modules should conform to the format defined in the CSS3 editingrules [member-only link]. In addition to the definitions of propertiesand values, each module contains a list of dependencies on other modules orspecifications, and also provides a list of changes from CSS2.