Introduzione al CSS
CSS (Cascading Style Sheets) è un linguaggio utilizzato per descrivere l’aspetto e la formattazione di un documento scritto in HTML. Con CSS, puoi controllare il layout, i colori, i caratteri e altri aspetti visivi delle pagine web. Mentre HTML si occupa della struttura e del contenuto, CSS si occupa dell’aspetto estetico.
Struttura di Base di un Documento CSS
Un foglio di stile CSS è composto da regole. Ogni regola è costituita da un selettore e un blocco di dichiarazione. La struttura di base è la seguente:
selettore {
proprietà: valore;
}- Selettore: Specifica quali elementi HTML saranno stilizzati.
- Proprietà: Definisce l’aspetto specifico da modificare (es.
color,font-size). - Valore: Specifica come la proprietà dovrebbe essere applicata (es.
red,16px).
Esempio:
h1 {
color: blue;
font-size: 24px;
}Questo codice stilerà tutti gli elementi <h1> della pagina, cambiando il loro colore in blu e la dimensione del carattere in 24px.
Modalità di Aggiunta di CSS a un Documento HTML
Ci sono tre modi principali per aggiungere CSS a un documento HTML:
- CSS Inline:
- Aggiunto direttamente all’interno degli elementi HTML usando l’attributo
style. - Esempio:
- Aggiunto direttamente all’interno degli elementi HTML usando l’attributo
<h1 style="color: blue; font-size: 24px;">Ciao, Mondo!</h1>- CSS Interno (Embedded):
- Aggiunto all’interno della sezione
<head>del documento HTML usando il tag<style>. - Esempio:
- Aggiunto all’interno della sezione
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>- CSS Esterno:
- Definito in un file separato con estensione
.csse collegato al documento HTML tramite il tag<link>. - Esempio:
- Definito in un file separato con estensione
<head>
<link rel="stylesheet" href="styles.css">
</head>Nel file styles.css:
h1 {
color: blue;
font-size: 24px;
}Selettori CSS
I selettori CSS sono utilizzati per “selezionare” gli elementi HTML che desideri stilizzare. I principali tipi di selettori includono:
- Selettori di Tipo:
- Selezionano elementi HTML in base al nome del tag.
- Esempio:
pseleziona tutti i paragrafi<p>.
- Selettori di Classe:
- Selezionano elementi in base al valore dell’attributo
class. - Esempio:
.my-classseleziona tutti gli elementi conclass="my-class".
- Selezionano elementi in base al valore dell’attributo
- Selettori di ID:
- Selezionano un elemento in base all’attributo
id. - Esempio:
#my-idseleziona l’elemento conid="my-id".
- Selezionano un elemento in base all’attributo
- Selettori di Discendenza:
- Selezionano elementi che sono discendenti di un altro elemento.
- Esempio:
div pseleziona tutti i paragrafi<p>all’interno di un<div>.
Proprietà CSS Comuni
- Colore e Sfondo:
color: Cambia il colore del testo.background-color: Imposta il colore di sfondo di un elemento.background-image: Imposta un’immagine di sfondo.
- Testo:
font-family: Specifica il tipo di carattere.font-size: Imposta la dimensione del carattere.text-align: Allinea il testo (es.left,center,right).
- Layout:
margin: Spazio esterno intorno a un elemento.padding: Spazio interno dentro i bordi di un elemento.border: Definisce i bordi di un elemento.display: Specifica il modello di visualizzazione (es.block,inline,flex).
- Dimensioni:
widtheheight: Definiscono la larghezza e l’altezza di un elemento.
Box Model
Il box model è un concetto fondamentale in CSS che descrive la struttura di un elemento. Ogni elemento è racchiuso in un rettangolo che comprende:
- Content: Il contenuto effettivo dell’elemento.
- Padding: Spazio interno tra il contenuto e il bordo.
- Border: Il bordo dell’elemento.
- Margin: Spazio esterno che separa l’elemento dagli altri.
Ecco un esempio visivo:
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}In questo esempio, la larghezza totale dell’elemento sarà data da width + padding + border + margin.
Conclusione
CSS è uno strumento potente che consente di trasformare semplici documenti HTML in pagine web attraenti e professionali. Comprendere le basi dei selettori, delle proprietà e del box model è essenziale per qualsiasi sviluppatore web che desideri creare layout e design web efficaci.
