CSS

Style sheet

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

Selector

In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.

Declaration block

A declaration block consists of a pair of braces ({}) enclosing a semicolon-separated list of declarations.^[10]

Use

Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML markup. That is, all font colors, background styles, element alignments, borders, and sizes had to be explicitly described (often repeatedly) within the HTML. CSS lets authors move much of that information to another file, the style sheet, resulting in considerably simpler HTML. And additionally, as more and more devices are able to access responsive web pages, different screen sizes and layouts begin to appear. Customizing a website for each device size is costly and increasingly difficult. The modular nature of CSS means that styles can be reused in different parts of a site or even across sites, promoting consistency and efficiency.

For example, headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.

Before CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles, such as reading speed and emphasis for aural text readers. The W3C has now deprecated the use of all presentational HTML markup.^[17]

For example, under pre-CSS HTML, a heading element defined with red text would be written as:

<h1><font color="red">Chapter 1.</font></h1>

Using CSS, the same element can be coded using style properties instead of HTML presentational attributes:

<h1 style="color: red;">Chapter 1.</h1>

The advantages of this may not be immediately clear but the power of CSS becomes more apparent when the style properties are placed in an internal style element or, even better, an external CSS file. For example, suppose the document contains the style element:

<style>
    h1 {
        color: red;
    }
</style>

All h1 elements in the document will then automatically become red without requiring any explicit code. If the author later wanted to make h1 elements blue instead, this could be done by changing the style element to:

<style>
    h1 {
        color: blue;
    }
</style>

rather than by laboriously going through the document and changing the color for each individual h1 element.

The styles can also be placed in an external CSS file, as described below, and loaded using syntax similar to:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

This further decouples the styling from the HTML document and makes it possible to restyle multiple documents by simply editing a shared external CSS file.

Sources

CSS, or Cascading Style Sheets, offers a flexible way to style web content, with styles originating from browser defaults, user preferences, or web designers. These styles can be applied inline, within an HTML document, or through external .css files for broader consistency. Not only does this simplify web development by promoting reusability and maintainability, it also improves site performance because styles can be offloaded into dedicated .css files that browsers can cache. Additionally, even if the styles cannot be loaded or are disabled, this separation maintains the accessibility and readability of the content, ensuring that the site is usable for all users, including those with disabilities. Its multi-faceted approach, including considerations for selector specificity, rule order, and media types, ensures that websites are visually coherent and adaptive across different devices and user needs, striking a balance between design intent and user accessibility.

Specificity

Specificity refers to the relative weights of various rules.^[18] It determines which styles apply to an element when more than one rule could apply. Based on the specification, a simple selector (e.g. H1) has a specificity of 1, class selectors have a specificity of 1,0, and ID selectors have a specificity of 1,0,0. Because the specificity values do not carry over as in the decimal system, commas are used to separate the "digits"^[19] (a CSS rule having 11 elements and 11 classes would have a specificity of 11,11, not 121).

Thus the selectors of the following rule result in the indicated specificity:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: blue; }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: green;">To demonstrate specificity</p>
    </body>
</html>

Inheritance

Inheritance is a key feature in CSS; it relies on the ancestor-descendant relationship to operate. Inheritance is the mechanism by which properties are applied not only to a specified element but also to its descendants.^[18] Inheritance relies on the document tree, which is the hierarchy of XHTML elements in a page based on nesting. Descendant elements may inherit CSS property values from any ancestor element enclosing them. In general, descendant elements inherit text-related properties, but their box-related properties are not inherited. Properties that can be inherited are color, font, letter spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space, and word-spacing. Properties that cannot be inherited are background, border, display, float and clear, height, and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align, and z-index.

Inheritance can be used to avoid declaring certain properties over and over again in a style sheet, allowing for shorter CSS.

Inheritance in CSS is not the same as inheritance in class-based programming languages, where it is possible to define class B as "like class A, but with modifications".^[20] With CSS, it is possible to style an element with "class A, but with modifications". However, it is not possible to define a CSS class B like that, which could then be used to style multiple elements without having to repeat the modifications.

p {
   color: blue;
}

<p>
   This is to <em>illustrate</em> inheritance
</p>

Whitespace

The whitespace between properties and selectors is ignored. This code snippet:

body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}

is functionally equivalent to this one:

body {
   overflow: hidden;
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

@font-face {
   font-family: 'Comic Sans';
   font-size: 20px;
   src: url('first.example.com'),
        url('second.example.com'),
        url('third.example.com'),
        url('fourth.example.com');
}

Positioning

CSS 2.1 defines three positioning schemes:

Normal flow

Inline items are laid out in the same way as the letters in words in the text, one after the other across the available space until there is no more room, then starting a new line below. Block items stack vertically, like paragraphs and like the items in a bulleted list. Normal flow also includes the relative positioning of block or inline items and run-in boxes.

Floats

A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item.

Absolute positioning

An absolutely positioned item has no place in, and no effect on, the normal flow of other items. It occupies its assigned position in its container independently of other items.^[22]

Difficulty with adoption

The CSS 1 specification was completed in 1996. Microsoft's Internet Explorer 3^[25] was released that year, featuring some limited support for CSS. IE 4 and Netscape 4.x added more support, but it was typically incomplete and had many bugs that prevented CSS from being usefully adopted. It was more than three years before any web browser achieved near-full implementation of the specification. Internet Explorer 5.0 for the Macintosh, shipped in March 2000, was the first browser to have full (better than 99 percent) CSS 1 support,^[35] surpassing Opera, which had been the leader since its introduction of CSS support fifteen months earlier. Other browsers followed soon afterward, and many of them additionally implemented parts of CSS 2.

However, even when later "version 5" web browsers began to offer a fairly full implementation of CSS, they were still incorrect in certain areas. They were fraught with inconsistencies, bugs, and other quirks. Microsoft Internet Explorer 5. x for Windows, as opposed to the very different IE for Macintosh, had a flawed implementation of the CSS box model, as compared with the CSS standards. Such inconsistencies and variation in feature support made it difficult for designers to achieve a consistent appearance across browsers and platforms without the use of workarounds termed CSS hacks and filters. The IE Windows box model bugs were so serious that, when Internet Explorer 6 was released, Microsoft introduced a backward-compatible mode of CSS interpretation ("quirks mode") alongside an alternative, corrected "standards mode". Other non-Microsoft browsers also provided mode-switch capabilities. It, therefore, became necessary for authors of HTML files to ensure they contained special distinctive "standards-compliant CSS intended" marker to show that the authors intended CSS to be interpreted correctly, in compliance with standards, as opposed to being intended for the now long-obsolete IE5/Windows browser. Without this marker, web browsers with the "quirks mode"-switching capability will size objects in web pages as IE 5 on Windows would, rather than following CSS standards.

Problems with the patchy adoption of CSS and errata in the original specification led the W3C to revise the CSS 2 standards into CSS 2.1, which moved nearer to a working snapshot of current CSS support in HTML browsers. Some CSS 2 properties that no browser successfully implemented were dropped, and in a few cases, defined behaviors were changed to bring the standard into line with the predominant existing implementations. CSS 2.1 became a Candidate Recommendation on February 25, 2004, but CSS 2.1 was pulled back to Working Draft status on June 13, 2005,^[36] and only returned to Candidate Recommendation status on July 19, 2007.^[37]

In addition to these problems, the .css extension was used by a software product used to convert PowerPoint files into Compact Slide Show files,^[38] so some web servers served all .css^[39] as MIME type application/x-pointplus^[40] rather than text/css.

Vendor prefixes

Individual browser vendors occasionally introduced new parameters ahead of standardization and universalization. To prevent interfering with future implementations, vendors prepended unique names to the parameters, such as -moz- for Mozilla Firefox, -webkit- named after the browsing engine of Apple Safari, -o- for Opera Browser and -ms- for Microsoft Internet Explorer and early versions of Microsoft Edge that use EdgeHTML.

Occasionally, the parameters with vendor prefixes such as -moz-radial-gradient and -webkit-linear-gradient have slightly different syntax as compared to their non-vendor-prefix counterparts.^[41]

Prefixed properties are rendered obsolete by the time of standardization. Programs are available to automatically add prefixes for older browsers and to point out standardized versions of prefixed parameters. Since prefixes are limited to a small subset of browsers, removing the prefix allows other browsers to see the functionality. An exception is certain obsolete -webkit- prefixed properties, which are so common and persistent on the web that other families of browsers have decided to support them for compatibility.^[42]

CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted^[43] as CSS 1, CSS 2, CSS 3, and CSS 4. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently, there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types, which were added in CSS 2.

Cannot explicitly declare new scope independently of position

Scoping rules for properties such as z-index look for the closest parent element with a position: absolute or position: relative declaration. This odd coupling has undesired effects. For example, it is impossible to avoid declaring a new scope when one is forced to adjust an element's position, preventing one from using the desired scope of a parent element.

Pseudo-class dynamic behavior not controllable

CSS implements pseudo-classes that allow a degree of user feedback by conditional application of alternative styles. One CSS pseudo-class, ":hover", is dynamic (equivalent of JavaScript "onmouseover") and has potential for misuse (e.g., implementing cursor-proximity popups),^[69] but CSS has no ability for a client to disable it (no "disable"-like property) or limit its effects (no "nochange"-like values for each property).

Cannot name rules

There is no way to name a CSS rule, which would allow (for example) client-side scripts to refer to the rule even if its selector changes.

Cannot include styles from a rule into another rule

CSS styles often must be duplicated in several rules to achieve the desired effect, causing additional maintenance and requiring more thorough testing. Some new CSS features were proposed to solve this but were abandoned afterward.^[70][71] Instead, authors may gain this ability by using more sophisticated stylesheet languages which compile to CSS, such as Sass, Less, or Stylus.

Cannot target specific text without altering markup

Besides the ::first-letter pseudo-element, one cannot target specific ranges of text without needing to utilize placeholder elements.

Separation of content from presentation

CSS facilitates the publication of content in multiple presentation formats by adjusting styles based on various nominal parameters. These parameters include explicit user preferences (such as themes or font size), compatibility with different web browsers, the type of device used to view the content (e.g., desktop, tablet, or mobile device), screen resolutions, the geographic location of the user, and many other variables. CSS also enables responsive design, ensuring that content dynamically adapts to different screen sizes and orientations, enhancing accessibility and user experience across a wide range of environments.

Site-wide consistency

When CSS is used effectively, in terms of inheritance and "cascading", a global style sheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should be changed or adjusted, these changes can be made by editing rules in the global style sheet. Before CSS, this sort of maintenance was more difficult, expensive, and time-consuming.

Bandwidth

A stylesheet, internal or external, specifies the style once for a range of HTML elements selected by class, type or relationship to others. This is much more efficient than repeating style information inline for each occurrence of the element. An external stylesheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, further reducing data transfer over a network.

Page reformatting

With a simple change of one line, a different style sheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore, devices not able to understand the styling (such as older browsers) can still display the content.

Accessibility

Without CSS, web designers must typically lay out their pages with techniques such as HTML tables that hinder accessibility for vision-impaired users (see Tableless web design § Accessibility).

Frameworks

CSS frameworks are prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. CSS frameworks include Blueprint, Bootstrap, Foundation and Materialize. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML <head>. They provide a number of ready-made options for designing and laying out the web page. Although many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.^[72]

Design methodologies

As the size of CSS resources used in a project increases, a development team often needs to decide on a common design methodology to keep them organized. The goals are ease of development, ease of collaboration during development, and performance of the deployed stylesheets in the browser. Popular methodologies include OOCSS (object-oriented CSS), ACSS (atomic CSS), CSS (organic Cascade Style Sheet), SMACSS (scalable and modular architecture for CSS), and BEM (block, element, modifier).^[73]