Sustainability of Digital Formats: Planning for Library of Congress Collections

Cascading Style Sheets (CSS) is a declarative textual language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents. By separating the presentation style of documents from the content of documents, CSS simplifies authoring and site maintenance for websites. CSS can be used for specifying the rendering of documents in HTML and XML on computer screens, on mobile devices, on paper, and in speech. This format description focuses on the use of the CSS language in free-standing style sheet files, which are typically invoked in the headers of HTML files. The description is intended to cover all components and versions of the CSS language specifications. The benefit of separate CSS files is that they can be applied to multiple HTML pages to share formatting and reduce complexity and repetition. Changes to the graphic design of hundreds of documents can be applied quickly and easily, by editing a single associated CSS file, rather than by changing markup in individual documents.

The CSS specification has been maintained as an open standard by the World Wide Web Consortium (W3C) since the W3C was formed in 1995. Maintenance is the responsibility of the CSS Working Group, which has active participation by browser vendors (e.g., Microsoft, Google, Apple, and the Mozilla Foundation) and many invited experts. The CSS specification has grown cumulatively and style sheet files conforming to different chronological versions cannot be distinguished; hence this format description covers all chronological versions. The first two major versions were published as single documents: CSS 1 in December 1996 and CSS 2 in May 1998. An update, CSS 2.1, was first published in June 2011. The CSS Working Group considers the CSS 1 specification document to be obsolete. However, the CSS Snapshot 2018, from January 2019, still explicitly incorporates CSS 2.1.

Since publication of CSS 2.1, the specification has been divided into functional modules. For example, there are modules for Color and for Backgrounds and Borders. Module specifications are developed more or less independently, with each module update being qualified by a "level" number. The entire CSS maintenance activity has sometimes been referred to as "CSS 3" because it builds cumulatively on CSS 2.1; however, there is no fixed specification called CSS 3, only Level 3 specifications for some modules. The numbering since CSS 2 has led to some confusion, particularly since some individual modules have reached "Level 4", for example, the module relating to the <image> type. As explained at Why there is no CSS4 - explaining CSS Levels and A Word About CSS4, there will be no CSS 4 specification either. For the official explanation of numbering, etc., see Cascading Style Sheets Levels, snapshots, modules…. Every few years, the CSS Working Group publishes a new CSS snapshot, which lists and links to the latest "stable" versions of the individual specification documents. For a summary of the working group activities and links to specifications, see CSS Specifications or CSS current work from the CSS Working Group.

A CSS style sheet file, for any level of CSS, consists of a list of statements. There are two kinds of statements: at-rules and rule sets (also referred to as style rules or simply as rules). Rule sets are the main building blocks of a style sheet, which may consist only of a long list of them.

• A CSS at-rule starts with an "at" symbol, "@". For example, the @import rule allows users to import style rules from other style sheets. An example is @import url("mystyle.css");.
• A CSS rule consists of two main parts: selector and declaration. The selector is the link between the HTML document and the style sheet. The declaration indicates style(s) to be applied to document content that matches the selector.

  The simplest type of selector is an HTML element type. For more detail on selectors, see https://www.w3.org/TR/selectors-3/. A declaration is enclosed in curly brackets "{" and "}" and consists of a property followed by a colon and a value (or list of values). As a very simple example, H1 { color: blue } is a rule that declares that H1 elements shall be displayed in blue. The property is "color" and the single value is "blue".

  The semantics of a list of values is specific to the property. For example, the font-family property can have a prioritized list of font family names, including generic family names. The declaration { font-family: Helvetica, Verdana, sans-serif; } means that if Helvetica is available it should be used. If neither Helvetica nor Verdana is present, then a sans serif font defined by the browser (or other user agent software) will be used.

  Declarations that apply to the same selector can be combined within the same {} pair, using ";" as a separator. Hence H1 { color: blue } H1 { font-weight: bold } is equivalent to H1 { color: blue; font-weight: bold }. The {} and its contents are referred to as a declaration block.

An important, and complex, part of the CSS standard relates to determining which style rule takes precedence if several style rules specify different values for the same element in the HTML or XML document to which CSS is being applied. A key aspect of the process of prioritization is called the Cascade, which accounts for "Cascading" in the name of this style sheet language. See Notes below for an informal discussion of "Cascade and Inheritance" or CSS Cascading and Inheritance Level 3 for the full detail.

CSS is an openly published non-proprietary format. The CSS specifications are maintained by the CSS Working Group of the World Wide Web Consortium (W3C).

Descriptions of all CSS specifications on which the CSS Working Group is working are listed at https://www.w3.org/Style/CSS/specs.en.html. All published versions and drafts of specifications for all modules of CSS are available at https://www.w3.org/Style/CSS/current-work. The latest "snapshot" of CSS is found at https://www.w3.org/TR/CSS/. The snapshot lists and links to the currently stable module specifications.

As stated in the Wikipedia entry for Cascading Style Sheets, "CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications." CSS style sheets are widely used by website creators and supported to some degree by all browsers. Support in browsers for particular CSS features/modules can be assessed via Can I Use and CSS Browser Support Reference from W3Schools.com.

Pre-prepared libraries designed to facilitate easier, more standards-compliant styling of web pages exist. They are often referred to as CSS frameworks. Such frameworks include W3.CSS, Foundation, and Bootstrap.

Another indicator of the importance and adoption of CSS is the emergence of several CSS preprocessors. A CSS preprocessor is a scripting language that extends CSS using programming concepts; code in the preprocessing language gets compiled into regular CSS syntax for deployment in websites. Among the concepts absent from CSS per se but supported in CSS preprocessors are variables (to set values that can be re-used in many places in a style sheet) , nesting of rules, and functions (to allow property values to be calculated). Also supported are mixins, which allow all the properties of a class to be embedded into another class by including the class name as one of its properties. CSS preprocessors that appear to be widely used include SASS (Syntactically Awesome Style Sheets), LESS, and Stylus. According to the May 2017 blog post, 6 Preprocessor Features Coming to Native CSS, some of the features of preprocessors have been proposed for inclusion in CSS. Comments welcome.

Character encoding for CSS style sheet files: A CSS style sheet is a sequence of characters from the Unicode Universal Coded Character Set (UCS). In a stored file, these characters must be encoded by a character encoding that supports the set of characters available in US-ASCII (e.g., UTF-8, ISO 8859-x, SHIFT JIS, etc.). The most common encoding used for CSS files is UTF-8. Browsers and other user agents are required to support UTF-8 encoding. The specification for CSS Syntax Module Level 3 provides a sequence of steps to determine the encoding and states, "Stylesheet authors should author their stylesheets in UTF-8."

Cascade and Inheritance in CSS: Since an element in an HTML document may match several selectors, an important part of the CSS specification is to describe the prioritization process that should be applied if a conflict occurs. A key part of the priorization process is known as the Cascade. The module that specifies how to determine which rule wins in the case of conflict, as of early 2018, is CSS Cascading and Inheritance Level 3. The entire process is complex, depending on several factors, including those described informally below:

• In general, an element inherits the value for many properties from its parent if no other value has been set. For example, the color of text set for the <BODY> will be inherited by all paragraphs for which no other color has been explicitly set. Whether a property is inherited by default is part of the property's definition.
• In general, style rules that are more specific, i.e., have selectors that will match fewer elements, have priority over less specific rules.
• In general, style rules that are occur or are imported later in a document take priority over ones that occur earlier.
• Style rules can be marked as "important," in which case the values they specify usually override values set by other rules

The interactions of these different factors are particularly complex. See a tutorial on Cascade and Inheritance from the Mozilla site for developers for more detail.

Invoking external CSS style sheet files from HTML: The most common mechanism to invoke an external style sheet within an HTML document is to include a <LINK> element in the <HEAD> section. An example is <LINK href="mystyle.css" rel="stylesheet" type="text/css">.

Using CSS within HTML files: There are two primary mechanisms for using the CSS language inside an HTML file. Firstly, a <STYLE> element can be included in the <HEAD>. For example, <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> calls for all H1 elements to be centered and given a 1-pixel width border. Secondly, style attributes can be applied directly to a particular instance of an HTML element. For example, <P style="font-size: 12pt; color: fuchsia">A paragraph</P>. If the style will be reused for several elements, use of the STYLE element will save repetition. For most flexibility, external style sheets are recommended. See, for example, Three Ways to Insert CSS from the CSS Tutorial by w3schools.com.

Extensibility of CSS: In CSS, keywords and property names beginning with '-' or '_' are reserved for vendor-specific extensions. For example, the following vendor prefixes are among those known to exist: -ms- (Microsoft); -moz- (Mozilla); and -webkit- (Apple). [Note: Webkit is an open source browser engine used in Safari and many other apps on macOS, iOS, and Linux.] CSS implementations that do not recognize vendor-specific properties are permitted to ignore them. Vendor-specific extensions have typically been used for experimental purposes and website authors are encouraged not to use them. The compilers of this resource have not determined how widely vendor-specific extensions are used in web pages and whether this causes serious interoperability problems. Comments welcome.

As indicated in The CSS Saga, Chapter 20 of Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos, the history of CSS began in 1994. These authors claim that, "the separation of document structure from the document's layout had been a goal of HTML from its inception in 1990" but that Tim Berners-Lee did not publish a syntax. Lie published a proposal for Cascading HTML style sheets in October 1994. The www-style mailing list was created in May 1995, by which time there were implementations from both Lie and Bos. In 1995, the recently formed W3C took the CSS specification up as a work item with the goal of making it into a W3C Recommendation. The first version of CSS, now referred to as CSS 1 or CSS level 1, emerged as a W3C Recommendation in December 1996.

When the first CSS specification was published, CSS was defined in one document. CSS 2 was defined in May 1998, also by a single, multi-chapter document. CSS 2 built on CSS 1 and, with very few exceptions, all valid CSS 1 style sheets are valid CSS 2 style sheets. CSS 2 included a number of new capabilities like absolute, relative, and fixed positioning of elements, support for aural style sheets and bidirectional text, and new font properties such as shadows. CSS 2 also introduced the concept of media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. CSS 2.1, published in 2011, corrected a few errors in CSS 2, and added a few features which had already been widely implemented. "CSS 2.1 is derived from and is intended to replace CSS2. Some parts of CSS2 are unchanged in CSS 2.1, some parts have been altered, and some parts removed. The removed portions may be used in a future CSS3 specification." The authors emphasized that CSS 2.1 represented a "snapshot" of CSS usage, consisting of all CSS features implemented interoperably at the date of publication of the CSS 2.1 Recommendation.

After the publication of CSS 2.1, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable chunks and has allowed improvements to CSS to be introduced incrementally and more rapidly. In its description of the CSS Standardization Process, the CSS Working Group has stated its intention that new CSS modules will not contradict the CSS 2.1 specification: only that they will add functionality and refine definitions. As each new or updated module is completed, it will be plugged in to the existing system of CSS 2.1 plus previously-completed modules.

Snapshots of CSS have been published every few years since 2007:

• CSS Snapshot 2007
• CSS Snapshot 2010
• CSS Snapshot 2015
• CSS Snapshot 2017
• CSS Snapshot 2018