What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML and XML documents. It controls the visual appearance of web pages including layout, colors, fonts, and responsive design.
Quick Facts
| Full Name | Cascading Style Sheets |
|---|---|
| Created | 1996 (W3C Recommendation) |
| Specification | Official Specification |
How CSS Works
CSS was first proposed by Håkon Wium Lie in 1994 and became a W3C recommendation in 1996. The 'cascading' refers to the priority scheme that determines which style rules apply when multiple rules target the same element. CSS separates content (HTML) from presentation, making websites easier to maintain and more accessible. Modern CSS includes powerful features like Flexbox, Grid, custom properties (variables), animations, and media queries for responsive design. CSS3 introduced modular specifications that continue to evolve.
Key Characteristics
- Separates content from presentation
- Cascading priority system for style rules
- Supports responsive design with media queries
- Includes Flexbox and Grid layout systems
- Supports animations and transitions
- Custom properties (CSS variables) for reusability
Common Use Cases
- Website styling and theming
- Responsive web design
- UI component styling
- Print stylesheets
- Animation and visual effects
Example
/* Basic selectors */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
/* Class selector */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Flexbox layout */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/* CSS Grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* Media query for responsive design */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
/* CSS variables */
:root {
--primary-color: #3498db;
}
.button {
background: var(--primary-color);
}