Styling with CSS

What CSS Does

CSS (Cascading Style Sheets) controls how HTML content looks — its colours, fonts, sizes, spacing, borders, and layout. Separating style (CSS) from structure (HTML) means the same content can be restyled without rewriting it, and one style sheet can give a consistent look to an entire website.

The CSS Rule

A CSS rule has two parts: a selector (which HTML elements the rule applies to) and one or more declarations inside curly braces, each a property: value pair ending in a semicolon.

p {
  color: blue;
  font-size: 16px;
}

This rule selects every <p> element and makes its text blue and 16 pixels in size. Here p is the selector, and color: blue; and font-size: 16px; are two declarations.

Three Ways to Apply CSS

1. Inline CSS — written directly on a single element using its style attribute. It affects only that one element and is best kept for rare, one-off tweaks.

<p style="color: red; text-align: center;">This paragraph is red and centred.</p>

2. Internal CSS — written inside a <style> block in the page's <head>. It styles the whole of that one page.

<head>
  <style>
    body { background-color: #f0f0f0; }
    h1   { color: navy; }
  </style>
</head>

3. External CSS — written in a separate .css file and linked into the page with a <link> tag in the <head>. This is the preferred method for a real website, because one file can style many pages, giving a consistent look and making changes easy.

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

and the linked style.css file might contain:

body { font-family: Arial, sans-serif; margin: 20px; }
h1   { color: navy; text-align: center; }
p    { line-height: 1.5; }

Common CSS Properties

A beginner will use these properties most often:

• color — the colour of the text.
• background-color — the background colour of an element.
• font-family — the typeface (e.g. Arial).
• font-size — the size of the text (e.g. 16px).
• text-align — horizontal alignment (left, right, center).
• border — a border around an element (e.g. 1px solid black).
• margin — space outside an element's border.
• padding — space inside an element, between its content and its border.

Classes and IDs

To style only some elements rather than every element of a type, CSS uses classes and IDs. A class is reusable across many elements and is selected with a dot; an ID is meant to identify one unique element and is selected with a hash.