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.
Su questo articolo ti lascerò anche delle tabelle riassuntive da prendere come riferimento ogni volta che ne avrai bisogno. Buona lettura!
Come accennavo prima, l’HTML e il CSS ti permettono di gestire delle personalizzazioni che a volte sono difficili da ottenere con l’editor a blocchi, tanto meno con l’editor classico di WordPress.
Apri la pagina di modifica di un tuo articolo qualsiasi del tuo sito WordPress.
Seleziona un blocco, clicca sui tre puntini delle opzioni e vai su Modifica come HTML.
Se invece usi l’editor classico, vai nel riquadro dei contenuti. Noterai che hai due linguette, Visuale, che è quella selezionata, e Testo.
In entrambi i casi, 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 modifica in HTML e lavora direttamente sul codice.
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.
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.
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.
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: <img src="images/immagine.jpg">.
Nell’HTML 5 (la versione attualmente raccomandata dal World Wide Web Consortium) non è necessario aggiungere altro, mentre le versioni precedenti richiedevano uno slash prima del simbolo >: <img src="images/immagine.jpg" />.
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 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 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> ...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>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.
Su WordPress, è quello che impostiamo come titolo SEO nei plugin come Yoast e Rank Math.
<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.
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.
<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.
Nei temi a blocchi, la header e il menu sono gestiti dalla sezione Aspetto > Temi > Navigazione oppure dai template delle pagine.
<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> ...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…
Ora che sappiamo come è strutturata la pagina web, andiamo a vedere come si inseriscono i contenuti, i testi, e come formattarli.
<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> 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>.
<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.
<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.
<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.
<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 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 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ò:
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.
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> <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> <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.<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.
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>.
I blocchi dell’editor WordPress sono semplicemente dei modi rapidi per inserire automaticamente molti dei tag che ti ho illustrato. Alcuni sono dei semplici tag, altri sono combinazioni di tag che creano elementi più complessi. Ad esempio:
<blockquote>;<code>, ossia un testo con carattere monospace (come quello che ho usato in questo articolo per evidenziare i tag);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!
| Tag | Funzione | Note |
|---|---|---|
| <!DOCTYPE html> | Doctype declaration | |
| html | intero documento HTML | |
| head | informazioni sulla pagina | |
| title | titolo del documento | |
| meta | informazioni sul contenuto | <meta charset="UTF-8"><meta name="description" content="breve descrizione del contenuto della pagina."><meta name="author" content="Nome dell'autore"> |
| link | risorse collegate | <link rel="stylesheet" type="text/css" href="css/style.css"> |
| body | contenuti visibili | |
| header | testata | |
| nav | menu | |
| main | contenuti principali | |
| aside | sidebar | |
| footer | piè di pagina | |
| h1… h6 | titoli e sottotitoli | |
| p | paragrafo | |
| span | parte di testo | |
| br / | interruzione di riga | |
| strong | grassetto | |
| em | corsivo | |
| a | link | <a href="https://sos-wp.it" title="Vai al nostro sito" target="_blank" rel="noopener ">SOS WP</a><a href="mailto:supporto@sos-wp.it">Scrivici!</a> |
| img | immagine | <img src="immagine.jpg" alt="Descrizione immagine"> |
| ul | elenco puntato | |
| ol | elenco numerato | <ol type="A"><ol type="a"><ol type="I"> |
| li | elemento di un elenco | |
| table | tabella | |
| thead | intestazioni della tabella | |
| tbody | corpo della tabella | |
| tr | riga di una tabella | |
| td | cella di una tabella | |
| <blockquote> | citazione | |
| <code> | testo con carattere monospace |
Fantastico! Hai terminato la sezione relativa all’HTML di questa guida!
Ora, ti consiglio di fare un po’ di esercizi. Crea un nuovo articolo WordPress e prova a inserire i seguenti tag:
E adesso, entriamo nella seconda parte della nostra guida HTML e CSS. Scopriamo come personalizzare i nostri tag usando 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>
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.
Nell’editor a blocchi di WordPress puoi applicare un id o una classe a qualsiasi blocco nelle impostazioni Avanzate.
Ora che abbiamo capito come selezionare gli elementi da modificare, passiamo alle proprietà principali del CSS.
Partiamo con lo studio delle proprietà CSS che si applicano ai font, quindi tutto ciò che riguarda la formattazione del testo.
p {
font-family: "Times New Roman", Times, serif;
}
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:
h2 {
font-style: italic;
}
Il font-style può essere di due valori:
Quando dobbiamo inserire un testo in corsivo, suggerisco di riflettere se sia più appropriato usare il tag HTML <em> oppure il CSS.
span {
font-weight: bold;
}
Questa proprietà indica lo spessore del carattere e può avere i seguenti valori:
Ti consiglio di ritornare un attimo alla sezione sul tag HTML <strong> per capire quando è meglio usare il tag e quando è preferibile il CSS.
.smallText {
font-size: 12px;
}
La proprietà font-size indica le dimensioni del testo.
Ci sono diverse unità di misura:
#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.
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.
È possibile applicare il valore a un singolo lato dell’elemento usando la proprietà margin- o padding- insieme alla direzione:
Esempio:
img {
margin-top: 20px;
}
img {
border: 2px solid black;
}
Il border è 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.
Come appena accennato, ci sono diversi modi di rappresentare i colori con il CSS. Eccoli.
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.
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.
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.
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.
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.
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.
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.Ogni elemento HTML ha una forma rettangolare e possiamo stabilire le sue dimensioni e la visibilità nella pagina.
.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.
#sidebar {
height: 800px;
}
Il valore heigth indica l’altezza di un elemento. Anche questo si può indicare in pixel o in percentuale.
.hidden {
display: none;
}
La proprietà display indica come deve essere reso il rettangolo nel quale si trova un elemento:
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.
#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.
Vediamo adesso come posizionare gli elementi all’interno della pagina.
#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.
.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.
.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).
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à | Valori | Funzione |
|---|---|---|
| font-family | famiglia1, famiglia2, famiglia generica; | imposta il font |
| font-style | normal, italic | testo normale o corsivo |
| font-weight | normal, bold, bolder, lighter, 400, 700 | spessore del testo |
| font-size | px, em, percentuale | |
| color | valore esadecimale – #FFFFFF valore RGB – rgb(0, 0, 255) nome colore | |
| margin | ordine dei valori: sopra, destra, sotto, sinistra | spazio al di fuori dell’elemento |
| padding | ordine dei valori: sopra, destra, sotto, sinistra | spazio interno tra il confine e il contenuto |
| border-width | px, thin, medium, thick | spessore del bordo |
| border-style | dotted, dashed, solid, double | tipo di bordo |
| border-color | valore esadecimale – #FFFFFF valore RGB – rgb(0, 0, 255) nome colore | |
| border | ordine valori: width – style – color | |
| background-color | transparent valore esadecimale – #FFFFFF valore RGB – rgb(0, 0, 255) nome colore | |
| background-image | url(“”) | inserire percorso immagine |
| background-repeat | repeat-x, repeat-y, no-repeat, space, round | riempimento dello spazio |
| width | dimensione, percentuale | larghezza |
| heigth | dimensione, percentuale | altezza |
| display | inline, block, inline-block, none | none fa sparire l’elemento |
| visibility | visible, hidden | hidden nasconde l’elemento, ma lascia lo spazio |
| overflow | visible, hidden, auto | visibilità del contenuto in un elemento troppo corto |
| position | static, relative, absolute, fixed, sticky | |
| z-index | numero positivo o negativo | gestisce la sovrapposizione di elementi |
| float | right, left, none | posizione a destra o sinistra |
| clear | right, left, both | resetta 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.
La posta elettronica è uno strumento ormai imprescindibile in qualunque strategia di marketing ma configurare…
Su internet si trova di tutto e tu stai cercando idee per i tuoi contenuti.…
Qualunque sito viene pubblicato non vive nel vuoto pneumatico del suo server. La rete è…
I servizi per accorciare link sono molto diffusi. Tanti siti web fanno affidamento su plugin…
Come costruire credibilità, incrementare la visibilità e far crescere i profitti attraverso un sito web.…
Hai un errore nella tua Bacheca WordPress relativo alla versione PHP? Non ti preoccupare, lo…