A definition list is one of the simplest tools in HTML, which is exactly why it is so useful. You write a term, then you write what it means, and the browser keeps the two together. This page stacks those pairs into a deck of cards so they are easy to read at a glance — and every trick used to build it is explained politely along the way.
Cards in the deck
Six ideas worth knowing. Each card is a
<dt> (the term) and a <dd> (its
definition) wrapped in a <div> so they can be
styled as one box.
- 01Definition list
- The
<dl>element holds a list of terms and their meanings. Write the term with<dt>and the meaning with<dd>. Use it for glossaries, questions and answers, or — as here — a page full of small lessons. - 02The box model
- Every element on a page is a rectangle made of four layers: the content, then padding, then a border, then the outside margin. Once you can picture those four layers, most spacing problems solve themselves. There is a diagram of it further down the page.
- 03Borders
- A border has three parts: a width, a style and a colour,
written together like
2px solid #4f7c93. This deck uses a thick blue border on the left of each card to tie the stack together, and dashed borders in the diagram below. - 04Box shadow
box-shadowdraws a soft shadow behind a box, which is a gentle way to lift a card off the page. Stack two shadows with a comma — one tight and one wide — and the result looks much more natural than either alone.- 05Media queries
- A media query changes your CSS when the screen gets
small.
@media (max-width: 640px)asks “is this screen 640 pixels wide or less?” and only then applies its rules, so phones get tighter padding and roomier cards. - 06Hex colours and the palette
- A hex colour such as
#e7ddc9is a precise mix of red, green and blue light. This page keeps only a few of them: sand for the background, muted blue for accents, and two quiet neutrals for text. Restricting the palette is what makes a page feel calm.
The box model, drawn
Read the diagram from the outside in. The margin is empty space that pushes other elements away. The border is the visible edge. The padding is the breathing room between the border and the words. The content is the text or image itself.
When something looks cramped or too close to its neighbour, you almost always only need to change one of these four values. Find it in style.css under the box model comment and nudge it.
How to use this template
Open index.html in any plain text editor, such as
Notepad. To add a card, copy one whole
<div class="card">...</div> block, paste it
where you want it, then rewrite the term and the definition. To
remove a card, delete its whole block from the opening
<div> to the matching closing one.
All the colour and spacing lives in style.css, which sits in the same folder. The file is split into labelled sections, so if you want thicker cards, a different blue, or more space between them, look for the matching heading and change one value. Save the file, refresh your browser, and the change appears. That is the whole workflow: edit, save, refresh.
Good definitions are short. If a card runs past three lines, it usually wants to be two cards.