Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 146

CSS2 and CSS 2.1
CSS Level 2 was developed as a superset of CSS1 and has been extended with several new features. The most
important ones are layer order ( z-index ), three types of element positioning ( absolute , relative , and fixed ), the
aural media type, and bidirectional text.
CSS Level 2 Revision 1, often abbreviated as CSS 2.1 [8], has been the ultimate styling solution on the Web for
many years. CSS 2.1 became a W3C Recommendation in 2011.
CSS3
The development of CSS Level 3 (CSS3) started in 2005. In contrast to further CSS specifications, CSS3 is modularized [9].
The CSS3 modules are described in separate specifications such as Selectors, Media Queries, Text, Backgrounds
and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, and Multi-Columns. The
modules are in different stages of development and browser implementation. Until recently, only a few modules had
been standardized, such as the Color module [10], the Namespaces module [11], the Selectors module [12], and the
Media Queries module [13].
A variety of new functions and features have been introduced in CSS3 such as border-radius , box-shadow ,
background-origin ; color declaration in HSL, HSLA, and RGBA; text-shadow ; text-overflow ; word-wrap ; box-sizing ;
attribute selectors; transitions; multiple backgrounds; multicolumn layout; Web Fonts; and speech.
Grammar and Conventions
Parsing errors caused by nonexisting properties, incorrect values, malformed declarations, and so on, can be
eliminated by following the proper CSS syntax . The grammar ensures syntactically correct CSS, which makes it
possible for browsers to handle parsing rules, selector, property, value, and unit notations correctly. Although the
fundamental rules are similar, each CSS version has its own syntax [14]. Being a superset of CSS 2.1, CSS3 introduced
additional semantic constraints.
Identifiers and Classes
The ID and class identifiers should always start with a letter. These identifiers correspond to the id and class markup
attributes. Since an element with an id attribute is unique within a web page, ID identifiers can be used to style
a unique element of a page. If the same styles are applied to multiple elements, class identifiers should be used.
Identifier names are case sensitive. Using the letters a-z and the numbers 0-9 is highly recommended, although
underscores and hyphens are also allowed. Names should be meaningful and semantic. Unique names should be
applied.
Units
CSS3 supports both absolute measurement values (Table 5-1 ) and relative length units, including font-relative and
viewport-relative units.