WebBuilding

Languages and formats

CSS

Summary

CSS (Cascading Style Sheets) is the language that controls how web pages look, from colors and fonts to the layout of the whole page, kept separate from the HTML that holds the content. Håkon Wium Lie proposed it at CERN on October 10, 1994, and developed it with Bert Bos; CSS level 1 became a W3C standard on December 17, 1996. Since the 2000s CSS has grown as separate modules rather than numbered versions, adding flexbox, grid, variables and container queries.

Web Building Encyclopedia · Languages and formats · Last reviewed October 22, 2026 · 14 min read

What CSS is

CSS, short for Cascading Style Sheets, is the language that controls how web pages look: colors, fonts, spacing and the arrangement of everything on the screen. HTML describes what each part of a page is, and CSS describes how it should be presented.1

CSS is built from rules. Each rule starts with a selector, which picks the HTML elements to style, followed by a declaration block in curly braces. Inside the block, each declaration pairs a property with a value.2

For example, the rule h1 { color: red; font-size: 2.5em; } makes every top-level heading red and two and a half times the base text size. Here h1 is the selector, color is a property and red is its value.2

Browsers apply their own default style sheet to every page, which is why plain, unstyled HTML is still readable. Those defaults live inside the browser; a site’s own style sheets build on top of them.2

Styles can be written into the page itself or kept in separate .css files that many pages share.2 When a page loads, the browser gathers the rules from all of these places, sorts them and applies them to its model of the page, producing a render tree that is then painted to the screen.2

Servers label CSS files with the text/css media type, registered in March 1998 by Håkon Wium Lie, Bert Bos and Chris Lilley of the W3C. Their memo noted the type had already been in use since 1995.3

What “cascading” means

A page can receive styles from several sources at once, and the cascade is the set of rules that decides which one wins. The origin and order of rules matter: when two rules are equally specific, the later one is used.4

Specificity is the browser’s way of ranking selectors. A rule aimed at a class, such as .main-heading, beats a rule aimed at every h1, even if the h1 rule comes later.4

Inheritance is the third idea. Some properties, such as text color, pass from an element to the elements inside it unless something overrides them, while others do not.4

The browser, the person using it and the site’s author can all supply styles. Normal author styles beat browser defaults, but declarations marked !important reverse that order, so a user’s important settings outrank an author’s.4

Keeping presentation in shared style sheets means one file can restyle a whole site. The CSS Zen Garden, a showcase by designer Dave Shea, makes the point by applying many very different designs to the same HTML file, where only the external CSS changes.5

The problem CSS solved

HTML started as a logical markup language: authors said what text was, and each browser decided how it looked. Authors had little say over fonts and colors, and Lie’s thesis describes this as a frequent complaint.6

Lie cites a message Marc Andreessen sent to the www-talk mailing list in early 1994, answering authors who wanted that control: “Sorry, you’re screwed.”6

Browser makers filled the gap with presentational tags. Netscape’s browser supported new tags such as CENTER, which centered text.6 HTML 3.2, a W3C standard of January 1997, added a FONT element for changing the size and color of text.7

Designers also turned to tables. MDN describes how people used HTML tables to lay out whole pages, with one row for the header, another for the content columns and another for the footer, because CSS support in browsers was so limited.8

Those layouts caused lasting problems. They confused screen readers used by blind visitors, produced bloated “tag soup” that was hard to maintain, and did not adapt to different screen sizes.8

Another workaround was to set text as pictures. Lie notes that text stored as images is no longer machine-readable.6

His thesis argues that presentational tags pulled HTML away from describing structure, put device independence, accessibility and reuse of content at risk, and shifted the balance of power from readers to authors, since a reader could no longer influence a page that arrived fully formatted.6

The standards bodies came to agree. HTML 4.01, published in December 1999, deprecated FONT, BASEFONT and CENTER, meaning they were kept for compatibility but marked for removal, and discouraged the remaining presentational elements in favor of style sheets.9

The 1994 proposal

Håkon Wium Lie was working at CERN, where the web began, when he wrote the first CSS proposal.10 “Cascading HTML Style Sheets: A Proposal” is dated October 10, 1994.11

Lie later noted that he published it three days before Netscape announced its new browser.6 Andreessen announced the first beta of what became Netscape Navigator on the www-talk list on October 13, 1994.10

The proposal’s central idea was that readers and authors would use the same notation, and that their wishes would be combined. The reader’s browser starts with its own preferences and hands the remaining influence over to the style sheets a document links to.11

In the first draft, each line could request a percentage of influence. The proposal’s example h1.font.size = 24pt 100% asks for full control over the size of top-level headings; when two sheets ask for a share of the same value, a weighted average is calculated.11

The proposal also allowed style to depend on the reader’s situation, such as screen size, and on the output medium, such as print or speech.11 It described itself as a work in progress with open questions, including how to resolve conflicts between general and specific rules.11

One example shows how far the idea reached: a rule could give a page a pale yellow background if the document was more than three days old, and white otherwise.11 The draft also listed the lack of variables as a known limitation,11 a gap CSS closed only when custom properties reached all major browsers in April 2017.12

CSS was not the only candidate. Bert Bos’s history lists a style language in Pei Wei’s Viola browser, around ten other proposals sent to mailing lists, and DSSSL, a complex style and transformation language being developed at ISO for printing SGML documents.10

What set CSS apart, Bos writes, was that it “cascaded,” balancing the wishes of the author, the reader and the display device.10

Bert Bos had built Argo, a highly customizable browser with style sheets, as part of a project to make the internet accessible to humanities scholars.10 He joined Lie on CSS, and the two worked out the core ideas at a whiteboard in Sophia-Antipolis, France, in the summer of 1995.6

CSS was presented at a web conference in Chicago in 1994 and again at the Third International WWW Conference in Darmstadt, Germany, held April 10 to 14, 1995. There Bos demonstrated style sheets in Argo, and Lie showed a modified version of the Arena browser.10 The www-style mailing list opened in May 1995.10

CSS1, CSS2 and CSS 2.1 (1996 to 2011)

Bos dates the W3C’s HTML Editorial Review Board to the end of 1995 and records that it took on CSS as a work item.10 Dave Raggett’s history of HTML dates the board to February 1996.13

CSS level 1 became a W3C Recommendation, the consortium’s term for a finished standard, on December 17, 1996. Edited by Lie and Bos, it described itself as “a simple style sheet mechanism that allows authors and readers to attach style” to HTML documents.14 In February 1997 CSS got its own W3C working group.10

CSS level 2 followed on May 12, 1998, edited by Bos, Lie, Chris Lilley and Ian Jacobs. It extended styling beyond HTML to XML documents and added media-specific style sheets for screens, speech devices, printers, braille devices and handheld devices.15

CSS2 also added positioning of content, table layout, downloadable fonts, automatic counters and numbering, and some user interface properties. Nearly every valid CSS1 style sheet remained valid CSS2.15

A revision of level 2, CSS 2.1, became a Recommendation on June 7, 2011, thirteen years after CSS2. Its editors were Bos, Tantek Çelik, Ian Hickson and Lie.16

The CSS 2.1 page now notes that several of its sections have been replaced by newer specifications, and points readers to the current CSS Snapshot for the list.16

Browser support battles

For its first years, writing CSS meant working around browsers. Microsoft’s Internet Explorer 3, released in August 1996, was the first commercial browser to support CSS.10

IE3 handled most color, background, font and text properties reliably but little of the box model, the rules for an element’s width, padding, borders and margins.10

Netscape went another way at first. In August 1996 it submitted JavaScript-Based Style Sheets (JSSS) to the W3C, a proposal by Lou Montulli, Brendan Eich, Scott Furman, Donna Converse and Troy Chevalier to use JavaScript as the style sheet language.17

Bos describes Netscape’s first CSS support as a half-hearted attempt to stop Microsoft claiming better standards compliance. Navigator 4 translated CSS rules into JavaScript internally, and many CSS properties could not be used in it because the developers lacked time to test them.10

Test suites followed. A CSS1 test suite was written so that browser makers could fix problems early, and in October 1998 Todd Fahrner created the first “acid” test.10

The Web Standards Project (WaSP), a grassroots coalition that launched in 1998, argued that incompatible browsers raised development costs, locked out users and fragmented the web. It promoted W3C recommendations under the name “web standards.”18

In November 1998 WaSP published “IE’s Top 10 CSS Problems,” and Opera 3.5 shipped with support for most of CSS1. Bos notes that Opera tested its CSS before shipping, which he describes as unusual in the industry at the time.10 Lie himself joined Opera as chief technology officer in 1999.10

Internet Explorer for Mac had better CSS support than the Windows version. Microsoft discontinued it in 2003, the year Apple announced Safari.10 These fights belong to the wider story of the browser wars.

On April 13, 2005, WaSP released Acid2, a test page “designed to push the limits of HTML, CSS, and PNG support in browsers and authoring tools.” Apple’s Dave Hyatt reported starting work on making Safari pass it that day.19

WaSP later reported that Opera 9 passed Acid2 in July 2006 and that Internet Explorer 8 passed in December 2007.20

Web fonts came later. Bos writes that this changed in 2008: in May 2008 Microsoft and Monotype submitted the EOT font format to the W3C, and a new format, WOFF, was then developed.10

“CSS3” and the move to modules

After CSS2, the working group stopped writing one large specification. A W3C Working Draft titled “Introduction to CSS3,” dated May 23, 2001 and edited by Eric A. Meyer and Bert Bos, set out a plan to split CSS into modules.21

The reasoning was practical: modules could be updated one at a time instead of revising a single document with dozens of changes, and implementers could support some modules fully without supporting all of them.21

That is why “CSS3” was never a single release. The W3C’s CSS Snapshot 2026, a Group Note dated June 22, 2026, states that CSS has levels rather than versions and uses “Level 3” only to tell the modular work apart from the earlier monolithic specifications.22

The same document says there is no CSS Level 4. Individual modules can reach level 4 or higher, such as Selectors Level 4, but the language as a whole no longer has levels.22

By 2016 CSS had more than 60 modules, and the working group had grown from around 15 members in 1999 to around 115.10

CSS also spread beyond screens. Bos reports that the publisher Hachette Livre sold fifty million books made with CSS between 2010 and 2016, and that by December 2016 the W3C was merging its operations with IDPF, the International Digital Publishing Forum.10

The snapshot sorts modules by stability. Its top tier, the official definition of CSS, includes Flexible Box Layout Level 1, Cascading and Inheritance Level 4 and Selectors Level 3. Grid Layout Levels 1 and 2 and Cascading and Inheritance Level 5 sit in the next tier as reliable Candidate Recommendations, the stage before a final standard.22

Responsive design and modern layout

Media queries, which let a style sheet apply rules only when conditions such as screen width are met, became a W3C Recommendation on June 19, 2012.23

Two years earlier, on May 25, 2010, Ethan Marcotte had published “Responsive Web Design” in A List Apart. He combined three ingredients: fluid grids sized in proportions instead of fixed widths, flexible images that scale within their containers, and media queries.24

Responsive pages also need a viewport meta tag in their HTML. Without it, many phones render the page in a virtual window wider than the screen (980 pixels in MDN’s example) and shrink it, so media queries written for narrow screens never apply.25

Search engines now expect this approach. Google says it uses the mobile version of a site’s content for indexing and ranking, and that it recommends responsive web design as the easiest pattern to implement and maintain.26 See mobile-first indexing.

Flexbox

Flexible box layout, known as flexbox, first appeared as a W3C Working Draft on July 23, 2009, edited by L. David Baron of Mozilla, with earlier authors including Ian Hickson and Apple’s David Hyatt.27

Flexbox is a one-dimensional layout method: it arranges items in a row or a column and lets them grow or shrink to fill the space. It makes once-awkward tasks simple, such as centering a block vertically inside its parent or giving all columns the same height.28

MDN lists the flex property as available across browsers since September 2015.29 HTTP Archive’s 2022 Web Almanac found flexbox on 74% of mobile pages.30

Grid

CSS Grid Layout began as a W3C Working Draft on April 7, 2011, with three editors from Microsoft and one from Disruptive Innovations.31 It is a two-dimensional system that organizes content into rows and columns at the same time.32

The grid-template-columns property, which defines a grid’s columns, has been available across browsers since October 2017, and now accepts a subgrid value that lets a nested grid reuse its parent’s columns.33

Grid introduced its own unit, fr, which hands out a share of the remaining space. The declaration grid-template-columns: 50px 1fr, for example, makes a fixed 50-pixel column and gives everything left over to a second column.33

Can I use, which combines browser support tables with StatCounter usage data, put support for CSS Grid at 97.46% of global browser usage for September 2026, including 0.21% with partial support.34 Adoption has trailed support: the 2022 Web Almanac found grid on 12% of mobile pages.30

The newer toolbox

Since 2017, several major features have reached all major browsers. The dates below come from MDN’s “Baseline” labels, which give the month a feature became available across the major browsers.12

Custom properties

Custom properties, often called CSS variables, are property names that start with two dashes, such as –brand-color. They hold a value that other declarations reuse through the var() function, so a color can be defined once and changed in one place.12

They have been available across browsers since April 2017.12 The 2022 Web Almanac found at least one var() function on 43% of pages.30

Site builders use them too. WordPress automatically generates a custom property for each preset in a block theme, so a color preset with the slug contrast becomes –wp–preset–color–contrast.35

Container queries

Media queries respond to the size of the whole browser window. Container queries, written with the @container rule, apply styles based on a containment context, an element marked as a container, so a component such as a product card can adapt to the space it is given wherever it is placed.36

They have been available across browsers since February 2023.36 Can I use put support at 95.89% of global usage for September 2026.37

The :has() selector

For most of CSS’s history, a selector could not style an element based on what it contained. The :has() pseudo-class changes that: it matches an element if any of the selectors passed to it match elements relative to it, such as a card that contains an image.38

It has been available across browsers since December 2023,38 with support at 95.91% of global usage for September 2026, according to Can I use.39

Cascade layers and nesting

Cascade layers, declared with @layer, let authors group styles into layers and set the order of precedence between them.40 That lets an author decide, for example, that a site’s own overrides take precedence over a framework’s styles, instead of relying on ever more specific selectors. Layers have been available across browsers since March 2022.40

Native nesting lets authors write a rule inside another rule, with the & selector standing for the parent, so related styles stay together. It has been available across browsers since December 2023.41

What browsers are working on

Browser makers now coordinate their priorities in a yearly Interop project. Interop 2026, announced in February 2026 by Apple, Google, Igalia, Microsoft and Mozilla, includes anchor positioning, container style queries, scroll-driven animations, view transitions, the contrast-color() and shape() functions, and the zoom property.42 Anchor positioning and the zoom property carried over from Interop 2025.42

Frameworks, builders and CSS today

Many sites use a framework, a ready-made collection of CSS, rather than writing every rule from scratch. Bootstrap was created at Twitter in mid-2010 and was known internally as Twitter Blueprint before it was open-sourced.43 Its creators are Mark Otto and Jacob Thornton.44

Bootstrap’s history tracks the language. Version 2 added optional responsive styles, version 3 was rewritten to be mobile first, version 4 moved to the Sass preprocessor and to flexbox, and version 5 dropped jQuery and adopted CSS custom properties.43

W3Techs detected Bootstrap on 14.6% of all websites as of October 22, 2026.45

Tailwind CSS takes a different approach. It describes itself as “a utility-first CSS framework” whose small single-purpose classes, such as flex, pt-4 and text-center, are combined directly in the HTML.46 Version 4.0, which Adam Wathan’s announcement described as an all-new version of the framework built for performance and flexibility, was released on January 22, 2025.47

Website builders generate CSS for their users. Webflow, for example, includes a CSS folder alongside the HTML pages when a site’s code is exported.48

Style sheets add weight to every page. The 2022 Web Almanac put the median mobile page’s style sheet transfer size at 68 KB.30

That weight matters because browsers treat each style sheet as render-blocking by default, holding back rendering until they know whether the CSS is needed. MDN advises removing unused styles and splitting CSS so that only what a page needs loads first.49

Timeline

  1. W3C publishes CSS Snapshot 2026, stating there is no CSS Level 422
  2. Interop 2026 announced, including anchor positioning and view transitions42
  3. Tailwind CSS 4.0 released47
  4. :has() and CSS nesting available across major browsers38
  5. Container queries available across major browsers36
  6. Cascade layers (@layer) available across major browsers40
  7. CSS Grid available across major browsers33
  8. Custom properties (CSS variables) available across major browsers12
  9. Media Queries becomes a W3C Recommendation23
  10. CSS 2.1 becomes a W3C Recommendation16
  11. Ethan Marcotte publishes "Responsive Web Design"24
  12. Web Standards Project releases the Acid2 test19
  13. "Introduction to CSS3" draft sets out the modular plan21
  14. CSS level 2 becomes a W3C Recommendation15
  15. CSS level 1 becomes a W3C Recommendation14
  16. Internet Explorer 3 ships as the first commercial browser with CSS10
  17. Håkon Wium Lie publishes "Cascading HTML Style Sheets: A Proposal"11

What it means for your website

Most site owners never edit CSS directly, but it decides whether a site works on phones, whether text is readable and how fast pages appear.

  • Check phones first: make sure your theme or builder produces a responsive layout and includes the viewport meta tag; without it, phone layouts may never kick in.25 Google indexes the mobile version of your content.26 Our glossary explains responsive design.
  • Check contrast: low-contrast text was the most common accessibility failure in WebAIM’s 2026 scan, found on 83.9% of the top million home pages.50 Text and background colors are both CSS settings, so this is usually fixable in the theme’s color options.
  • Keep custom CSS in one place: changes pasted into individual pages are hard to find later. Put them in your theme’s global styles or custom CSS panel. On WordPress block themes, colors set as presets become CSS variables used across the site.35 We build on WordPress every week, and global presets are where we make color and font changes. See template vs theme.
  • Watch the weight: page builders, frameworks and plugins can each add their own style sheets, and each one can delay the first paint.49 If a speed test flags render-blocking or unused CSS, remove plugins you no longer use before anything else. Our Core Web Vitals entry explains how speed is measured.
  • Newer features are safe to ask for: grid, container queries and :has() each work in about 96% to 97% of browsers in use as of September 2026,343739 so they are reasonable to use on a new build.

See also

References

  1. HTML: HyperText Markup Language. MDN Web Docs (Mozilla). accessed October 22, 2026.
  2. What is CSS?. MDN Web Docs (Mozilla). accessed October 22, 2026.
  3. RFC 2318: The text/css Media Type. IETF (H. Lie, B. Bos, C. Lilley). 1998-03. accessed October 22, 2026.
  4. Handling conflicts (cascade, specificity and inheritance). MDN Web Docs (Mozilla). accessed October 22, 2026.
  5. CSS Zen Garden. Dave Shea. accessed October 22, 2026.
  6. Cascading Style Sheets (PhD thesis). Håkon Wium Lie, University of Oslo. 2005. accessed October 22, 2026.
  7. HTML 3.2 Reference Specification. W3C (Dave Raggett). 1997-01-14. accessed October 22, 2026.
  8. HTML table basics. MDN Web Docs (Mozilla). accessed October 22, 2026.
  9. HTML 4.01 Specification, 15: Alignment, font styles, and horizontal rules. W3C. 1999-12-24. accessed October 22, 2026.
  10. A brief history of CSS until 2016. W3C (Bert Bos). 2016-12-17. accessed October 22, 2026.
  11. Cascading HTML Style Sheets: A Proposal. Håkon W Lie, hosted by W3C. 1994-10-10. accessed October 22, 2026.
  12. Custom properties (–*): CSS variables. MDN Web Docs (Mozilla). accessed October 22, 2026.
  13. A history of HTML (chapter 2 of Raggett on HTML 4). W3C (Dave Raggett, Jenny Lam, Ian Alexander, Michael Kmiec). 1998. accessed October 22, 2026.
  14. Cascading Style Sheets, level 1 (W3C Recommendation). W3C (Håkon Wium Lie, Bert Bos). 1996-12-17. accessed October 22, 2026.
  15. Cascading Style Sheets, level 2 (CSS2) Specification. W3C (Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs). 1998-05-12. accessed October 22, 2026.
  16. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. 2011-06-07. accessed October 22, 2026.
  17. JavaScript-Based Style Sheets (JSSS) initial proposal. Netscape, submitted to W3C. 1996-08-22. accessed October 22, 2026.
  18. History of the Web Standards Project. The Web Standards Project. accessed October 22, 2026.
  19. Acid2: Putting Browser Makers on Notice. The Web Standards Project. 2005-04-13. accessed October 22, 2026.
  20. Acid2. The Web Standards Project. accessed October 22, 2026.
  21. Introduction to CSS3 (W3C Working Draft). W3C (Eric A. Meyer, Bert Bos). 2001-05-23. accessed October 22, 2026.
  22. CSS Snapshot 2026 (W3C Group Note). W3C CSS Working Group. 2026-06-22. accessed October 22, 2026.
  23. Media Queries (W3C Recommendation). W3C. 2012-06-19. accessed October 22, 2026.
  24. Responsive Web Design. A List Apart (Ethan Marcotte). 2010-05-25. accessed October 22, 2026.
  25. <meta name="viewport">. MDN Web Docs (Mozilla). accessed October 22, 2026.
  26. Mobile site and mobile-first indexing best practices. Google Search Central. 2025-12-10. accessed October 22, 2026.
  27. Flexible Box Layout Module (W3C Working Draft). W3C. 2009-07-23. accessed October 22, 2026.
  28. Flexbox. MDN Web Docs (Mozilla). accessed October 22, 2026.
  29. flex. MDN Web Docs (Mozilla). accessed October 22, 2026.
  30. Web Almanac 2022: CSS. HTTP Archive (Rachel Andrew). 2022-09-26. accessed October 22, 2026.
  31. Grid Layout (W3C Working Draft). W3C. 2011-04-07. accessed October 22, 2026.
  32. CSS grid layout. MDN Web Docs (Mozilla). accessed October 22, 2026.
  33. grid-template-columns. MDN Web Docs (Mozilla). accessed October 22, 2026.
  34. CSS Grid Layout (level 1). Can I use. 2026-09. accessed October 22, 2026.
  35. Color (Theme Handbook: theme.json settings). WordPress.org. accessed October 22, 2026.
  36. @container. MDN Web Docs (Mozilla). accessed October 22, 2026.
  37. CSS Container Queries (Size). Can I use. 2026-09. accessed October 22, 2026.
  38. :has(). MDN Web Docs (Mozilla). accessed October 22, 2026.
  39. CSS :has() pseudo-class. Can I use. 2026-09. accessed October 22, 2026.
  40. @layer. MDN Web Docs (Mozilla). accessed October 22, 2026.
  41. & nesting selector. MDN Web Docs (Mozilla). accessed October 22, 2026.
  42. Interop 2026: Continuing to improve the web for developers. web.dev (Google, Rachel Andrew). 2026-02-12. accessed October 22, 2026.
  43. About Bootstrap (Bootstrap 5.3 documentation). Bootstrap. accessed October 22, 2026.
  44. twbs/bootstrap README. GitHub. accessed October 22, 2026.
  45. Usage statistics and market share of Bootstrap. W3Techs. 2026-10-22. accessed October 22, 2026.
  46. Tailwind CSS home page. Tailwind Labs. accessed October 22, 2026.
  47. Tailwind CSS v4.0. Tailwind CSS blog (Adam Wathan). 2025-01-22. accessed October 22, 2026.
  48. How do I export my Webflow site code?. Webflow Help Center. accessed October 22, 2026.
  49. CSS performance optimization. MDN Web Docs (Mozilla). accessed October 22, 2026.
  50. The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages. WebAIM. 2026. accessed October 22, 2026.

Web Building Encyclopedia. First published October 22, 2026. Last reviewed October 22, 2026. Every fact on this page is linked to a source we opened. Spotted an error? Write to [email protected].