Cascading Style Sheets
Senior 4 · ICT
Cascading Style Sheets
Lesson 2 of 3
25 min
Look at any web page with the eyes of a browser and it is made only of rectangles. A heading is a box, each paragraph is a box, a menu is a box holding smaller boxes. Layout styling means controlling those boxes: how big each one is, the space inside and around it, its edges, and where it sits next to the others. In Unit 5 the S4 ICT Club page stacked everything down the left side. By the end of this lesson its aside will sit beside the main content, as the layout diagram promised.
Definition
Box model: the rule that every element is drawn as a rectangular box made of four layers: content (the text or image), padding (space between the content and the border, coloured by the background), border (a line around the padding) and margin (transparent space outside the border that pushes other boxes away).
Block box: starts on a new line and, unless given a width, stretches across its container (div, p, h1, section). Inline box: flows inside a line of text and ignores width and height (span, a, strong).
Flexbox: a CSS layout mode that arranges the children of a container in a row or a column and shares out the space between them.
| Property | Example | Meaning |
|---|---|---|
width, height | width: 200px; | The size of the content area (by default) |
max-width | max-width: 900px; | The box may shrink on a small screen but never grows wider than this |
padding | padding: 20px; | Space inside the border, on all four sides |
border | border: 5px solid #1F4E9C; | Shorthand for width, style (solid, dashed, dotted, double) and colour |
border-radius | border-radius: 8px; | Rounds the corners |
margin | margin: 30px; | Space outside the border |
background-color | background-color: #E6F5EF; | Fills the content and padding (not the margin) |
One side at a time. Each of padding, margin and border has four separate sides: margin-top, margin-right, margin-bottom, margin-left. In the shorthand, values go clockwise from the top:
margin: 10px 20px 30px 40px;: top 10, right 20, bottom 30, left 40margin: 10px 20px;: top and bottom 10, left and right 20margin: 10px 20px 30px;: top 10, left and right 20, bottom 30margin: 0 auto;: no top or bottom margin, and equal automatic margins left and right, which centres a block that has a width or max-widthWorked example 1: how wide is the box?
A box has width: 300px; padding: 10px 20px; border: 2px solid black; margin: 15px;.
(a) Its width on screen, border to border. The horizontal padding is 20px on each side (the second value of the shorthand):
(b) The horizontal space it takes up, including margins. .
(c) The same box with box-sizing: border-box. Now width means border to border, so the box is exactly 300px wide and the content area shrinks: .
Because border-box makes widths easy to predict, most style sheets start with * { box-sizing: border-box; }.
Run it. The orange ruler is exactly 250px long. The first card, with the default content-box, ends at the end of the ruler: 200 + 2 × 20 + 2 × 5 = 250px. The second card, with border-box, is only 200px wide in total. The 30px margin moves both cards away from the edge and from each other.
| Value | Behaviour |
|---|---|
block | New line; full width unless a width is set; width, height, margins and padding all apply |
inline | Flows in the line of text; width and height are ignored |
inline-block | Flows in the line like a word, but accepts width, height and padding like a block (good for buttons) |
none | The element is removed from the layout completely and takes up no space |
flex | A block whose children are laid out by flexbox |
Run it. CSS changes how an element is displayed, not what it is: the span becomes a block, the list items line up as buttons, and the last paragraph disappears although it is still in the HTML.
Give a container display: flex; and its direct children (the flex items) line up along the main axis, a row by default. Then:
| Property (on the container) | Effect |
|---|---|
flex-direction: row | column | Items side by side, or stacked |
justify-content | Where the items sit along the main axis: flex-start, center, flex-end, space-between, space-around |
align-items | How they line up across it: stretch (default), flex-start, center, flex-end |
gap: 16px | Space between the items |
flex-wrap: wrap | Lets items move to a new line when there is no room |
On an item, flex: 3 and flex: 1 share the free space in the ratio 3 : 1, which is how main gets three quarters of the width and aside one quarter in the page below.
Run it: this is the S4 ICT Club page from Unit 5, Lesson 1, with a style sheet added. The menu is a flex row, and the .page container puts main and aside side by side in the ratio 3 : 1, centred with max-width and margin: 0 auto. The @media rule is a media query: when the window is narrower than 600px, as on a phone, the two columns stack. Make the window narrow to see it, then change justify-content on nav ul to center.
Worked example 2: pick the CSS
| Goal | CSS | Reasoning |
|---|---|---|
| A text column no wider than 700px, centred on wide screens | max-width: 700px; margin: 0 auto; | max-width lets it shrink on phones; auto side margins centre it |
| A menu of links in one row with 10px between them | display: flex; gap: 10px; on the ul | The list items become flex items in a row |
| A logo at the left of the header and the menu at the right | display: flex; justify-content: space-between; | The first item goes to the start, the last to the end |
| Space inside a button around its text | padding: 8px 16px; | Padding is inside the border; margin would push other boxes away instead |
Web Dev Simplified: Learn CSS Box Model In 8 Minutes. Watch the browser's developer tools draw the content, padding, border and margin of a real element, and see how box-sizing changes the size.
Warning
content-box, a 100% wide box with padding is wider than its container and causes sideways scrolling. Use box-sizing: border-box.width: 1000px cannot fit a phone; use max-width.Tip
"TRouBLe" for shorthand: Top, Right, Bottom, Left: the clockwise order of margin and padding values. And to see any box's layers, right-click the element in Chrome or Firefox and choose Inspect: the developer tools draw the box model with its exact sizes.
Practice
padding: 4px 8px 12px;.width: 400px; padding: 15px; border: 3px solid; margin: 10px 25px; and the default sizing. Calculate (a) its width border to border; (b) the horizontal space it occupies including margins.box-sizing: border-box, and give the width of the content area.<ul class="menu"> into a horizontal menu with its items centred and 12px apart..wrapper that is at most 960px wide and centred.color: white on a white page. Compare this with display: none: which is better, and why?padding-top: 4px; padding-right: 8px; padding-bottom: 12px; padding-left: 8px;.menu { display: flex; justify-content: center; gap: 12px; list-style: none; }.wrapper { max-width: 960px; margin: 0 auto; }display: none is better. White text still takes up space, can be selected, is read by screen readers and shows if the background changes; display: none removes the element from the layout completely.Key points
content-box, total width = border + padding + width + padding + border; box-sizing: border-box makes width include padding and border.margin: 0 auto centres a block with a width or max-width.display: block, inline, inline-block, none, flex.display: flex on the container, then flex-direction, justify-content, align-items, gap; flex: n shares space; a media query changes the layout on small screens.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box model</title>
<style>
.card {
width: 200px;
padding: 20px;
border: 5px solid #1F4E9C;
margin: 30px;
background-color: #E6F5EF;
}
.card.fit {
box-sizing: border-box; /* width now includes padding and border */
}
.ruler {
width: 250px;
height: 8px;
margin-left: 30px;
background-color: #E69F00;
}
</style>
</head>
<body>
<div class="ruler"></div>
<div class="card">content-box: 250px wide in total</div>
<div class="card fit">border-box: 200px wide in total</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display</title>
<style>
span.tag { background: #fff3cd; padding: 4px; }
span.block { display: block; background: #E8F1FA; margin: 8px 0; }
li.button { display: inline-block; padding: 6px 14px;
border: 2px solid #0072B2; border-radius: 6px; margin: 4px; }
.secret { display: none; }
</style>
</head>
<body>
<p>A span is <span class="tag">inline</span>: it sits inside the line.</p>
<p>This span <span class="block">now behaves as a block</span> on its own line.</p>
<ul>
<li class="button">Home</li>
<li class="button">Projects</li>
<li class="button">Members</li>
</ul>
<p class="secret">You cannot see this paragraph.</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>S4 ICT Club</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; color: #222; }
header { background-color: #0b3d66; color: white; padding: 16px 24px; }
header h1 { margin: 0; }
header p { margin: 4px 0 0; }
nav ul { display: flex; gap: 8px; list-style: none; margin: 0;
padding: 8px 24px; background-color: #e8f1fa; }
nav a { display: block; padding: 6px 12px; border-radius: 6px;
color: #0b3d66; text-decoration: none; }
nav a:hover, nav a.current { background-color: #0b3d66; color: white; }
.page { display: flex; gap: 24px; max-width: 900px;
margin: 0 auto; padding: 24px; }
main { flex: 3; }
aside { flex: 1; background-color: #fff3cd; padding: 12px; border-radius: 8px; }
footer { text-align: center; padding: 12px; color: #555;
border-top: 1px solid #ddd; }
@media (max-width: 600px) {
.page { flex-direction: column; } /* stack on narrow screens */
}
</style>
</head>
<body>
<header>
<h1>S4 ICT Club</h1>
<p>Learning to build the web, one tag at a time</p>
</header>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Members</a></li>
</ul>
</nav>
<div class="page">
<main>
<h2>This term</h2>
<p>Each member is building a web page about their home district.</p>
<h2>Club news</h2>
<p>Our first pages passed the W3C validator with no errors.</p>
</main>
<aside>
<h2>Next meeting</h2>
<p>Wednesday, Computer Lab 2</p>
</aside>
</div>
<footer>© S4 ICT Club</footer>
</body>
</html>Quick check
Put the layers of the box model in order from the inside out.
Tap the cards in the right order.