Sustainability of Digital Formats: Planning for Library of Congress Collections

Introduction | Sustainability Factors | Content Categories | Format Descriptions | Contact
Format Description Categories >> Browse Alphabetical List

Cascading Style Sheet (CSS) File Format

>> Back
Table of Contents
Format Description Properties Explanation of format description terms

Identification and description Explanation of format description terms

Full name Cascading Style Sheet (CSS) File Format
Description

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.

Production phase The primary use of CSS files is for application of display styles to web pages made available on the Internet. A CSS file is thus a component of a final-state presentation of a document marked up in HTML.
Relationship to other formats
    Used by HTML_family, HyperText Markup Language (HTML) Format Family. Starting with HTML 3.2, HTML files could incorporate <style> elements that contain CSS markup or invoke external style sheet files using the <link> element. See Style Sheets in HTML Documents.
    Used by SVG_family, Scalable Vector Graphics (SVG) File Format Family. SVG 1.1 was closely related to CSS2. SVG 2 relies on more recent specifications for some CSS modules.
    Used by XML, Extensible Markup Language. See Associating Style Sheets with XML documents 1.0 (Second Edition).

Local use Explanation of format description terms

LC experience or existing holdings The Library of Congress has acquired CSS files associated with documents in HTML collected through its Web Archiving program. See Library of Congress Web Archiving.
LC preference The Library of Congress collects style sheets only in association with other content, such as documents in HTML or XML. The Recommended Formats Statement (RFS) for textual documents requires that documents in HTML or XML be accompanied by presentation style sheets.

Sustainability factors Explanation of format description terms

Disclosure

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).

    Documentation

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.

Adoption

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.

    Licensing and patents The goal of the W3C Patent Policy is to assure that recommendations produced under this policy can be implemented on a royalty-free basis. In general, participants in W3C working groups must agree to make available under royalty-free terms any claims related to the work and resulting recommendations of that particular working group. See W3C Royalty-Free (RF) Licensing Requirements. The page entitled Cascading Style Sheets (CSS) Working Group Patent Policy Status indicates a few patents disclosed by Apple and made available under terms complying with the requirements.
Transparency CSS style sheet files can be opened and viewed in text editors.
Self-documentation Like other programming or markup languages, CSS files can be documented through comments. CSS comments start with /* and end with */.
External dependencies None.
Technical protection considerations CSS style sheets have no internal mechanism for encryption or other technical protection.

Quality and functionality factors Explanation of format description terms

Text
Normal rendering CSS files are not intended as normal documents for reading. However, they can be viewed, edited, and printed using plain text editors.
Integrity of document structure CSS markup is intended to map the structural components of a document, typically in HTML, into formatting and layout for presentation or printing. The use of CSS thus allows logical document structure, such as chapters, sections, lists, paragraphs, tables, and illustrations, to be clearly represented, both through unambiguous machine-readable markup and visually for human readers.
Integrity of layout and display CSS markup is used to specify layout and formatting as intended by an author or publisher for different display sizes or for printing.
Support for mathematics, formulae, etc. The logical representation of equations may be part of the underlying HTML or XML document, for example, using MathML. A MathML for CSS Profile (June 2011) defines a profile of MathML that "admits formatting with Cascading Style Sheets."
Functionality beyond normal rendering CSS markup can be used to specify how document content can be presented as audio.

File type signifiers and format identifiers Explanation of format description terms

Tag Value Note
Filename extension css
See IANA registration in RFC 2318 from March 1998.
Internet Media Type text/css
See specification and IANA registration in RFC 2318 from March 1998.
Magic numbers See note.  RFC 2318 indicates that there is no magic number to identify CSS style sheet files.
Uniform Type Identifier (Mac OS) public.css
Stated in Wikipedia entry for Cascading Style Sheets.
Pronom PUID x-fmt/224
Pronom has a single entry for Cascading Style Sheet files, with no internal signature supplied. See http://www.nationalarchives.gov.uk/PRONOM/x-fmt/224. PUID: x-fmt/224
Wikidata Title ID Q27826463
Cascading Style Sheets (file format family). See https://www.wikidata.org/wiki/Q27826463.

Notes Explanation of format description terms

General

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.

History

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:


Format specifications Explanation of format description terms


Useful references

URLs


Last Updated: 02/01/2022