Technology attributes
Other attributes
Cascading Style Sheets (CSS) is a language used to style markup languages, including HTML. CSS is a core technology required to build web pages and web applications. While HTML provides the structure of the page, CSS provides the visual layout. CSS describes how elements are displayed, including the design, layout, and variations in display for different devices and screen sizes. CSS is independent of HTML and is compatible with any XML-based markup language.
When a browser reads a style sheet, it will format the document according to the information present in the style sheet. The style definitions are typically saved in external .css files. Using an external stylesheet file allows users to change the look of an entire website by changing a single file. Separating HTML and CSS or separating the structure (content) from its presentation simplifies maintaining sites—allowing style sheets to be shared across pages, and pages to be tailored to different environments.
The idea for CSS was first proposed in October 1994 by Norwegian Software Engineer Håkon Wium Lie while working with Tim Berners-Lee and Robert Cailliau at CERN. At this time, the web was beginning to be used for electronic publishing without a way to style documents. Håkon, who had previously worked on personalized newspaper presentations at the MIT Media Laboratory, saw the need for a style sheet language for the Web.
CSS was not the first idea for separating the document structure from its layout. It had been the goal of HTML from its inception in 1990. Tim Berners-Lee wrote the NeXT browser/editor such that he could determine the style using a simple style sheet. However, he didn't publish the syntax deciding that each browser should determine how best to display pages for its users.
Viola web browser upon release
In 1992, Pei Wei's browser, Viola, had its own style sheet language that was incorporated into the browser with the goal of making this language the official standard for the web. The browsers that followed offered fewer options to determine the page style. NCSA Mosaic, the browser that made the web popular, was released in 1993. It only offered limited influence over style, allowing users to change certain colors and fonts.
Marc Andreessen, while developing Netscape Navigator, extended HTML to include presentational, unstandardized HTML tags that could be used to design web pages. Other alternatives included RRP, a stylesheet language favoring abbreviations and brevity, and PSL96, a language allowing for functions and conditional statements
Håkon Wium Lie published the first draft of the cascading HTML style sheets proposal in October 1994. Dave Raggett (primary architect of HTML 3.0) encouraged Håkon to develop his idea after deciding HTML should not be turned into a page-description language and a new purpose-built mechanism was required. Dutch computer scientist Bert Bos responded to the first draft of CSS and joined Håkon to work on CSS. At the time, he was building Argo, a customizable browser with style sheets.
What made CSS unique from other attempts at stylesheet languages was that it took into account both the author and reader when producing the page style. It combined or cascaded their requirements to produce the web page style. The cascade means that styles can inherit and overwrite other previously declared styles, following a hierarchy known as specificity. Another breakthrough was that it allowed for multiple stylesheets on the same page.
The initial CSS proposal was presented at the Web conference in Chicago in November 1994. A fictitious screenshot was presented showing a slider that could adjust the mix of user preferences vs those of the author. At the time, CSS, using a simple declarative format, was perceived by some as being too simple for the task and that a full programming language was needed.
In 1995, the World Wide Web Consortium (W3C) became operational and set up the HTML Editorial Review Board (HTML ERB) to ratify future HTML specifications. The CSS specification was taken up as a work item with the goal of making it into a W3C Recommendation. CSS level 1 emerged as a W3C Recommendation in December 1996.
While Internet Explorer had incorporated some of CSS, Netscape had continued work on presentational HTML elements. By the 2000s, five years after the W3C recommendation there were still no browsers with full CSS support. Tantek Çelik working on Internet Explorer for Macintosh decided to focus on CSS support while developing version 5 in 2000. In March of 2002, they released Internet Explorer 5 for Macintosh. The first browser with full CSS Level 1 support.
The first two major site redesigns using CSS were Wired and ESPN, with Wired launching their redesign in September 2002 and ESPN releasing their site a few months later.
Wired's redesigned website using CSS
Cascading style sheets level 1 was recommended by the W3C on 17 December 1996. Supported features include:
- font-related properties such as size, color, etc.
- color for both text and backgrounds, as well as modifications associated with images
- attributes related to text such as size, letter spacing, and alignment
- appearance and formatting associated with tables and frames
- spacing attributes like margin, padding, and border, along with spacing in horizontal and vertical directions
CSS1 has been superseded by newer versions and is no longer recommended by the W3C.
CSS2 became a W3C recommendation in May 1998. It added support for media-specific style sheets, such as printers and aural devices, downloadable fonts, element positioning, and tables. The W3C no longer maintains the CSS2 recommendation.
CSS2.1, or CSS level 2 revision 1, was recommended by the W3C on June 7th, 2011. CSS 2.1 is derived from and is intended to replace CSS2, it addresses issues in the CSS2 recommendation by:
- maintaining compatibility with portions of CSS2 widely accepted and implemented.
- incorporating all published CSS2 errata.
- modifying the CSS2 specification to be in accordance with generally accepted practice.
- removing CSS2 features which rejected by the CSS community.
- removing CSS2 features that will be obsoleted by CSS3.
- adding a small number of new property values.
Many sections of CSS 2.1 (CSS level 2 revision 1) have been updated by other specifications.
CSS3 is divided into modules, with each module having new extension features defined in CSS2. The first CSS3 drafts date back to June 1999, with the first modules becoming W3C candidate recommendations in 2003. The main difference between CSS2 and CSS3 are related to:
- Media Queries
- Namespaces
- Selectors Level 3
- Color
- Separate content from presentation
- Repeat element styles with a single specification
- Consistent style across a variety of sites
- Improvement in site speed as it requires little input
- Simplified web development and maintenance
- Device-friendly
- Bandwidth savings
- Issues with browser compatibility and lack of support for some style sheets
- Utilizes different logic depending on the browser
Nearly all browsers now support CSS with many other applications also utilizing CSS. Some CSS properties are supported using prefixes (-webkit-, -moz-, etc). A full list of CSS properties, how they are supported, and the first compatible browser version can be found here for Edge, Chrome, Firefox, Safari, and Opera.
CSS rules consist of a selector and declaration block:
The selector points to an element and the declaration block contains one or more declarations separated by semicolons and surrounded by curly brackets. Each declaration contains a CSS property name (color, font size, etc.) and an assigned value, separated by a colon.
CSS selectors are used to select the element for styling. They can be divided into five categories:
- Simple selectors (based on name, ID, class)
- Combinator selectors (based on a specific relationship between them)
- Pseudo-class selectors (based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (based on an attribute or attribute value)
An external style sheet allows the entire look of a website to be changed from a single file. Each HTML page must include a reference to the external style sheet file, defined in the <link> element of the head section. External style sheets can be written in any text editor and are saved with a .css extension. The external .css file should not contain any HTML tags.
As the CSS code is in a separate document when using external style sheets, HTML files have a cleaner structure and are smaller in size. However, pages may render incorrectly until the external CSS is loaded, and uploading or linking to multiple CSS files can increase a site’s download time.
Internal, or embedded, style sheets can give single pages a unique style. The internal style is defined inside the <style> element, inside the head section of the HTML page. Internal CSS allows for the use of class and ID selectors, and they don't require the upload of multiple files with the code input in the same HTML file. The main disadvantage of internal style sheets is an increase in the page's size and loading time.
Inline style sheets style a specific HTML element and are added to the HTML tag without using selectors. Inline CSS loses many of the advantages of a style sheet as it mixes content with presentation, complicating the management of the site and is typically used sparingly. Inline CSS is helpful as a quick method of testing or previewing changes as you don't need to create or upload separate documents.
When multiple style sheets define properties for the same element, the value from the last read style sheet is used. For example, if an internal style is defined after the link to an external style sheet, it takes precedence.
If more than one style is specified for an HTML element, all the styles will cascade into a new "virtual" style sheet with the following priority:
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section)
- Browser default
