CSS Fundamentals and the Box Model

What CSS is and how to apply it

CSS (Cascading Style Sheets) is the language used to describe how HTML elements should look — their colours, fonts, sizes, spacing, and position. Keeping style in CSS, separate from the HTML content, means you can restyle an entire website by editing one style sheet without touching the content.

A CSS rule has two parts: a selector (which element(s) it applies to) and a declaration block (one or more property: value; pairs inside curly braces):

h1 {
  color: navy;
  font-size: 32px;
  text-align: center;
}

There are three ways to attach CSS to a page:

1. Inline — using the style attribute directly on one tag. Used sparingly:

   <p style="color: red;">Warning</p>
   

2. Internal (embedded) — inside a <style> block in the page's <head>; it styles that one page:

   <head>
     <style>
       p { color: green; }
     </style>
   </head>
   

3. External — placed in a separate .css file and linked with <link>. This is the best practice, because one file can style many pages:

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

Selectors

Selectors decide which elements a rule targets. The three you use most are:

• Element (type) selector — targets every element of a kind: p { ... } styles all paragraphs.
• Class selector — starts with a dot and targets every element carrying that class: the rule .note { ... } styles <p class="note">. A class can be reused on many elements.
• ID selector — starts with a hash and targets the one element with that unique id: #header { ... } styles <div id="header">. An id must be unique on the page.

p        { line-height: 1.5; }   /* every paragraph */
.note    { background: yellow; } /* any element class="note" */
#header  { background: navy; }   /* the one id="header" element */

The word "cascading" refers to the rules the browser uses to decide which style wins when several rules apply to the same element: a more specific selector (an id) beats a less specific one (a class), which beats an element selector, and — all else equal — a rule written later overrides an earlier one.

The box model

Every element on a web page is treated by the browser as a rectangular box. Understanding the box model — the layers that make up that box — is essential for controlling spacing and layout. From the inside out, the box has four layers:

1. Content — the actual text or image, with a width and height.
2. Padding — clear space inside the box, between the content and the border. It takes on the box's background colour.
3. Border — a line drawn around the padding and content.
4. Margin — clear space outside the border, which pushes other elements away. Margins are always transparent.

The CSS box model wraps every element in four nested layers, from innermost to outermost:

div {
  width: 200px;
  padding: 20px;      /* space inside, around the content */
  border: 2px solid black;
  margin: 15px;       /* space outside the border */
}
``` …