CSS Getting Started

Getting started with CSS — setting up stylesheets, understanding selectors, the cascade, and applying styles to HTML elements.

CSS (Cascading Style Sheets) is the language used to describe the presentation of HTML documents. Together with HTML and JavaScript, it forms the backbone of web development.

Setup

No installation is needed — CSS runs natively in every browser. Just create a .css file and link it from your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, CSS!</h1>
</body>
</html>

Or use a <style> tag for inline styles:

<style>
  h1 { color: navy; }
</style>

Selectors

CSS selectors target HTML elements for styling:

/* Element selector */
p { margin-bottom: 1em; }

/* Class selector */
.card { padding: 1rem; border: 1px solid #ccc; }

/* ID selector */
#header { background: #333; color: #fff; }

/* Attribute selector */
input[type="text"] { border: 1px solid #999; }

/* Pseudo-class */
a:hover { text-decoration: underline; }

/* Combinators */
nav > ul { list-style: none; }
h2 + p { font-size: 0.9em; }

The Cascade

When multiple rules target the same element, CSS resolves conflicts using:

Specificity — ID > class > element selectors
Source order — later rules win when specificity is equal
Importance — !important declarations override everything (use sparingly)

p          { color: black; }    /* specificity: 0-0-1 */
.text      { color: gray; }     /* specificity: 0-1-0 — wins */
#intro     { color: navy; }     /* specificity: 1-0-0 — wins over both */

The Box Model

Every element is a rectangular box with four layers:

┌─────────────────────────────────┐
│             margin              │
│  ┌───────────────────────────┐  │
│  │          border            │  │
│  │  ┌─────────────────────┐  │  │
│  │  │      padding        │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    content    │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Use box-sizing: border-box so width and height include padding and border:

*, *::before, *::after {
  box-sizing: border-box;
}

Layout

Flexbox

One-dimensional layout for rows or columns:

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

Grid

Two-dimensional layout for rows and columns:

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

Common Properties

.element {
  /* Typography */
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;

  /* Spacing */
  margin: 0 auto 1rem;
  padding: 0.75rem 1rem;

  /* Background */
  background: linear-gradient(135deg, #667eea, #764ba2);

  /* Borders */
  border-radius: 0.5rem;
  border: 1px solid #ddd;

  /* Shadows */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Responsive Design

Use media queries to adapt layouts to different screen sizes:

.sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar {
    display: block;
    width: 250px;
  }
}

Preprocessors

For larger projects, consider a preprocessor like Sass that adds variables, nesting, and mixins on top of CSS.

Tooling

Autoprefixer — adds vendor prefixes automatically
stylelint — lint CSS for errors and conventions
PurgeCSS — remove unused CSS for production

Next: Sass Getting Started