CSS Basics

CSS (Cascading Style Sheets) controls how HTML elements look in the browser. It handles colours, fonts, spacing, and layout. You write CSS as property: value; pairs inside a selector rule.

h1 {
  color: navy;
  font-size: 2rem;
}

How to add CSS to HTML

There are three ways to connect CSS to an HTML file.

External stylesheet (recommended)

Create a separate .css file and link it in the <head>. This is the standard approach for any real project because it keeps your styles separate from your HTML and applies to every page that links to it.

<head>
  <link rel="stylesheet" href="style.css" />
</head>

Internal style tag

Write CSS directly inside a <style> element in the <head>. Useful for quick prototypes or single-page demos, but not ideal for larger projects.

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

Inline style attribute

Apply CSS directly to a single element with the style attribute. Avoid this in most cases: it is hard to maintain, overrides almost everything else, and scatters your styles throughout the HTML.

<h1 style="color: navy;">Hello</h1>

Selectors

A selector targets which HTML elements a rule applies to.

Element selector: targets every element of that type.

p {
  line-height: 1.6;
}

Class selector: targets elements with a matching class attribute. Prefix with .. Classes are the most common selector for real projects because you can reuse them on many elements.

.card {
  border: 1px solid #ccc;
  padding: 1rem;
}

<div class="card">Content here</div>

ID selector: targets a single element with a matching id attribute. Prefix with #. IDs should be unique per page. Prefer classes for styling; IDs are better suited for JavaScript hooks or anchor links.

#main-header {
  background-color: #1a1a2e;
}

The cascade

When two CSS rules target the same element, the browser needs to decide which one wins. It works through three criteria in order:

Origin: browser default styles lose to your author styles, which lose to inline styles.
Specificity: a more specific selector beats a less specific one (see below).
Source order: if specificity is equal, the rule that appears last in the file wins.

p {
  color: blue;
}

p {
  color: red; /* this wins because it comes last */
}

Specificity

Specificity is a score that determines how specific a selector is. Higher specificity beats lower specificity, regardless of source order.

Selector type	Score
Inline style (`style=""`)	1,0,0,0
ID (`#id`)	0,1,0,0
Class (`.class`), pseudo-class (`:hover`), attribute (`[href]`)	0,0,1,0
Element (`p`, `h1`), pseudo-element (`::before`)	0,0,0,1

A practical example: a class beats an element selector, so the text below is green even though the element rule comes last.

p {
  color: blue; /* specificity: 0,0,0,1 */
}

.intro {
  color: green; /* specificity: 0,0,1,0 -- this wins */
}

<p class="intro">This text is green.</p>

The box model

Every HTML element is a rectangular box made of four layers, from inside out:

Content: the actual text, image, or other content
Padding: space between the content and the border
Border: a line (visible or invisible) around the padding
Margin: space outside the border, separating this element from others

+---------------------------+
|         margin            |
|  +---------------------+  |
|  |       border        |  |
|  |  +---------------+  |  |
|  |  |    padding    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

By default, width and height only apply to the content area. Padding and border are added on top of that, which makes sizing unintuitive. For example, a div with width: 200px and padding: 20px ends up 240px wide.

The fix is box-sizing: border-box, which makes width and height include the padding and border. This is almost always what you want.

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

Add this rule at the top of your stylesheet. Now a div with width: 200px and padding: 20px stays exactly 200px wide.