Cascading Style Sheets - The language for styling web pages
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
CSS is one of the cornerstone technologies of the World Wide Web, alongside HTML and JavaScript. It allows web developers to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.
Control colors, fonts, sizes, spacing, and other visual aspects of web elements
Create flexible layouts with Flexbox, Grid, and positioning properties
Create websites that work on all devices using media queries and responsive units
Create smooth transitions and animations without JavaScript
CSS consists of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule has three parts:
selector {
property: value;
property: value;
}
Points to the HTML element you want to style
The style attribute you want to change (color, font, etc.)
The value you want to assign to the property
Here's a simple example of CSS styling:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
.header {
background: #35424a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
.button {
display: inline-block;
background: #0d6efd;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
.button:hover {
background: #0b5ed7;
}
This is an example of text styled with CSS. Notice the font, spacing, and colors.
Sample ButtonCSS selectors are patterns used to select the element(s) you want to style. Here are some common selectors:
Selector | Example | Description |
---|---|---|
Element | p |
Selects all <p> elements |
ID | #header |
Selects the element with id="header" |
Class | .button |
Selects all elements with class="button" |
Attribute | [target] |
Selects all elements with a target attribute |
Pseudo-class | a:hover |
Selects links on mouse hover |
The first official specification of CSS, published by the W3C. Included basic font properties, colors, text attributes, and alignment.
Added support for positioning, z-index, media types, and bidirectional text. CSS2.1 fixed errors in CSS2.
Modular approach with separate specifications for different features. Introduced animations, transitions, gradients, flexbox, grid, and much more.
Not a single monolithic specification but rather various level 4 modules that extend CSS3 with new selectors and features.
While CSS is powerful on its own, various tools have been developed to extend its capabilities:
Pre-prepared libraries that allow for easier, more standards-compliant styling
Scripting languages that extend CSS and get compiled into regular CSS