4.4Customisation: Additional CSS & child theme
The essentials in 30 seconds
- Additional CSS changes colours, spacing or visibility without touching the theme.
- The browser inspector (F12) reveals the right selector to target; stay precise so you do not break the rest.
- Never edit a parent theme directly: updates overwrite everything. For lasting changes, a child theme receives the modifications.
Running mini-case — adjusting without breaking
Samir wants to refine the workshop's contact button: a colour closer to the brand blue and more generous spacing. He uses the inspector to find the selector, then adds a few lines of additional CSS. Later, Hassan will ask for a deeper template change: Samir will then create a child theme so the work survives updates.
Sequel to case 4.3 — the appearance deserves precise, lasting adjustments.
1. Additional CSS and the inspector
Additional CSS (Appearance → Customise → Additional CSS, or the site editor) lets you adjust the appearance without modifying the theme files: a button colour, a section's spacing, hiding a decorative element. It is quick and reversible.
To target the right element, the browser inspector (F12, right-click → Inspect) shows the classes and applied styles. Samir writes a precise selector — a class rather than a global tag — and checks the preview on desktop and mobile before publishing.
2. Child theme and durability
CSS changes the appearance, not the functionality. To modify a template or add functions, you need to touch the theme — but never the parent theme directly: its next update would overwrite the changes.
The lasting solution is the child theme: it inherits from the parent and receives your files (style.css, functions.php, templates). The parent keeps updating and your changes remain. Samir only creates a child theme when the need goes beyond CSS, to avoid unnecessary complexity.
🔎 Concrete example — Adjusting the contact button (Samir's case)
Inspector: button .btn-contact.
Additional CSS:
.btn-contact { background:#21759b; padding:14px 28px; border-radius:8px; }
Desktop + mobile check.
→ To modify the Collections page template:
create a child theme and copy the template to adapt into it.Result: a precise adjustment that is kept.
Lesson: we choose the tool according to the depth of the change.
Section vocabulary
- Additional CSS
- Style rules added without touching the theme, via the Customiser or the site editor.
Simple example: changing the contact button colour.
What it is not: editing the parent theme's style.css directly.
Reflex: small visual adjustment = additional CSS.
- Child theme
- A theme that inherits from the parent and receives lasting modifications.
Simple example: an adapted page template in the child.
What it is not: modifying the parent and losing everything on update.
Reflex: lasting change = child theme.
- Browser inspector
- A tool (F12) that shows an element's HTML and CSS.
Simple example: finding the button's class.
What it is not: guessing the selector at random.
Reflex: inspect before styling.
- CSS selector
- The target of a style rule: class, ID or tag.
Simple example: the .btn-contact class rather than the button tag.
What it is not: targeting every button tag on the site.
Reflex: as precise as possible.
- Never modify the parent
- Golden rule: direct changes to the parent theme are overwritten on updates.
Simple example: go through the child or additional CSS.
What it is not: editing the parent "just once".
Reflex: never the parent directly.
In practice — Fine-tuning the appearance cleanly
- Find an element to modify and open the inspector (F12) to read its class.
- Add a targeted rule in the additional CSS and observe the preview.
- Check the rendering on mobile and on other pages.
- If the need goes beyond styling, create a child theme for templates or functions.
Ready-to-use script — explaining clean customisation (20s)
"I can adjust colours and spacing without touching the theme, so there is no risk during updates. For deeper changes, I use a child theme: your changes remain, even when the theme evolves."
Link the method to the client's future peace of mind.
Copy-paste template — customisation sheet
ELEMENT TO MODIFY: _______________
SELECTOR FOUND (inspector): _______________
CSS RULE ADDED: _______________
CHECKED DESKTOP / MOBILE: yes / no
CHILD THEME NEEDED: yes / no
FILES INVOLVED: _______________Light touch-up
A few CSS rules are enough: colour, spacing, size.
Specific template
A child theme to adapt a page template.
Added functions
A child theme for functions.php, never the parent.
FSE theme
Global styles and additional CSS cover most needs.
✓ Best practices
- Inspect before writing CSS.
- Stay precise in your selectors.
- Create a child theme for any deep modification.
✗ Common pitfalls
- Modifying the parent theme directly.
- Using selectors that are too broad.
- Stacking up uncommented CSS that is hard to maintain.
Key takeaways
- Additional CSS adjusts the appearance without risk.
- The inspector reveals the right selector.
- The parent theme is never modified directly.
- The child theme makes modifications last.
48h Challenge — apply tomorrow
Change a button's colour and spacing via additional CSS, finding the selector with the inspector. Check on mobile. 20 minutes.
- I find a selector with the inspector.
- I add targeted CSS without breaking the site.
- I know when to create a child theme.
Frequently asked questions
Where do I add additional CSS on a block theme?
In the site editor, via global styles or the additional CSS option depending on the theme. The principle stays the same: targeted CSS, without modifying the theme files.
Is a child theme always necessary?
No. For colours or spacing, additional CSS is enough. A child theme becomes useful for modifying templates or adding functions that must survive updates.
What happens if I modify the parent theme?
Your changes work until the next theme update, which overwrites them. That is why we use additional CSS or a child theme.
Samir must change a theme's style without losing his changes on update. What does he do?