How to Add Custom CSS to Any Website — A Beginner Guide
Want to change how a website looks — hide an annoying element, fix an unreadable font, or widen a cramped layout? This beginner-friendly guide shows you how to add custom CSS to any website, covers the honest pros and cons of each method, and ends with a practical walkthrough you can follow today.
What "custom CSS" actually means
Every web page is styled with CSS — Cascading Style Sheets — rules that control colors, fonts, spacing and layout. "Custom CSS" means your own extra CSS layered on top of the site's, applied only in your browser. The site does not change for anyone else. You are not hacking anything; you are adjusting how the page is presented to you, much like Reader Mode or an ad blocker.
Method 1 — DevTools (temporary, great for testing)
Every modern browser has built-in Developer Tools. Press F12 (or right-click an element and choose "Inspect"). In the Styles panel you can edit CSS live and see the result instantly.
The catch: it is temporary. As soon as you reload the page, everything resets. DevTools is perfect for figuring out what CSS you want, but it is not a way to keep a change.
Method 2 — the browser's built-in tools
Some browsers let you save a custom stylesheet, and Reader Mode strips a page down to text. These are fine for narrow cases, but they are limited: Reader Mode is all-or-nothing, and a global custom stylesheet cannot easily target one site differently from another.
Method 3 — a userstyle or extension (permanent)
To make a change that persists across reloads and applies automatically to chosen sites, you need an extension that injects CSS for you. This is the practical answer for most people. CSS-only tools exist (covered in our Stylish-alternative guide), and there are tools that handle CSS and JavaScript together. We will walk through one of the latter, JustZix, because it is free and needs no account.
First — find the right selector
Before you can style something, you have to name it in CSS — that is a selector. Right-click the element you want to change and choose "Inspect." In the highlighted HTML, look at the element's class or id:
<div class="newsletter-popup" id="signup-modal">
... popup content ...
</div>A class is written with a dot — .newsletter-popup. An id is written with a hash — #signup-modal. Those are your selectors.
Walkthrough — add custom CSS with JustZix
- Install the extension from the download page (it takes about two minutes; no account).
- Open the site you want to style.
- Click the JustZix icon and choose New rule.
- Set a URL pattern so the rule only runs where you want it:
https://example.com/*— the whole sitehttps://example.com/blog/*— just the blog section*— every site (use sparingly)
- Open the CSS pane and paste your CSS.
- Save. The rule applies immediately and every time you revisit a matching page.
Example 1 — hide an element
The most common request: make something disappear. Newsletter pop-up, sticky header, sidebar:
/* Hide a newsletter pop-up and its dark overlay */
.newsletter-popup,
#signup-modal,
.modal-backdrop {
display: none !important;
}
/* Some pop-ups freeze scrolling — restore it */
html, body {
overflow: auto !important;
}The !important keyword tells the browser your rule wins over the site's own CSS. You will need it often when overriding an existing design.
Example 2 — restyle for readability
Make an article comfortable to read — bigger text, more line spacing, a narrower column:
/* Comfortable reading column */
article, .post-content {
max-width: 720px !important;
margin: 0 auto !important;
font-size: 19px !important;
line-height: 1.75 !important;
}Example 3 — a quick dark tweak
A simple dark background for a glaringly white page:
/* Minimal dark tweak */
html, body {
background: #1a1a1a !important;
color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }Full dark themes get more involved — many elements to recolor — but this is enough to take the edge off a bright page.
Tips for CSS that does not break
- Prefer hiding over deleting.
display: noneis reversible — just disable the rule. - Scope your rules. A specific URL pattern beats
*— it avoids surprises on unrelated sites. - Test live first. Use the in-tab CSS pane or DevTools to confirm a selector before saving it.
- Avoid over-broad attribute selectors like
[class*="box"]— they can match far more than you intend.
JustZix's in-tab CSS pane is handy here: you edit, the page updates as you type, and when it looks right you save it as a rule. See the features page for the rest of the toolkit.
See also
Ready to make your custom CSS stick? JustZix is free and installs in a couple of minutes — grab it from the download page and create your first rule today.
Rate this post
No ratings yet — be the first.