Lesson 1: CSS Fundamentals

In this lesson, you’ll learn the core principles of CSS: how selectors target elements, how specificity determines which rules apply, the cascade order, and the box model that defines layout. We’ll cover type, class, ID, and attribute selectors, explore how rules override one another, and see how padding, border and margin combine to form an element’s box.

Selectors, Specificity & the Box Model

CSS selectors let you target HTML elements to apply styles. Specificity rules decide which styles win when multiple rules match the same element. The box model describes how each element is rendered: content area plus padding, border, and margin. 

/* Type selector and box model */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* Class selector */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Specificity example: ID beats class */
#header .nav a.active {
  color: var(--clr-primary);
}

/* Box model breakdown */
.box {
  width: 200px;
  padding: 1rem;
  border: 2px solid #ccc;
  margin: 1rem;
}

Key Points

  • Selectors: type, class, ID, attribute, pseudo-class, pseudo-element.
  • Specificity: rules of thumb: inline > ID > class/attribute > type.
  • Cascade: later rules override earlier ones if specificity ties.
  • Box Model: content + padding + border + margin define element size and spacing.
← Back to Course Next: Flexbox & Grid →