← Tutti gli articoli

Tutorial

Come aggiungere CSS personalizzato a qualsiasi sito web — Guida per principianti

16 maggio 2026 · di JustZix Team

Vuoi cambiare l'aspetto di un sito web — nascondere un elemento fastidioso, sistemare un font illeggibile o allargare un layout angusto? Questa guida adatta ai principianti ti mostra come aggiungere CSS personalizzato a qualsiasi sito web, copre i pro e i contro onesti di ogni metodo e si conclude con una guida pratica che puoi seguire oggi.

Cosa significa davvero "CSS personalizzato"

Ogni pagina web ha uno stile applicato con il CSS — Cascading Style Sheets — regole che controllano colori, font, spaziatura e layout. "CSS personalizzato" significa il tuo CSS extra sovrapposto a quello del sito, applicato solo nel tuo browser. Il sito non cambia per nessun altro. Non stai violando nulla; stai regolando come la pagina viene presentata a te, un po' come la Modalità lettura o un blocco pubblicità.

Metodo 1 — DevTools (temporaneo, ottimo per i test)

Ogni browser moderno ha gli Strumenti per sviluppatori integrati. Premi F12 (o fai clic destro su un elemento e scegli "Ispeziona"). Nel pannello Styles puoi modificare il CSS dal vivo e vedere il risultato istantaneamente.

Il trucco: è temporaneo. Non appena ricarichi la pagina, tutto si reimposta. I DevTools sono perfetti per capire quale CSS vuoi, ma non sono un modo per conservare una modifica.

Metodo 2 — gli strumenti integrati del browser

Alcuni browser ti permettono di salvare un foglio di stile personalizzato, e la Modalità lettura riduce una pagina al solo testo. Vanno bene per casi ristretti, ma sono limitati: la Modalità lettura è tutto o niente, e un foglio di stile personalizzato globale non può facilmente prendere di mira un sito in modo diverso da un altro.

Metodo 3 — uno stile utente o un'estensione (permanente)

Per fare una modifica che persiste tra i ricaricamenti e si applica automaticamente ai siti scelti, ti serve un'estensione che inietti il CSS per te. Questa è la risposta pratica per la maggior parte delle persone. Esistono strumenti solo CSS (trattati nella nostra guida sulle alternative a Stylish), e ci sono strumenti che gestiscono CSS e JavaScript insieme. Esamineremo uno di questi ultimi, JustZix, perché è gratuito e non richiede alcun account.

Prima — trova il selettore giusto

Prima di poter applicare uno stile a qualcosa, devi nominarlo in CSS — quello è un selettore. Fai clic destro sull'elemento che vuoi cambiare e scegli "Ispeziona". Nell'HTML evidenziato, guarda la class o l'id dell'elemento:

<div class="newsletter-popup" id="signup-modal">
  ... popup content ...
</div>

Una class si scrive con un punto — .newsletter-popup. Un id si scrive con un cancelletto — #signup-modal. Quelli sono i tuoi selettori.

Guida pratica — aggiungere CSS personalizzato con JustZix

1. Installa l'estensione dalla pagina di download (ci vogliono circa due minuti; nessun account).
2. Apri il sito a cui vuoi applicare lo stile.
3. Clicca sull'icona di JustZix e scegli Nuova regola.
4. Imposta un pattern di URL così la regola viene eseguita solo dove vuoi:
   • https://example.com/* — l'intero sito
   • https://example.com/blog/* — solo la sezione blog
   • * — ogni sito (usa con parsimonia)
5. Apri il pannello CSS e incolla il tuo CSS.
6. Salva. La regola si applica immediatamente e ogni volta che torni su una pagina corrispondente.

Esempio 1 — nascondere un elemento

La richiesta più comune: far sparire qualcosa. Pop-up per la newsletter, intestazione fissa, barra laterale:

/* 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;
}

La parola chiave !important dice al browser che la tua regola vince su quella del sito. Ne avrai bisogno spesso quando sovrascrivi un design esistente.

Esempio 2 — riapplicare lo stile per la leggibilità

Rendi un articolo comodo da leggere — testo più grande, più interlinea, una colonna più stretta:

/* Comfortable reading column */
article, .post-content {
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 19px !important;
  line-height: 1.75 !important;
}

Esempio 3 — una rapida modifica scura

Uno sfondo scuro semplice per una pagina di un bianco accecante:

/* Minimal dark tweak */
html, body {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }

I temi scuri completi sono più impegnativi — molti elementi da ricolorare — ma questo basta per smussare gli angoli di una pagina luminosa.

Consigli per un CSS che non rompe nulla

• Preferisci nascondere all'eliminare. display: none è reversibile — basta disabilitare la regola.
• Limita l'ambito delle tue regole. Un pattern di URL specifico batte * — evita sorprese su siti non correlati.
• Testa prima dal vivo. Usa il pannello CSS nella scheda o i DevTools per confermare un selettore prima di salvarlo.
• Evita selettori di attributi troppo ampi come [class*="box"] — possono corrispondere a molto più di quanto intendi.

Il pannello CSS nella scheda di JustZix è comodo qui: modifichi, la pagina si aggiorna mentre digiti, e quando ha l'aspetto giusto la salvi come regola. Vedi la pagina delle funzionalità per il resto degli strumenti.

Vedi anche

• Un'alternativa sicura a Stylish per il CSS personalizzato
• Come eseguire JavaScript su qualsiasi pagina web

Pronto a far rimanere il tuo CSS personalizzato? JustZix è gratuito e si installa in un paio di minuti — prendilo dalla pagina di download e crea la tua prima regola oggi.