CSS selectors, layouts and responsive design

Adding CSS to a page

CSS (Cascading Style Sheets) is usually written in a separate file and linked from the <head>:

<link rel="stylesheet" href="styles.css">

A CSS rule has a selector and a block of declarations:

h1 {
  color: #0B1220;
  font-size: 2rem;
}

h1 is the selector, color is a property and #0B1220 is its value.

Selectors

p { line-height: 1.6; }               /* every <p> element */
.card { border-radius: 12px; }        /* every element with class="card" */
#signup { background: #2563EB; }      /* the one element with id="signup" */
nav a { text-decoration: none; }      /* <a> elements inside <nav> */
a:hover { color: #22D3EE; }           /* links while the pointer is over them */

Classes are the workhorse of CSS: you can reuse a class on many elements, and an element can have several classes (class="card featured"). IDs must be unique, so reserve them for one-off elements.

When two rules target the same element, the more specific selector wins (an id beats a class, which beats an element). If specificity is equal, the rule that comes later in the file wins. This is the cascade.

The box model

Every element is a rectangular box made of four layers:

.card {
  padding: 16px;              /* space inside the border */
  border: 1px solid #CBD5E1;
  margin: 24px 0;             /* space outside the border */
}

* {
  box-sizing: border-box;     /* width includes padding and border */
}

With box-sizing: border-box, a box declared width: 300px stays 300px wide even after you add padding, which makes layouts far easier to reason about.

Layout with Flexbox

Flexbox arranges children in a row or column and distributes space between them:

.nav {
  display: flex;
  justify-content: space-between; /* spread items along the main axis */
  align-items: center;            /* centre items on the cross axis */
  gap: 16px;                      /* space between items */
}

.cards {
  display: flex;
  flex-wrap: wrap;                /* wrap onto new lines when space runs out */
  gap: 24px;
}

.cards .card {
  flex: 1 1 250px;                /* grow, shrink, start at 250px */
}

With flex-wrap: wrap and flex: 1 1 250px, the cards sit side by side on wide screens and stack automatically on narrow ones. CSS Grid is another powerful layout system for two-dimensional layouts; Flexbox is the best place to start.

Responsive design with media queries

More than half of web traffic comes from phones, so pages must adapt to the screen width. Start with styles for small screens (mobile-first), then add media queries for larger ones:

.hero h1 {
  font-size: 1.75rem;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 3rem;
  }
}

The rule inside @media (min-width: 768px) applies only when the viewport is at least 768px wide. Remember the viewport <meta> tag from the previous lesson; without it, phones pretend to be a wide desktop screen and media queries don't behave as expected.