In questa lezione, parleremo di come aggiungere CSS al tuo sito web e come utilizzare i selezionatori CSS per modificare lo stile dei tuoi elementi HTML. Inoltre, esploreremo il concetto di specificità CSS e come può influenzare il modo in cui i tuoi stili vengono applicati ai tuoi elementi. Infine, parleremo dell'ereditarietà CSS e di come puoi utilizzarla per risparmiare tempo e semplificare il processo di styling del tuo sito web. Attraverso esempi e spiegazioni dettagliate, questa lezione ti aiuterà a comprendere i concetti fondamentali del CSS e a creare stili visivi accattivanti per il tuo sito web.
Come inserire CSS in HTML
Per applicare lo stile CSS ad una pagina web, puoi inserire il codice CSS all'interno del tag <style> all'interno della sezione head del documento HTML. Ad esempio, ecco un esempio di come potrebbe apparire il tuo codice CSS:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito web</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Benvenuto nel mio sito web!</h1>
<p>Questo è un paragrafo di esempio.</p>
</body>
</html>In questo esempio, stiamo selezionando tutti gli elementi h1 (che rappresentano il titolo della pagina) e applicando loro uno stile di testo blu.
Selezione
Come accennato in precedenza, CSS offre diversi selezionatori per selezionare gli elementi HTML ai quali si vuole applicare uno stile. Alcuni esempi di selezionatori comuni includono:
- Selettore di tipo: seleziona tutti gli elementi di un determinato tipo, ad esempio tutti i paragrafi (
p), tutti i titoli (h1,h2, ecc.), tutti i link (a), ecc. - Selettore di classe: seleziona tutti gli elementi che hanno un determinato valore di classe, ad esempio tutti gli elementi con la classe "mio-stile" (
<div class="mio-stile">). - Selettore di ID: seleziona un singolo elemento con un determinato ID, ad esempio il primo elemento con ID "introduzione" (
<div id="introduzione">).
Specificità
Quando si applicano più regole CSS allo stesso elemento, la specificità viene utilizzata per determinare quale regola deve essere utilizzata. La specificità viene valutata sulla base dei selezionatori utilizzati. Ad esempio, una regola con un selettore di tipo ha una specificità inferiore rispetto a una regola con un selettore di classe.
La specificità viene espressa come una tripla di valori, dove ogni valore rappresenta il numero di selezionatori utilizzati per la regola CSS. Ad esempio, una regola con un selettore di classe (div.mio-stile) avrebbe una specificità di 0 1 0, mentre una regola con un selettore di tipo e uno di classe (p.mio-stile) avrebbe una specificità di 0 2 0.
Ereditarietà
In alcuni casi, gli stili CSS applicati ad un elemento si estendono anche ai suoi elementi figli. Ad esempio, se applichi uno stile di testo rosso ad un elemento div, tutti i testi all'interno di quel div erediteranno quel colore di testo rosso, a meno che non venga esplicitamente specificato diversamente.
Ecco un esempio di come potresti utilizzare l'ereditarietà:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito web</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<h1>Titolo</h1>
<p>Questo è un paragrafo.</p>
</div>
</body>
</html>In questo esempio, stiamo applicando uno stile di testo rosso a tutti gli elementi div. Poiché sia l'elemento h1 che il p sono figli dell'elemento div, ereditano lo stile di testo rosso. Ciò significa che il testo "Titolo" e il testo del paragrafo saranno entrambi rossi.
Tuttavia, se applicassimo uno stile di testo blu solo all'elemento p, come nell'esempio seguente, il testo del paragrafo diventerebbe blu, mentre il testo del titolo rimarrebbe rosso:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito web</title>
<style>
div {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>Titolo</h1>
<p>Questo è un paragrafo.</p>
</div>
</body>
</html>In questo esempio, lo stile di testo blu viene applicato solo all'elemento p, mentre l'elemento h1 eredita ancora lo stile di testo rosso dall'elemento div.
Questi sono solo alcuni degli aspetti fondamentali del CSS. Ci sono molti altri selezionatori, proprietà e tecniche avanzate che puoi utilizzare per creare stili CSS avanzati e complessi.