fbpx
SOS WP Logo

Chiedi un preventivo
06 92 93 90 73

HTML e CSS – La guida completa per principianti

HTML & CSS la guida introduttiva per chi usa WordPress
Tabella dei Contenuti

Vuoi imparare le basi del linguaggio HTML per poterlo usare all’interno di WordPress e personalizzare il tuo sito? Inoltre vuoi scoprire come usare il CSS per gestire l’aspetto di tutti gli elementi della tua pagina?

In questa guida HTML e CSS scoprirai come fare, senza dover studiare codici per ore.

HTML & CSS la guida introduttiva per chi usa WordPress

Su questo articolo ti lascerò anche delle tabelle riassuntive da prendere come riferimento ogni volta che ne avrai bisogno. Buona lettura!

Guida HTML e CSS

Come accennavo prima, l’HTML e il CSS ti permettono di gestire delle personalizzazioni che a volte sono difficili da ottenere con l’editor visuale classico di WordPress.

Apri la pagina di modifica di un tuo articolo qualsiasi del tuo sito WordPress. Ora, vai nel riquadro dei contenuti. Noterai che hai due linguette, Visuale, che è quella selezionata, e Testo. Se selezioni Testo, vedrai la versione in codice di ciò che hai fatto con l’editor visuale.

Se hai bisogno di aggiustare qualche dettaglio che diventa troppo complicato con l’editor visuale, apri la tab Testo e lavora direttamente sul codice.

Cos’è l’HTML

L’HTML è un linguaggio di markup, HyperText Markup Language, e questo significa che serve a definire qual è la funzione dei vari elementi di una pagina web, dal punto di vista della struttura e della formattazione.

Con l’HTML diciamo alle varie parti di testo se sono titoli, sottotitoli, paragrafi, elenchi… oppure possiamo aggiungere immagini e link.

Cos’è il CSS

Il CSS è un altro codice che si applica all’HTML e serve a definire l’aspetto degli elementi di una pagina web. Con il CSS possiamo stabilire colori, dimensioni, posizioni dei vari elementi.

Il CSS è quindi ciò che dà forma e colore alle pagine web.

Ora che abbiamo capito a cosa servono questi codici, entriamo nella vera e propria guida HTML e CSS e cominciamo a scoprire come usarli.

Guida HTML: la sintassi HTML

Per poter essere correttamente interpretato dai browser (Google Chrome, Mozilla, Safari ecc.), l’HTML deve rispettare una certa sintassi. E per questo, abbiamo i tag, che segnano dove inizia e dove finisce un certo elemento.

I tag, quindi, servono a dire, per esempio, “Qui inizia un paragrafo… e qui finisce.”.

Vediamo insieme da cosa sono formati i tag.

I tag

Per far capire al browser che abbiamo inserito un tag, usiamo i simboli < e >. Al loro interno inseriamo il nome del tag, che dovrà essere sempre in caratteri minuscoli. Per esempio, quello che definisce un paragrafo è la lettera p: <p>

Con questo tag, indichiamo al browser che sta iniziando un paragrafo.

Per segnalare al browser che il paragrafo, o qualsiasi altro elemento, è terminato, usiamo la barra / prima del nome del tag: </p>

Ecco quindi un paragrafo completo:

<p>Ciao! Benvenuto nella nostra guida HTML e CSS!</p>

Questo tipo di tag è quello classico, cioè è formato da un tag di apertura e uno di chiusura.

Ma altri tag possono essere “vuoti”, cioè hanno un tag di apertura, all’interno del quale si inseriscono tutti i valori di cui abbiamo bisogno, e non c’è bisogno di un tag di chiusura. È questo il caso del tag <img>, per inserire le immagini. Esso contiene il percorso dell’immagine da inserire, e poi aggiunge una barra / alla fine: <img src="images/immagine.jpg" />.

Gli attributi

Forse hai notato che, quando ti ho mostrato il tag <img>, ho aggiunto un valore. Infatti, oltre al nome del tag, ho aggiungo l’attributo src, ossia un’informazione aggiuntiva. Il valore dell’attributo si inserisce usando il simbolo di uguale e le virgolette:<img src="images/immagine.jpg" />.

La struttura di una pagina web

La pagina web ha una sua struttura ben precisa. Nella parte iniziale ci sono tutte le informazioni sulla pagina. Poi abbiamo la parte relativa ai contenuti, al cui interno troviamo un’ulteriore suddivisione fra testata, parte principale e parte in fondo alla pagina.

Cominciamo a vedere la sezione iniziale.

Doctype declaration

<!DOCTYPE html>

La prima riga in assoluto di un documento HTML è la dichiarazione del tipo di documento. Usando <!DOCTYPE html>, stiamo indicando al browser che useremo la versione di HTML 5.

<html>

<html>
...tutto il contenuto della pagina...
</html>

Dalla seconda riga, iniziamo subito con il primo tag: <html>. Questo identifica l’inizio e la fine dell’intero documento HTML.

<head>
...informazioni sulla pagina...
</head>

Il tag <head> contiene informazioni sulla pagina, come il titolo, l’autore o i link tag. Vediamo cosa sono.

<title>

<title>Titolo della pagina</title>

Il titolo della pagina viene mostrato nella barra del titolo del browser, ma anche nei risultati delle ricerche su Google o altri motori.

<meta>

<meta charset="UTF-8" />
<meta name="description" content="Questa è una breve descrizione del contenuto della pagina." />
<meta name="author" content="Nome dell'autore" /	>

I meta tag sono tutti “vuoti”, cioè non hanno bisogno di tag di chiusura, e il loro valore è definito dagli attributi name e content.

Il meta tag charset definisce il tipo di caratteri usati nella pagina. Per le lingue latine, si usa UTF-8. Impostare il charset permette, per esempio, che le vocali accentate vengano visualizzate correttamente.

Il meta tag description è importante per la SEO: nella pagina dei risultati della ricerca di Google, viene visualizzato sotto al titolo. Questo dà un’idea del contenuto della pagina al visitatore.

Author indica il nome dell’autore del sito.

<link rel="stylesheet" type="text/css" href="css/style.css" />

Il tag <link> non serve per inserire un link, ma per collegare il documento HTML al altre risorse, come il file CSS. Nell’attributo href, indichiamo il percorso del file, così le sue impostazioni CSS verranno applicate alla nostra pagina web.

Altri tag della sezione head

Nella head possiamo poi trovare il tag <script>, per inserire degli script in linguaggi diversi, oppure il tag <style>, dove possiamo aggiungere del codice CSS che avrà valore solo per questa pagina del nostro sito.

Tutti i tag che abbiamo visto fino a questo punto, si trovano nel file header.php di WordPress. Non sono quindi modificabili dall’editor con il quale crei il contenuto delle pagine.

La struttura dei contenuti

Guida HTML e CSS: Struttura di una pagina HTML

<body>

<body>
...tutto il contenuto visibile nel browser...
</body>

Nella head abbiamo inserito delle informazioni sulla pagina che restano “nascoste”. Ora, con il <body> definiamo la sezione in cui inserire gli elementi che compongono la pagina web.

Per una gestire più comodamente la struttura di una pagina web, sono stati introdotti dei tag che hanno la funzione di indicare quale funzione ha una determinata sezione della pagina. Vediamo quali sono.

<header>
...testata della pagina...
</header>

Nella sezione <header> inseriamo il titolo principale del sito e il logo.

<nav>
...menu principale...
</nav>

Questa parte sarà destinata a contenere un elenco di link, che costituiranno il menu principale.

Header e nav vengono gestiti con WordPress con vari sistemi. La header può essere personalizzata dal pannello Personalizza, mentre i menu vengono creati dalla sezione Aspetto > Menu.

Pannello Personalizza di WordPress

<main>

<main>
...contenuto principale della pagina...
</main>

Usiamo il <main> per indicare i contenuti principali.

Il contenuto che inserisci con l’editor di WordPress, in realtà, costituisce solo una sezione che si trova all’interno di main.

<aside>

<aside>
...sidebar...
</aside>

L’<aside> si usa per creare sidebar, o barre laterali.

<footer>
...contenuti in fondo alla pagina...
</footer>

Nel <footer>, che identifica il piè di pagina, inseriremo i contenuti di contatto, link utili come alla privacy policy, copyright, icone social…

Formattare testo

Ora che sappiamo come è strutturata la pagina web, andiamo a vedere come si inseriscono i contenuti, i testi, e come formattarli.

<h1>… <h6>

guida html e css: headings h1-h6
<h1>Questo è un titolo di livello 1</h1>
<h2>Questo è un titolo di livello 2</h2>
<h3>Questo è un titolo di livello 3</h3>
<h4>Questo è un titolo di livello 4</h4>
<h5>Questo è un titolo di livello 5</h5>
<h6>Questo è un titolo di livello 6</h6>

I titoli all’interno della pagina sono marcati con gli headings, che vanno da <h1> a <h6>.

Il livello 1 è quello principale, mentre il 6 è il sottotitolo di livello più basso. È molto importante rispettare correttamente l’ordine degli headings. In base all’argomento di cui parli, organizza i titoli in modo da contrassegnare le sotto-sezioni. Non usare mai gli headings semplicemente per rendere un testo più grande, ma usali solo se veramente quel testo ha la funzione di titolo.

<p>

<p>
Questo è un paragrafo.
</p>

Il paragrafo indica un blocco di testo, al termine del quale c’è un ritorno a capo. È possibile inserire un ritorno a capo, senza dover chiudere il paragrafo, usando il tag <br />.

<span>

<p>
Questo è un paragrafo. Però, al suo interno, posso <span>prendere una porzione di testo</span>.
</p>

Potresti trovare il tag <span> molto spesso se provi a modificare una pagina WordPress con la funzione Testo. Infatti, ogni volta che selezioni una porzione di testo per formattarla in modo particolare, per esempio per cambiare colore ai caratteri, essa viene marcata come span.

Span nell'editor di WordPress

<strong>

<p>
Questo è un paragrafo. <strong>E questo testo è in grassetto</strong>.
</p>

Il tag <strong> viene usato per rendere del testo in grassetto. La sua funzione non è semplicmente stilistica, ma il testo marcato con lo strong ha una funzione ben precisa: indica che quelle parole hanno una certa importanza. Per questo, è bene usarlo per contrassegnare le parole chiave all’interno dei tuoi contenuti. Google, infatti, riconosce lo strong e farà più attenzione alle parole al suo interno. Ti consiglio quindi di scegliere le keywords con attenzione, magari utilizzando uno strumento come SEMRush.

<em>

<p>
Questo è un paragrafo. <em>E questo testo è in corsivo</em>.
</p>

Il tag <em> serve a rendere in corsivo del testo ma, come per lo strong, anche qui abbiamo una funzione più precisa: indica che il testo ha una certa enfasi.

<mark>

<p>
Questo è un paragrafo. <mark>E questo testo è evidenziato</mark>.
</p>

Con il tag <mark> puoi usare l’evidenziatore per mettere in risalto una parte di testo. Il risultato sarà un testo con uno sfondo giallo. Questo colore potrebbe cambiare in base alle impostazioni del tuo tema WordPress, ed è possibile definire il colore che desideri utilizzando del CSS.

<a>

<a href="https://sos-wp.it" title="Vai al nostro sito"  target="_blank" rel="noopener ">SOS WP</a>

Vediamo come funzionano i link. Il tag per i link è <a> e al suo interno troviamo diversi attributi.

href indica l’URL di destinazione. Deve includere anche https:// per funzionare correttamente.

L’attributo title consiste in un testo che chiarisce meglio la funzione di un link. Questo testo apparirà se andiamo col cursore del mouse sopra il link.

target="_blank" rel="noopener " si usa per far aprire il link in una nuova scheda del browser. Utile se linki a una risorsa esterna, ma non vuoi che i visitatori abbandonino il tuo sito.

L’attributo accesskey, invece, imposta una combinazione di tasti per aprire il link senza doverci cliccare sopra con il mouse.

Il testo racchiuso tra i tag di apertura e chiusura è chiamato anchor text e ti suggerisco di usare sempre parole che riassumano la funzione del link. Cioè, evita di usare espressioni come “Clicca qui”, “Apri questa pagina”. Inoltre, non mettere l’URL nell’anchor text, a meno che non sia proprio necessario che i tuoi utenti vedano l’URL per esteso.

Un tipo speciale di link è il link mailto, che serve per inviare email. Al posto dell’URL, nell’attributo href inserisci mailto: seguito dall’indirizzo email:

<a href="mailto:supporto@sos-wp.it">Scrivici!</a>

<img>

<img src="immagine.jpg" alt="Descrizione immagine" />

Ora inseriremo un’immagine. Il tag <img> ha bisogno, per funzionare, del percorso in cui si trova l’immagine, e lo aggiungiamo nell’attributo src. Il percorso è relativo alla posizione del file in cui stiamo lavorando. Perciò:

  • se l’immagine è nella stessa cartella del nostro file HTML, scriviamo solo il nome del file;
  • se invece è in una sottocartella rispetto a quella dove ci troviamo, scriviamo nome_cartella/nome_file;
  • se l’immagine si trova in una cartella di livello superiore, torniamo indietro di ciascun livello usando ../.

Oppure, possiamo anche inserire l’URL del file immagine che vogliamo usare.

Suggerisco di aggiungere sempre l’attributo alt alle immagini. Esso viene mostrato nel caso in cui l’immagine non fosse disponibile e, in più, viene letto dai motori di ricerca. Perciò usiamo l’alt per descrivere l’immagine e, possibilmente, inseriamoci le keywords.

Inserimento immagini e testo alt

Le liste

Le liste sono di due tipi: puntate e numerate. Le liste puntate hanno come punto elenco un simbolo (cerchio, quadrato, immagine…), mentre quelle numerate avranno un numero o una lettera.

<ul>

<ul>
<li>Questo è un elenco;</li>
<li>Inseriamo tutte le voci;</li>
<li>E terminiamo.</li>
</ul>

L’elenco puntato è indicato dal tag <ul>, unordered list. Ogni voce dell’elenco deve essere contrassegnata dal tag <li>. Il simbolo predefinito dell’elenco puntato è un pallino nero.

<ol>

<ol>
<li>Prima voce dell'elenco numerato;</li>
<li>Seconda voce;</li>
<li>Terza voce.</li>
</ol>

Gli elenchi numerati, o ordered list, si indicano con <ol> e le voci al suo interno si segnano sempre con <li>. Di default, l’elenco numerato è visualizzato con dei numeri arabi, ma possiamo cambiare il tipo di numerazione con l’attributo type:

  • <ol type="A"> lettere maiuscole;
  • <ol type="a"> lettere minuscole;
  • <ol type="I"> numeri romani.
Elenchi ul e ol

<table>

<table>
<thead>
<tr> <th>titolo 1</th>  <th>titolo 2</th> </tr> 
</thead>
<tbody>
<tr> <td>dato 1</td>  <td>dato 2</td> </tr> 
<tr> <td>dato 3</td>  <td>dato 4</td> </tr> 
<tr> <td>dato 5</td>  <td>dato 6</td> </tr> 
</tbody>
</table>

Le tabelle hanno una struttura ben definita. Il tag <table> indica l’intera tabella. Essa si divide un due parti: il <thead>, per indicare le intestazioni, e il <tbody>, ossia il contenuto.

table html

Al loro interno, dovremo indicare ogni volta che inizia e termina una riga, usando <tr>.

Nella thead, ciascun dato, o cella, viene indicato con <th>. Invece, nella sezione tbody le celle saranno indicate con <td>.

Altri tag

Nella sezione Testo dell’editor WordPress, ci sono dei pulsanti che permettono di inserire automaticamente molti dei tag che ti ho illustrato. In più, troverai:

  • b-quote: inserisce il tag <blockquote>, che identifica una citazione;
  • del e ins: <del> è un testo cancellato, mentre <ins> è l’inserimento, come una correzione, che segue la cancellazione;
  • code: inserisce il tag <code>, ossia un testo con carattere monospace (come quello che ho usato in questo articolo per evidenziare i tag).
Altri tag nell'editor WordPress

Tabella riassuntiva dei tag HTML

Abbiamo visto tutti i principali tag HTML e le loro funzioni. Consulta la tabella qui sotto per una rapida consultazione ogni volta che ne avrai bisogno!

TagFunzioneNote
<!DOCTYPE html>Doctype declaration
htmlintero documento HTML
headinformazioni sulla pagina
titletitolo del documento
metainformazioni sul contenuto<meta charset="UTF-8">
<meta name="description" content="breve descrizione del contenuto della pagina.">
<meta name="author" content="Nome dell'autore">
linkrisorse collegate<link rel="stylesheet" type="text/css" href="css/style.css">
bodycontenuti visibili
headertestata
navmenu
maincontenuti principali
asidesidebar
footerpiè di pagina
h1… h6titoli e sottotitoli
pparagrafo
spanparte di testo
br /interruzione di riga
stronggrassetto
emcorsivo
alink<a href="https://sos-wp.it" title="Vai al nostro sito" target="_blank" rel="noopener ">SOS WP&lt/a>
<a href="mailto:supporto@sos-wp.it">Scrivici!</a>
imgimmagine<img src="immagine.jpg" alt="Descrizione immagine" />
ulelenco puntato
olelenco numerato<ol type="A">
<ol type="a">
<ol type="I">
lielemento di un elenco
tabletabella
theadintestazioni della tabella
tbodycorpo della tabella
trriga di una tabella
tdcella di una tabella
<blockquote>citazione
<del>testo sbarrato
<ins>correzione
<code>testo con carattere monospace

Fantastico! Hai terminato la sezione relativa all’HTML di questa guida!

Esercizio sull’HTML

Ora, ti consiglio di fare un po’ di esercizi. Crea un nuovo articolo WordPress e prova a inserire i seguenti tag:

  • h1… h6
  • p
  • ul e ol
  • span
  • br
  • strong
  • em
  • a (sia URL che email)
  • ins e del
  • blockquote
  • img
  • table (completa)

E adesso, entriamo nella seconda parte della nostra guida HTML e CSS. Scopriamo come personalizzare i nostri tag usando il CSS!

Guida CSS

Dove si usa il CSS

Il CSS può essere modificato utilizzando il file style.css. Prima di effettuare qualsiasi personalizzazione, hai già installato un tema child? È molto importante, se non vuoi perdere dati!

Il CSS può essere applicato anche all’interno dell’HTML con il tag <style> o con l’attributo style.

Il tag <style> si trova nella sezione head.

<head<
<title>Il mio documento</title>
<style>
...codici CSS...
</style>
</head<

L’attributo style, invece, si applica al singolo elemento da modificare.

<p style="...codici CSS...">Questo è il mio paragrafo.</p>
Guida html e css: file style css WordPress

La sintassi CSS

Il linguaggio CSS è formato da selettore e dichiarazioni. Il selettore indica quale elemento deve essere modificato, mentre le dichiarazioni indicano le impostazioni da applicare. Le dichiarazioni si inseriscono all’interno di parentesi graffe, usando la coppia proprietà: valore, chiusa da un punto e virgola:

selettore {
proprietà1: valore;
proprietà2: valore;
proprietà3: valore;
}

I selettori sono di vario tipo. Possiamo richiamare l’elemento HTML attraverso il nome tag, un id o una classe.

Per richiamare il selettore con il nome tag, scrivo semplicemente il nome del tag, senza i simboli < e >.

p {
color: #000000;
}

h1 {
font-size: 50px;
}

Con questo sistema, il selettore serve a richiamare tutti quei tag presenti nel documento. Nel caso qui sopra, tutti i paragrafi avranno il testo di colore nero, e tutti gli h1 avranno una carattere di 50 pixel.

Per usare id e classi, invece, dovremo aggiungerli all’elemento che ci interessa.

L’id è un valore univoco, perciò non ci possono essere due id con lo stesso valore in un unico documento.

<p id="mioParagrafo">

La classe, invece, può essere applicata a più elementi.

<p class="miaClasse">Questo è un paragrafo.</p>
<p class="miaClasse">Questo è un altro paragrafo.</p>
<p>Questo è un paragrafo senza classe.</p>

Per richiamare un id nel CSS, si usa il simbolo #, mentre per la classe useremo il punto:

#mioParagrafo {
color: #222222;
}

.miaClasse {
font-size: 18px;
}

In questo esempio, solamente il paragrafo con id “mioParagrafo” sarà di colore grigio, mentre tutti i paragrafi con classe “miaClasse” hanno un carattere di 18 pixel.

Ora che abbiamo capito come selezionare gli elementi da modificare, passiamo alle proprietà principali del CSS.

Le proprietà CSS

Proprietà dei font

Partiamo con lo studio delle proprietà CSS che si applicano ai font, quindi tutto ciò che riguarda la formattazione del testo.

font-family

p {
font-family: "Times New Roman", Times, serif;
}
Esempi di font family

La proprietà font-family si usa per scegliere il tipo di font. Il suo valore è formato da tre parametri, separati da una virgola. Questi parametri sono tre famiglie di font, che partono dal più specifico per arrivare al più generico: se il primo non è disponibile per essere visualizzato sul browser, si passa al secondo, oppure al terzo:

  • famiglia 1: il nome del font. Se il nome è composto da più parole, bisogna inserirlo tra virgolette, altrimenti non c’è bisogno – es. Times New Roman, Book Antiqua, Monotype Corsiva…;
  • famiglia 2: è il nome di un font più diffuso, ma simile a quello che abbiamo scelto per primo – Arial, Helvetica, Times…;
  • famiglia 3: è la famiglia generica – serif, sans-serif, monospace.

font-style

h2 { 
font-style: italic;
}

Il font-style può essere di due valori:

  • normal, il valore di default;
  • italic, che rende il testo in corsivo.

Quando dobbiamo inserire un testo in corsivo, suggerisco di riflettere se sia più appropriato usare il tag HTML <em> oppure il CSS.

font-weight

span {
font-weight: bold;
}

Questa proprietà indica lo spessore del carattere e può avere i seguenti valori:

  • normal oppure 400: testo normale;
  • bold oppure 700: grassetto;
  • lighter: più sottile del default;
  • bolder: più spesso del default;

Ti consiglio di ritornare un attimo alla sezione sul tag HTML <strong> per capire quando è meglio usare il tag e quando è preferibile il CSS.

font-size

.smallText {
font-size: 12px;
}

La proprietà font-size indica le dimensioni del testo.

Ci sono diverse unità di misura:

  • pixel (px): è un’unità di misura non responsive, cioè rimane fissa su qualsiasi dispositivo;
  • em: è un’unità di misura responsive. 1em corrisponde alla dimensione di default del browser (solitamente corrisponde a 16px);
  • percentuali: anche le percentuali sono responsive. 100% è la dimensione predefinita del browser.

color

#testoRosso {
color: red;
}

La proprietà color attribuisce un colore al testo. Vai nella sezione sui colori per scoprire come usare i colori con il CSS.

Spazi intorno agli elementi

margin e padding

schema margin, padding e border
blockquote {
margin: 15px;
padding: 5px;
}

margin indica lo spazio intorno all’elemento.

padding è lo spazio che si trova tra il confine dell’elemento e il suo contenuto, come se fosse un margine interno.

Possiamo applicare un valore diverso di margin e padding per ciascuno dei 4 lati di un elemento, oppure valori uguali.

  • margin: 15px: tutti e quattro i lati dell’elemento hanno un margine di 15px;
  • margin: 5px 10px: il primo numero indica sopra e sotto (5px), il secondo numero destra e sinistra (10px);
  • padding: 5px 10px 15px: il primo valore indica sopra (5px), il secondo destra e sinistra (10px), il terzo sotto(15px);
  • padding: 5px 10px 15px 20px: i valori indicano i 4 lati in senso orario a partire dall’alto – sopra, destra, sotto, sinistra.

È possibile applicare il valore a un singolo lato dell’elemento usando la proprietà margin- o padding- insieme alla direzione:

  • margin-top (sopra), margin-right (destra), margin-bottom (sotto), margin-left (sinistra);
  • padding-top (sopra), padding-right (destra), padding-bottom (sotto), padding-left (sinistra).

Esempio:

img {
margin-top: 20px;
}

border

img {
border: 2px solid black;
}

Il boder è una linea che delimita l’elemento: al suo interno ci sarà l’elemento con il padding, al suo esterno ci sono i margini.

Il bordo ha diversi parametri: spessore, tipo, colore.

Lo spessore si indica con la proprietà border-width ed è un valore in pixel, oppure si indicano i valori predefiniti thin – sottile, medium, thick – grosso.

Il tipo di bordo, border-style, può essere solid – lineare, dashed – tratteggiato, dotted – una serie di punti, double – doppio ecc.

Il colore del bordo si indica con border-color. I colori hanno diverse modalità di selezione nel CSS, e li vediamo subito nella prossima sezione.

Per abbreviare, possiamo indicare tutte le proprietà del bordo con un’unica proprietà, border, che avrà come valori, in questo ordine: spessore, tipo, colore. I tre parametri sono separati da uno spazio.

Colori con i CSS

Come appena accennato, ci sono diversi modi di rappresentare i colori con il CSS. Eccoli.

Color Picker per la scelta dei colori

Nome del colore

blockquote {
border-color: pink;
}

Il sistema che usa il nome del colore consiste nell’inserire la denominazione in inglese del colore. È possibile usare 140 tonalità diverse. Consulta la lista dei nomi dei colori del W3C per conoscerli tutti.

Valore esadecimale

h3 {
color: #FF0000;
}

Il formato esadecimale è quello più diffuso in assoluto, perciò ti consiglio di studiarlo bene. Il valore secondo questo formato è composto da un # seguito da sei cifre (da 0 a 9) o lettere (da A a F). Si parte da #000000 – totale assenza di colore – che corrisponde al nero, fino ad arrivare a #FFFFFF – massimo valore di colore – che sarebbe il bianco.

La prima coppia di cifre indica la quantità di rosso, la seconda coppia indica la quantità di verde, le ultime due cifre invece sono per il blu.

Di conseguenza, il colore #FF0000 corrisponde al rosso, #00FF00 al verde, #0000FF al blu.

Consulta tutti i colori disponibili con il Color Picker del W3C.

Sistema RGB

body {
background-color: rgb(0, 255, 0);
}

Il sistema RGB indica la quantità di rosso (R), verde (G) e blu (B) presenti nel colore, usando un valore da 0 a 255. Si usa indicando la dicitura rgb e poi, tra parentesi tonde, i tre valori separati da una virgola.

Nel Color Picker del W3C trovi anche questi valori.

Ci sono anche altri sistemi per indicare i colori con il CSS, ma non sono molto diffusi, perciò non ritengo opportuno parlarne in questo articolo di base.

Background

Il background indica lo sfondo di un elemento. Esso occuperà tutto lo spazio occupato dall’elemento e il suo padding, ma non include i margini, che rimangono esterni.

Suggerisco di fare sempre molta attenzione al contrasto tra sfondo e testo. Uno sfondo troppo scuro rende molto difficile la lettura, specialmente per chi ha problemi di vista. Prova ad eseguire un test del contrasto per verificare che tutti leggano con facilità il tuo contenuto.

Possiamo usare un colore di sfondo, un’immagine oppure un gradiente, ossia una sfumatura tra più colori.

background-color

aside {
background-color: #FFFF99;
}

È possibile inserire il colore di sfondo con la proprietà background-color. Il colore può essere indicato con i sistemi visti sopra. Però possiamo anche inserire il valore transparent, che rende l’elemento trasparente.

background-image

footer {
background-image: url("immagine.jpg");
}

Aggiungiamo un’immagine di sfondo con background-image. Il suo valore sarà la dicitura url seguita dal percorso dell’immagine.

background-repeat

body {
background-repeat: round;
}

Come fare per adattare l’immagine alle dimensioni dell’elemento? Di default, se l’immagine è più piccola, verrà ripetuta in verticale e orizzontale fino a occupare l’intero spazio disponibile.

I valori che puoi usare sono:

  • background-repeat: repeat-x – ripete in orizzontale;
  • background-repeat: repeat-y – ripete in verticale;
  • background-repeat: no-repeat – non ripete;
  • background-repeat: space – ripete senza spezzare;
  • background-repeat: round – allarga fino a riempire lo spazio.

Dimensioni e visibilità

Ogni elemento HTML ha una forma rettangolare e possiamo stabilire le sue dimensioni e la visibilità nella pagina.

width

.box {
width: 450px;
}

La width è la larghezza dell’elemento. Può essere espressa in pixel, o in percentuale.

I pixel indicano una misura fissa che non è responsive.

La misura in percentuale si riferisce all’elemento che contiene quello a cui stiamo dando la dimensione. Se ho un’immagine con width: 50%; dentro un paragrafo, l’immagine sarà larga la metà del paragrafo.

height

#sidebar {
height: 800px;
}

Il valore heigth indica l’altezza di un elemento. Anche questo si può indicare in pixel o in percentuale.

display

.hidden {
display: none;
}

La proprietà display indica come deve essere reso il rettangolo nel quale si trova un elemento:

  • inline: elemento su una riga;
  • block: elemento che occupa la larghezza disponibile (o che gli abbiamo impostato con width;
  • inline-block: elemento su una stessa riga, ma possiamo dargli una larghezza e un’altezza;
  • none: l’elemento “scompare”.

Si può usare display: none; per visualizzare un elemento sul PC, ma nasconderlo dai cellulari.

Una proprietà simile è visibility, che può assumere i valori visible (di default) o hidden. Un elemento hidden, però, continuerà a occupare lo spazio nella pagina anche se non lo vediamo.

overflow

#sezione {
overflow: visible;
}

La proprietà overflow indica il comportamento del contenuto di un box nel caso in cui la sua altezza sia troppo piccola per contenerlo. Il valore visible visualizzerà il contenuto anche al di fuori del box, hidden mostrerà solo il contenuto che può stare al suo interno, mentre auto aggiungerà delle barre di scorrimento per permetterci di vedere tutto il contenuto.

La posizione degli elementi

Vediamo adesso come posizionare gli elementi all’interno della pagina.

position

#header {
position: static;
}

La proprietà position permette di stabilire la posizione nella pagina. Il valore di default è static e posiziona l’elemento successivamente a quello precedente.

Usando l’attributo relative, possiamo spostare l’elemento nelle 4 direzioni. Usando le proprietà left, right, top e bottom, possiamo spostare l’elemento di un certo numero di pixel:

#header {
position: relative;
left: 30px;
}

Il valore fixed attacca l’elemento ad un preciso punto: anche se scorro la pagina, vedo sempre l’elemento in quella posizione.

Simile a fixed è sticky, che fa diventare “fixed” l’elemento non appena, scorrendo, raggiunge il bordo superiore della finestra.

Con absolute invece l’elemento si posizionerà in maniera relativa al suo genitore.

z-index

Esempi di float e z-index
.sovrapposto {
z-index: 9999;
}

z-index è un numero positivo o negativo che posiziona l’elemento davanti o dietro gli altri, in caso di sovrapposizione. I valori più bassi andranno sotto, quelli più alti invece si sovrappongono.

float

.destra {
float: right;
}

float ha come valore left, right oppure none.

“left” significa che l’elemento si posiziona a sinistra rispetto al precedente, con “right” si posizionerà sulla destra, e con “none” rimane nella posizione di default.

Se non annulliamo il float quando non serve più, anche gli elementi successivi si sposteranno. Perciò, resettiamo le posizioni con la proprietà clear, che impedisce a un elemento di stare a destra (col valore right), a sinistra (left) o da entrambi i lati (both).

Tabella riassuntiva delle proprietà CSS

Abbiamo visto tutte le principali proprietà CSS che potresti incontrare nella creazione del tuo sito web.

Concludo anche questa sezione con una tabella riassuntiva delle proprietà viste finora.

ProprietàValoriFunzione
font-familyfamiglia1, famiglia2, famiglia generica;imposta il font
font-stylenormal, italictesto normale o corsivo
font-weightnormal, bold, bolder, lighter, 400, 700spessore del testo
font-sizepx, em, percentuale
colorvalore esadecimale – #FFFFFF
valore RGB – rgb(0, 0, 255)
nome colore
marginordine dei valori: sopra, destra, sotto, sinistraspazio al di fuori dell’elemento
paddingordine dei valori: sopra, destra, sotto, sinistraspazio interno tra il confine e il contenuto
border-widthpx, thin, medium, thickspessore del bordo
border-styledotted, dashed, solid, doubletipo di bordo
border-colorvalore esadecimale – #FFFFFF
valore RGB – rgb(0, 0, 255)
nome colore
borderordine valori: width – style – color
background-colortransparent
valore esadecimale – #FFFFFF
valore RGB – rgb(0, 0, 255)
nome colore
background-imageurl(“”)inserire percorso immagine
background-repeatrepeat-x, repeat-y, no-repeat, space, roundriempimento dello spazio
widthdimensione, percentualelarghezza
heigthdimensione, percentualealtezza
displayinline, block, inline-block, nonenone fa sparire l’elemento
visibilityvisible, hiddenhidden nasconde l’elemento, ma lascia lo spazio
overflowvisible, hidden, autovisibilità del contenuto in un elemento troppo corto
positionstatic, relative, absolute, fixed, sticky
z-indexnumero positivo o negativogestisce la sovrapposizione di elementi
floatright, left, noneposizione a destra o sinistra
clearright, left, bothresetta il float

Conclusione

Sì, c’è tanto da studiare, ma una volta appreso il meccanismo è anche facile capire come e dove intervenire se ci si presenta un problema di formattazione.

Ti ricordo che, se vuoi approfondire, puoi richiedere la nostra formazione 1 a 1 con un insegnante esperto che risponderà a tutte le tue domande e ti aiuterà a imparare secondo le tue necessità.

Hai trovato utile questa guida?

Dove hai incontrato maggiori difficoltà

Scrivici le tue domande nei commenti.

Ti potrebbe interessare anche

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

Hai già ricevuto i nostri Webinar gratuiti?

Impostazioni privacy