What is CSS? — Cascading Style Sheets Explained

Definition

CSS (Cascading Style Sheets) is the language used to describe the visual presentation of HTML documents. It separates content structure (HTML) from visual design, allowing the same HTML to be styled differently for screens, print, or screen readers. CSS uses selectors to target HTML elements and declarations (property: value pairs) to apply styles. The "cascading" refers to the set of rules that determine which styles apply when multiple rules conflict.

How It Works

CSS works through a cascade of specificity and inheritance. When multiple rules match the same element, the one with highest specificity wins (inline styles > IDs > classes > elements). If specificity is equal, the last rule in source order wins. Many properties like color and font-size are inherited by child elements. CSS layout is primarily handled by the box model (margin, border, padding, content), flexbox (one-dimensional layout), and CSS Grid (two-dimensional layout). Media queries enable responsive design by applying different styles at different viewport sizes.

Common Use Cases

• ▸Styling colors, typography, spacing, and borders on web pages
• ▸Building responsive layouts with flexbox and CSS Grid
• ▸Creating hover effects, transitions, and animations without JavaScript
• ▸Implementing dark mode with CSS custom properties (variables)
• ▸Targeting print, screen, or accessibility features with media queries

Example

/* Flexbox centering */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Responsive column */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Related Tools