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 It 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
Loading code...Frequently Asked Questions
What is the difference between CSS Grid and Flexbox?
Flexbox is one-dimensional, designed for laying out items in a row or column. CSS Grid is two-dimensional, allowing you to control both rows and columns simultaneously. Use Flexbox for component layouts and Grid for page-level layouts.
How does CSS specificity work?
CSS specificity determines which styles apply when multiple rules target the same element. Inline styles have highest priority, followed by IDs, then classes/attributes/pseudo-classes, then elements. More specific selectors override less specific ones.
What are CSS custom properties (variables)?
CSS custom properties (variables) are entities defined with -- prefix that store values for reuse throughout a stylesheet. They're declared like --primary-color: #3498db and used with var(--primary-color). They enable dynamic theming and easier maintenance.
How do media queries work for responsive design?
Media queries apply CSS rules based on device characteristics like viewport width. Syntax: @media (max-width: 768px) { ... }. They enable responsive design by changing layouts, font sizes, or hiding elements at different screen sizes.
What is the CSS box model?
The CSS box model describes how elements are rendered: content (innermost), padding, border, and margin (outermost). By default, width/height apply to content only. Use box-sizing: border-box to include padding and border in the element's total size.