Introduzione a CSS
Usa CSS per stilizzare elementi HTML, creare layout di pagine web, impostare colori, font e molto altro. Impara a stilizzare le pagine web con CSS.
Cascading Style Sheets (CSS) è il linguaggio che controlla come appare una pagina web. Mentre HTML definisce il contenuto e la struttura di una pagina (intestazioni, paragrafi, liste, link), CSS ne descrive la presentazione — colori, font, spaziatura, dimensioni e layout. I due lavorano insieme: HTML è lo scheletro, CSS è la pelle.
CSS è stato creato dal World Wide Web Consortium (W3C) ed è ora uno standard aperto supportato da tutti i browser moderni.
Questa pagina tratta cosa è CSS, perché esiste, come si scrive una regola CSS e dove andare dopo.
Perché esiste CSS
Nei primi anni del web, lo stile era inserito direttamente nell'HTML tramite attributi e tag presentazionali. Questo rendeva le pagine difficili da mantenere: cambiare un colore significava modificare ogni elemento su ogni pagina. CSS risolve questo problema separando il contenuto dalla presentazione. Il markup viene scritto una volta sola, e il suo aspetto viene controllato da un insieme separato di regole.
Questa separazione offre tre grandi vantaggi:
- Una modifica, applicata ovunque. Un singolo foglio di stile esterno può stilizzare ogni pagina di un sito. Aggiorna un file e l'intero sito cambia.
- HTML più pulito e leggero. Il markup rimane focalizzato sul significato, il che è più facile da leggere e più utile per l'accessibilità e la SEO.
- Design riutilizzabile e coerente. Le stesse regole si applicano automaticamente a ogni elemento corrispondente, così bottoni, intestazioni e link hanno lo stesso aspetto su tutto il sito.
Come appare una regola CSS
Una regola CSS ha due parti: un selettore che sceglie quali elementi stilizzare, e un blocco di dichiarazione (all'interno di { }) che elenca cosa modificare. Ogni dichiarazione è una coppia proprietà: valore;.
p {
color: blue;
font-size: 16px;
}In questa regola:
pè il selettore — punta a ogni elemento<p>(paragrafo).colorefont-sizesono le proprietà — le cose che vengono stilizzate.bluee16pxsono i valori — ciò a cui viene impostata ogni proprietà.- Il punto e virgola
;termina ogni dichiarazione; le parentesi graffe{ }le raggruppano.
Ecco una pagina completa che usa CSS per stilizzare l'intestazione e il paragrafo:
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>L'intestazione diventa blu e centrata, e il paragrafo diventa grigio e più grande — il tutto senza toccare il testo stesso.
Dove si trova CSS
Puoi applicare CSS in tre modi, e li incontrerai tutti nel capitolo Come aggiungere CSS:
- Esterno — regole salvate in un file
.cssseparato e collegate dalla pagina. Questo è l'approccio standard per i siti reali perché un file stilizza molte pagine. - Interno — regole inserite all'interno di un elemento
<style>nella<head>della pagina (come nell'esempio sopra). - Inline — un attributo
stylesu un singolo elemento, usato per modifiche rapide e isolate.
Dove andare dopo
Ora che sai cosa è CSS, continua con i fondamenti:
- Sintassi CSS — l'anatomia di una regola in dettaglio.
- Come aggiungere CSS — stili inline, interni ed esterni.
- Selettori CSS — tutti i modi per selezionare gli elementi.
- CSS Id e Class — selezionare elementi specifici per nome.