Cos’è il CSS e come usarlo per personalizzare il tuo sito

Probabilmente sai già che il CSS è uno strumento utile per progettare e personalizzare il tuo sito web, ma che cos’è esattamente?

CSS (Cascading Style Sheets, fogli di stile a cascata) è un metodo usato per aggiungere istruzioni stilistiche al codice di back-end di un sito. Prima di approfondire questo concetto, soffermiamoci un attimo sul codice e sulla sua funzione.

Il codice è il linguaggio che comunica al browser l’aspetto che deve avere il sito e cosa deve fare. Il linguaggio più utilizzato è l’HTML (Hypertext Markup Language, linguaggio a marcatori per ipertesti), una forma di codice che ordina gli elementi presenti su una pagina web. Ad esempio, l’HTML specifica dove si trova il titolo, dove finisce un paragrafo e ne inizia un altro e la grandezza di un’immagine.

Il CSS è un’estensione dell’HTML che fornisce specifiche istruzioni stilistiche. Il CSS è utilizzato per indicare il colore di un titolo o il suo carattere. Se l’HTML è la struttura di una casa, allora il CSS è la pittura, le dimensioni delle finestre e la larghezza dei corridoi. Il CSS ti permette di personalizzare l’aspetto del tuo sito e dargli uno stile adatto al tuo brand.

Gli elementi del CSS

Prima di scoprire come aggiungere CSS personalizzato al tuo sito web, definiamo alcuni termini. Quando si parla di CSS, è necessario prendere in considerazione tre componenti principali: selettori, proprietà e valori.

Un selettore usa un codice HTML per indicare la parte del sito da personalizzare. Ad esempio, il codice HTML per il paragrafo è “p”. Se vuoi utilizzare il CSS per cambiare lo stile del paragrafo, “p” è il selettore da usare.

Proprietà e valori sono poi usati per applicare istruzioni di stile ai selettori. Se vuoi che i tuoi paragrafi siano scritti in rosso, sarà necessario prima inserire la proprietà che indica lo specifico attributo da modificare (in questo caso, il colore). Il valore è ciò che si vuole ottenere: nell’esempio, il rosso.

Ecco il codice CSS di un paragrafo di testo rosso (notare la punteggiatura usata in CSS):

p {

color: red;

}

A questo punto, ogni volta che “p” verrà usato nel codice del sito, il testo sarà rosso. Se vuoi ampliare le tue conoscenze di base di CSS, WordPress.com ti offre diverse risorse e guide utili.

CSS con WordPress.com

Ci sono due modi per aggiungere un CSS personalizzato a un sito WordPress.com. Il primo metodo consiste nell’inserimento diretto di linguaggio CSS nel codice HTML. Per farlo, basta scegliere l’opzione Modifica come HTML nell’editor di WordPress.com. Qui puoi inserire il codice pertinente dove necessario. Se scegli questa via, dovrai inserire il codice CSS in ogni pagina e articolo in cui vuoi usare quello stile personalizzato.

Puoi personalizzare l’intero sito grazie alla funzionalità di personalizzazione del design disponibile con i piani WordPress.com Premium e Business. Per accedervi, vai su Aspetto > Personalizza > CSS.

Ecco alcuni esempi che illustrano come modificare lo stile del tuo sito con il CSS.

Cambia il colore del testo

Se il tema che hai scelto usa titoli secondari gialli ma tu li preferisci verdi, puoi modificarli con il CSS. Il codice HTML del titolo secondario è “h2” (il selettore). La proprietà da modificare è il colore e il valore da inserire è verde. Nel pannello CSS di Personalizza dovrai inserire il seguente codice:

h2 {

color: green;

}

Puoi usare la stessa proprietà per cambiare anche il colore del corpo del testo:

body {

color: blue;

}

Cambia carattere e dimensione

Se il tema che hai scelto ha un carattere predefinito che non ti piace, puoi cambiarlo usando la proprietà “font-family”:

h2 {

font-family: Helvetica;

}

Con questo codice, il carattere dei tuoi titoli secondari sarà Helvetica, ma puoi scegliere tra tanti caratteri diversi.

Puoi anche cambiare la dimensione del carattere. In CSS, la dimensione viene gestita con le percentuali. Il codice qui sotto modifica la dimensione del titolo secondario del 250 per cento:

h2 {

font-size: 250%;

}

Puoi anche cambiare carattere e dimensione combinando i codici:

h2 {

font-family: Helvetica; font-size: 250%;

}

Altre proprietà da tenere presenti sono il font-weight (che indica se un carattere è in grassetto o meno), font-style (che indica se un carattere è in corsivo o meno) e text-decoration (che indica se il testo è sottolineato, sopralineato o barrato).

Cambia la spaziatura

A volte il carattere è quello giusto, ma le lettere sembrano troppo ravvicinate. HTMLdog ti offre consigli per risolvere i problemi di spaziatura con il CSS. Se le lettere sono troppo vicine tra loro, puoi usare questo codice:

p {

letter-spacing: 0.5em;

}

Prova diversi valori numerici e trova la spaziatura ideale.

Mettiti al lavoro

Quindi, cos’è il CSS? Ora sai rispondere benissimo a questa domanda e hai abbastanza informazioni per metterti al lavoro. Ricorda che puoi sempre fare domande sui forum di WordPress.com.