CSS: Selectors, Properties and Box Model

CSS: Selectors, Properties and Box Model

What is CSS?

CSS (Cascading Style Sheets) is the language used to control how HTML pages look. While HTML defines the structure and content of a page ("this is a heading", "this is a paragraph"), CSS controls the presentation — colours, fonts, sizes, spacing, and layout. Separating structure (HTML) from presentation (CSS) makes websites easier to maintain and update.

CSS rule syntax

A CSS rule has two parts: a selector that identifies which element to style, and a declaration block containing one or more property-value pairs:

p {
  color: #1a1a2e;
  font-size: 1rem;
  line-height: 1.7;
}

Semicolons (;) separate declarations, so they are required between declarations. A semicolon after the final declaration before } is not required by CSS syntax, but including it is strongly recommended. The declaration block is wrapped in curly braces { }.

Three ways to apply CSS

There are three places you can write CSS:

/* Inline — directly on the element */
<p style="color: red; font-weight: bold;">Important text</p>

/* Internal — in the head */
<style>
  h1 { color: #042C53; }
</style>

Selectors

The selector determines which elements the rule applies to. The three main types are:

When rules conflict, CSS compares specificity as four separate counts: (inline styles, IDs, classes, elements). Compare the columns from left to right; the first different column decides which rule wins. Do not add the counts into a decimal score. For example, one ID beats any number of classes — even 11 classes do not beat one ID.

Common properties

The CSS box model

Every HTML element is treated as a rectangular box. The box has four layers, from the inside out:

1. Content — the actual text, image, or other element inside
2. Padding — transparent space between the content and the border; takes the element's background colour
3. Border — a visible line around the padding (can be styled with width, style, colour)
4. Margin — transparent space outside the border, between this element and others

The four layers of the box model — innermost to outermost.

Memory aid: Think of a framed picture on a wall. The content is the photograph. The padding is the white mount board between the photo and the frame. The border is the picture frame itself. The margin is the gap between this picture and the next one on the wall.

How padding affects size: With the default box-sizing: content-box, a declared width applies only to the content, so padding and borders add to the box's outer size. With box-sizing: border-box (used by this lesson page), padding and borders are included within the declared width or height, reducing the space available for the content instead.

Padding and margin shorthand

Both padding and margin accept shorthand values to set multiple sides at once:

.box {
  padding: 10px;           /* all four sides */
  padding: 10px 20px;      /* top/bottom  left/right */
  padding: 5px 10px 15px 20px; /* top right bottom left (clockwise) */
  margin: 0 auto;          /* can centre a constrained-width block */
}

margin: 0 auto visually centres a block only when it has a constrained width (using width or max-width) and there is spare horizontal space. A block already filling the available width has nothing to centre.