CSS (Cascading Style Sheets) controls how HTML content looks. It defines colors, spacing, layout, and typography across the web.

In this documentation, you'll learn core CSS concepts with examples you can copy and run.

CSS can be applied inline, embedded in the document, or linked as an external stylesheet.

/* Link a stylesheet */
<link rel="stylesheet" href="styles.css">

• Separation of concerns: HTML for structure, CSS for style
• Cascade and specificity control which rules win
• Responsive design adapts to different screens

Selectors target elements to style. They can be simple or complex, matching by tag name, class, ID, attribute, or state.

p { line-height: 1.7; }
.highlight { background: yellow; }
#hero { padding: 2rem; }

a[target="_blank"] { text-decoration: underline; }
a:hover { text-decoration: none; }

• Element: h1, p, button
• Class: .card, .btn
• ID: #navbar
• Pseudo-class: :hover, :focus

Every element is a rectangle composed of content, padding, border, and margin. Understanding this model is fundamental to controlling layout precisely.

*, *::before, *::after { box-sizing: border-box; }
.card {
  width: 300px;
  padding: 1rem;
  border: 1px solid #ddd;
  margin: 1rem auto;
}

• Content box: width excludes padding/border
• Border box: width includes padding/border — the preferred default

Flexbox is a one-dimensional layout system designed for aligning items along a single axis — horizontally or vertically with ease.

.toolbar {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.item { flex: 1 1 200px; }

• Control axis with flex-direction
• Align cross-axis with align-items
• Distribute space with justify-content
• Wrap overflow with flex-wrap: wrap

CSS Grid is a two-dimensional layout system — perfect for page-level structure where you need control over both rows and columns simultaneously.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.gallery__item--wide { grid-column: span 2; }

Good typography improves readability, establishes visual hierarchy, and gives your design a distinctive personality. Start with a solid type scale.

html { font-size: 16px; }
h1 { font-size: 2rem; }
p  { font-size: 1rem; line-height: 1.7; }

• Keep body text between 16–18px for comfortable reading
• Optimal line length is 60–75 characters per line
• Use rem units so text scales with user preferences

Color sets mood, guides attention, and is critical for accessibility. Always verify contrast ratios against WCAG 2.1 guidelines before shipping.

.hero {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url('hero.jpg') center/cover no-repeat;
  color: white;
  padding: 4rem 2rem;
}

• Meet WCAG contrast guidelines — aim for 4.5:1 minimum
• Use CSS custom properties for consistent theming
• Support both light and dark modes with prefers-color-scheme

Responsive design ensures your site works across all screen sizes using fluid layouts, flexible images, and strategic media queries.

.card { padding: 1rem; }
@media (min-width: 768px) {
  .card { padding: 2rem; }
}