This is Part 3 of a three-part series. Start with Part 1: Basic HTML and Part 2: Images and Tables.
Divs
A div is a container — a way to group a section of your page so you can apply formatting just to that part. A common use is a “breakout” box with its own background colour to stand out from the rest of the page.
You create the div in your content and give it a class, then write CSS rules for that class:
<div class="breakout">
Breakout content goes here.
</div>.breakout {
background-color: #eee;
border: 1px solid #009093;
padding: 1rem;
}The class is just a label. The matching CSS rule (starting with a dot, .breakout) says how anything with that class should look.
Where to put your CSS
In WordPress, the tidiest place for your own CSS is Appearance → Customise → Additional CSS (or your theme/child theme’s stylesheet). Add a rule there once, and you can reuse the class anywhere:
.blueborder { border: 1px solid #005891; }<div class="blueborder">
This box has a blue border.
</div>A note on layout in 2026
Older tutorials (including the original version of this one) used float to push a box to the left or right of the text. Floats still work, but modern layouts are built with Flexbox and CSS Grid, which are far more predictable and responsive.
The good news: you rarely need to hand-code layout at all any more. WordPress’s block editor has Columns, Group and Cover blocks that handle most of what people used to reach for divs and floats to do — and they stay responsive on mobile automatically. Reach for custom divs and CSS only when a block can’t get you there.
Where to learn more
If you’ve enjoyed getting into HTML and CSS and want to go further, there are excellent free resources:
- MDN Web Docs — the reference the professionals use
- web.dev — Google’s structured “Learn HTML/CSS” courses
- freeCodeCamp — free, hands-on lessons
And if you’d rather hand it to someone else, that’s what we do.