Folder Open Duotone Icon
,

CSS – Cascading Style Sheets – I fogli di stile

Avatar Mario Giagnotti
Mario Giagnotti

·

·

17 min read

CSS3

Una breve guida su CSS – Cascading Style Sheets – I fogli di stile per controllare lo stile ed il layout di pagine WEB statiche

Una breve guida su CSS – Cascading Style Sheets – I fogli di stile per controllare lo stile ed il layout di pagine WEB statiche


main.zip (411 download )

Indice dei contenuti

Introduzione

I fogli di stile CSS (Cascading Style Sheets, fogli di stile a cascata) sono documenti testuali che definiscono l’aspetto grafico di una pagina web scritta in HTML. Grazie ai CSS, è possibile controllare il layout della pagina, la disposizione degli elementi, lo stile dei caratteri, i colori, gli allineamenti e le spaziature.

Nei primi sviluppi del web, l’HTML consentiva di definire lo stile delle pagine direttamente nel codice, tramite attributi specifici nei tag. Tuttavia, questo metodo risultava inefficiente per siti di grandi dimensioni, poiché richiedeva modifiche manuali a ogni singola pagina.

Limiti della Formattazione HTML

In passato, per definire lo sfondo di una pagina e allineare il testo si utilizzavano attributi direttamente nei tag HTML, ad esempio:

<body bgcolor="lightblue">
    <center>
        <h1>Benvenuti nel mio sito</h1>
    </center>
</body>

Questo metodo, seppur funzionante, presenta diversi problemi:

  • Ridotta manutenibilità: se si volesse cambiare il colore di sfondo su più pagine, sarebbe necessario modificare ogni singolo file HTML.
  • Incompatibilità con le specifiche moderne: molti di questi attributi, come bgcolor, sono stati deprecati nelle specifiche del W3C.
  • Mancanza di separazione tra contenuto e presentazione: la struttura della pagina HTML dovrebbe occuparsi esclusivamente dei contenuti, mentre l’aspetto grafico dovrebbe essere gestito separatamente.

I Vantaggi dei Fogli di Stile CSS

L’introduzione dei CSS ha rivoluzionato la gestione dello stile nelle pagine web, portando i seguenti vantaggi:

1. Separazione tra Contenuto e Presentazione

I CSS permettono di definire lo stile degli elementi HTML senza alterare la loro struttura. Per esempio, possiamo scrivere un foglio di stile separato (stile.css) con il seguente contenuto:

body {
    background-color: lightblue;
    text-align: center;
}

h1 {
    color: darkblue;
    font-family: Arial, sans-serif;
}

E collegarlo alla nostra pagina HTML tramite:

<link rel="stylesheet" href="stile.css">

In questo modo, qualsiasi modifica allo stile potrà essere effettuata agendo unicamente sul file CSS, senza toccare il codice HTML.

2. Controllo Centralizzato dello Stile

Se il nostro sito web ha più pagine e vogliamo applicare uno stile uniforme a tutte, basta modificare un unico file CSS. Ad esempio, se volessimo cambiare il colore dei titoli <h1> in rosso, basterebbe aggiornare il file stile.css:

h1 {
    color: red;
}

Tutte le pagine collegate a questo foglio di stile adotteranno automaticamente la modifica.

3. Maggiore Accessibilità e Adattabilità

I CSS permettono di adattare il layout della pagina in base al dispositivo utilizzato, migliorando l’accessibilità per tutti gli utenti. Ad esempio, possiamo definire uno stile specifico per gli schermi di dispositivi mobili:

@media screen and (max-width: 600px) {
    body {
        background-color: white;
    }
    h1 {
        font-size: 18px;
    }
}

Grazie a questo approccio, i contenuti si adatteranno automaticamente, garantendo un’esperienza ottimale su desktop, tablet e smartphone.

I Tre Metodi per Utilizzare CSS in HTML

Esistono tre principali metodi per applicare i CSS all’interno dei documenti HTML:

  1. Fogli di stile in linea
  2. Fogli di stile incorporati
  3. Fogli di stile collegati

1. Fogli di Stile in Linea

I fogli di stile in linea non presentano significative modifiche rispetto all’uso degli attributi HTML per la formattazione. Le proprietà di stile vengono definite direttamente all’interno del tag HTML tramite l’attributo style. Questo metodo applica lo stile solo a quel particolare elemento.

Esempio di pagina HTML con stile in linea (costituzione1.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Costituzione della Repubblica Italiana</title>
</head>
<body style="background-color: lightyellow">
    <h1 style="color: navy">Principi fondamentali</h1>
    <h2 style="text-align: center; font-weight: bold">Art. 1</h2>
    <p>...</p>
</body>
</html>

Proprietà CSS utilizzate:

  • background-color: definisce il colore di sfondo.
  • color: specifica il colore del testo.
  • text-align: determina l’allineamento del testo (center, left, right, justify).
  • font-weight: imposta lo spessore del carattere, ad esempio bold (grassetto).

L’uso degli stili in linea, sebbene semplice, rende difficile la gestione dello stile su più elementi e pagine.

2. Fogli di Stile Incorporati

I fogli di stile incorporati permettono un maggiore livello di astrazione, centralizzando le regole CSS all’interno del tag <style>, posizionato nella sezione <head> della pagina. A differenza degli stili in linea, questa modalità consente di applicare regole CSS a più elementi nella stessa pagina web.

Esempio di pagina HTML con foglio di stile incorporato (costituzione2.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Costituzione della Repubblica Italiana</title>
    <style>
        body { background-color: lightyellow; }
        h1 { color: navy; }
        h2 { text-align: center; font-weight: bold; }
    </style>
</head>
<body>
    <h1>Principi fondamentali</h1>
    <h2>Art. 1</h2>
    <p>...</p>
</body>
</html>

Con questo metodo, ogni modifica allo stile di <h2>, ad esempio, avrà effetto su tutti gli elementi <h2> della pagina senza doverli modificare singolarmente.

3. Fogli di Stile Collegati

I fogli di stile collegati rappresentano il metodo più efficiente, poiché permettono di definire le regole CSS in un file esterno con estensione .css. Questo file può essere condiviso tra più pagine web, facilitando la gestione dello stile dell’intero sito.

Esempio di foglio di stile separato (stile.css)

  body { background-color: lightyellow; }
  h1 { color: navy; }
  h2 { text-align: center; font-weight: bold; }

Collegamento del foglio di stile in un documento HTML (costituzione3.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Costituzione della Repubblica Italiana</title>
    <link rel="stylesheet" href="stile.css" type="text/css">
</head>
<body>
    <h1>Principi fondamentali</h1>
    <h2>Art. 1</h2>
    <p>...</p>
</body>
</html>

Questa modalità permette di applicare lo stesso stile a più pagine modificando un solo file, migliorando la coerenza grafica del sito. Qui in basso l’effetto:

Percorsi Assoluti e Relativi nei Collegamenti ai Fogli di Stile

Quando si collega un file CSS a un documento HTML tramite il tag <link>, è necessario specificare il percorso del file CSS nell’attributo href. Il percorso può essere di due tipi:

1. Percorso Assoluto

Un percorso assoluto specifica la posizione esatta del file CSS all’interno del server o su un dominio esterno. Ad esempio:

<link rel="stylesheet" href="https://www.miosito.com/css/stile.css">

In questo caso:

  • Il browser scaricherà il file CSS direttamente dall’URL fornito.
  • Il percorso inizia sempre con http:// o https:// e include il dominio completo.

Un altro esempio di percorso assoluto per un file CSS all’interno dello stesso server è:

<link rel="stylesheet" href="/css/stile.css">

In questo caso:

  • Il percorso inizia con /, indicando che il file si trova nella cartella css situata nella root del sito.

2. Percorso Relativo

Un percorso relativo specifica la posizione del file CSS rispetto alla posizione del file HTML che lo richiama. Ad esempio:

<link rel="stylesheet" href="stile.css">

Qui il file stile.css si trova nella stessa directory del file HTML.

Se il file CSS si trova in una sottocartella, il percorso dovrà includere la cartella:

<link rel="stylesheet" href="css/stile.css">

In questo caso:

  • Il file stile.css si trova all’interno della cartella css, che è una sottocartella della directory del file HTML.

Se il file CSS è in una cartella parente (livello superiore), si utilizza ../:

<link rel="stylesheet" href="../stile.css">

Quando il foglio di stile non è nella stessa directory del file HTML

Se il file CSS si trova in una cartella diversa rispetto al file HTML, bisogna scrivere il percorso relativo corretto. Ecco alcuni esempi:

Caso 1: Il file HTML è in pagina/ e il CSS in stili/

/sito
 ├── pagina/
 │   ├── index.html
 ├── stili/
 │   ├── stile.css

Il collegamento nel file index.html sarà:

<link rel="stylesheet" href="../stili/stile.css">

Caso 2: Il file HTML è in pagine/blog/ e il CSS in assets/css/

/sito
 ├── pagine/
 │   ├── blog/
 │   │   ├── articolo.html
 ├── assets/
 │   ├── css/
 │   │   ├── stile.css

Il collegamento nel file articolo.html sarà:

<link rel="stylesheet" href="../../assets/css/stile.css">

Caso 3: Il CSS è in una sottocartella della directory dell’HTML

/sito
 ├── pagina/
 │   ├── index.html
 │   ├── css/
 │   │   ├── stile.css

Il collegamento nel file index.html sarà:

<link rel="stylesheet" href="css/stile.css">

Conclusione

  • Se il CSS è nella stessa cartella, usa solo il nome del file: "stile.css".
  • Se il CSS è in una sottocartella, aggiungi la cartella: "css/stile.css".
  • Se il CSS è in una cartella superiore, usa ../ per risalire di livello.
  • Se il CSS è su un server esterno, usa un URL assoluto.

I Fogli di Stile a Cascata

Un documento HTML può combinare tutti e tre i metodi di utilizzo dei CSS, seguendo un ordine di priorità definito dal concetto di “cascata”. L’ordine di applicazione degli stili, dal meno prioritario al più prioritario, è il seguente:

  1. Impostazioni predefinite del browser
  2. Fogli di stile collegati (<link>)
  3. Fogli di stile incorporati (<style>)
  4. Fogli di stile in linea (style="...")

Regole di Priorità

  • Le impostazioni predefinite del browser vengono sovrascritte dai CSS personalizzati.
  • I fogli di stile collegati hanno priorità inferiore rispetto a quelli incorporati.
  • I fogli di stile incorporati hanno priorità sui fogli collegati, ma sono sovrascritti dagli stili in linea.
  • Gli stili in linea hanno la massima priorità, poiché definiti direttamente sugli elementi HTML.

Esempio di sovrascrittura:

Se in stile.css è definito:

h2 { color: blue; }

Ma nel documento HTML è presente:

<h2 style="color: red">Art. 1</h2>

Il titolo <h2> apparirà rosso, poiché lo stile in linea ha la precedenza sul foglio di stile esterno.

Selettori e Proprietà CSS

Introduzione ai Selettori CSS

I selettori CSS consentono di applicare stili specifici a determinati elementi HTML all’interno di una pagina web. Esistono diversi tipi di selettori che permettono di targettizzare gli elementi in base al loro nome, classe, ID, stato e relazioni con altri elementi.

1. Selettore di Tipo (Tag)

Seleziona tutti gli elementi di un determinato tipo (tag HTML specifico). Per ogni selettore si dichiara una o più proprietà di stile: ogni proprietà di stile va separata con un punto e virgola. L’insieme delle proprietà è raggruppato da una coppia di parentesi graffe.

h1 {
    color: blue;
}
p {
    font-size: 16px;
}

In questo caso, tutti gli <h1> avranno il testo blu e tutti i paragrafi <p> avranno una dimensione del testo di 16px.

2. Selettore di Classe

Seleziona tutti gli elementi con una determinata classe CSS. La classe definisce le caratteristiche per applicare lo stesso stile a elementi diversi di una o più pagine HTML. il nome delle classi è preceduto dal punto (.)

.titolo {
    color: red;
    font-weight: bold;
}

Nel codice HTML:

<h2 class="titolo">Titolo Importante</h2>

L’elemento <h2> con classe titolo avrà il testo rosso e in grassetto.

3. Selettore di ID

Seleziona un elemento specifico con un identificatore unico.

#menu {
    background-color: gray;
}

Nel codice HTML:

<div id="menu">Menu di navigazione</div>

L’elemento div con ID menu avrà uno sfondo grigio.

Gli identificatori sono solitamente utilizzati per definire il layout di una pagina suddivisa in contenitori (o sezioni), identificati con i tag <div>…</div>.Uno schema generale dell’uso di classi e identifi catori all’interno della pagina HTML è il seguente:

<div id="identificatore">
    ...
    <p class="nomeclasse">
        ...
    </p>    
    ...
</div>

Nel foglio di stile il nome degli identificatori è preceduto dal carattere #.

4. Selettori Gerarchici

Consentono di selezionare elementi in base alla loro posizione all’interno della gerarchia HTML.

  • Selettore discendente (elemento1 elemento2): Seleziona elemento2 solo se contenuto in elemento1.
nav a {
    color: white;
}

Questo stile si applica solo ai link <a> all’interno di <nav>.

  • Selettore figlio diretto (elemento1 > elemento2): Seleziona elemento2 solo se è figlio diretto di elemento1.
div > p {
    color: green;
}
  • Selettore adiacente (elemento1 + elemento2): Seleziona elemento2 solo se si trova immediatamente dopo elemento1.
h1 + p {
    font-style: italic;
}

5. Selettori di Attributo

Applicano stili in base agli attributi HTML.

a[target="_blank"] {
    color: orange;
}

Tutti i link <a> con target="_blank" saranno arancioni.

6. Pseudo-Classi

Modificano l’aspetto di un elemento in base al suo stato.

a:hover {
    color: red;
}

Quando il mouse passa sopra un link, il colore cambia in rosso.

Proprietà CSS Fondamentali

1. Proprietà di Testo

  • color: imposta il colore del testo.
  • font-size: dimensione del testo.
  • font-weight: spessore del testo (normal, bold, lighter, etc.).
  • text-align: allineamento del testo (left, center, right, justify).

Esempio:

p {
    color: blue;
    font-size: 18px;
    text-align: justify;
}

2. Proprietà di Sfondo

  • background-color: colore di sfondo.
  • background-image: immagine di sfondo.
  • background-repeat: gestione della ripetizione dell’immagine.
  • background-size: dimensione dell’immagine di sfondo.

Esempio:

body {
    background-color: lightgray;
    background-image: url("sfondo.jpg");
    background-size: cover;
}

3. Proprietà di Layout

  • width / height: larghezza e altezza di un elemento.
  • margin: spazio esterno.
  • padding: spazio interno.
  • border: bordo dell’elemento.

Esempio:

div {
    width: 300px;
    height: 200px;
    border: 2px solid black;
    margin: 20px;
    padding: 10px;
}

Esempio completo: ARREDA Il GIARDINO

Creare le pagine del sito di un’azienda di arredi per il giardino.

La creazione del foglio di stile è preceduta dalla progettazione della pagina, con il layout e la defi nizione delle caratteristiche dei diversi elementi.

<!DOCTYPEhtml>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Garden - Arredi giardino<title>
        <link rel="stylesheet"href="stileGarden.css"type="text/css"/>
    </head>
  
    <body>
        <div id="titolo">Garden</div>
        <div id="titolo2">Arredi giardino</div>
        <div id="navbar">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="mobili.html">Mobili</a></li>
            <li><a href="strutture.html">Strutture</a></li>
            <li><ahref="grigliati.html">Grigliati</a></li>
            <li><ahref="fioriere.html">Fioriere</a></li>
            </ul>
        </div>
        <div id="contenuto">
            <h2>Legno e giardino</h2>
            <p class="notizia">Novità dal mondo del legno, consigli utili per 
                la manutenzione e molto altro ancora.<br>      
                Nuovo design per panche e fioriere.
            </p>
            <h2>Progettazione dei frangivento</h2>
            <p class="notizia">Trasforma il frangivento in una vera e propria 
                parete multifunzionale che può essere composta
                in base alle tue esigenze. <br>      
                L'obiettivo è creare una soluzione resistente e pratica.
            </p>
        </div>
        <div id="footer">
            <p>scrivi per <a href="mailto:webmaster@sitogarden.it">informazioni</a></p>
        </div>  
    </body>
</html>
  • Il menu di navigazione è un elenco puntato <ul><li> . . .</li></ul>. Ogni voce del menu è un link a una pagina Web diversa.Nella fi gura sono stati indicati i nomi utilizzati nel foglio di stile per gli identifi catori e per le classi.Gli identifi catori sono i nomi dei contenitori <div> e le classi defi niscono le caratteristiche di visualizzazione dei paragrafi della pagina HTML.
  • Bisogna ora definire gli stili. Il tag per i titoli di secondo livello <h2> viene ridefinito con evidenziazione in grassetto (bold), dimensioni maggiori (114% rispetto alle dimensioni predefinite del testo nel browser), font Arial, sans-serif e colore azzurro (codice RGB in esadecimale 006699).
  • La parte in alto della pagina è formata dal titolo (identifi catore titolo) e dal sottotitolo (identifi catore titolo2). Il titolo ha un’altezza di 60 pixel, evidenziazione in grassetto, grande il doppio, font Arial, colore bianco su fondo verde scuro.
  • Il sottotitolo ha le stesse caratteristiche del titolo, ma è 50% più grande delle dimensioni predefinite.
  • Il menu di navigazione a sinistra (identifi catore navbar) ha una larghezza pari al 20% della pagina ed è collocato 10 pixel a sinistra e 80 pixel a partire dal bordo superiore della pagina; il colore di sfondo (background-color) è bianco.
  • Le dimensioni degli item del menu di navigazione sono impostate come 110% rispetto alle dimensioni predefinite del testo nel browser.
  • Si possono impostare anche le modalità di stile per il tag <a href> in modo diverso dallo standard HTML, che visualizza i link in blu sottolineato e i link già visitati in colore porpora. Lo stile riguarda la visualizzazione dei link, dei link visitati (visited) e dei link quando il mouse passa sopra di essi (hover): colore navy per i primi due, senza sottolineatura (text-decoration: none), e colore blu (0000FF) per il terzo.Le stesse proprietà possono essere applicate a due o più selettori, scrivendoli uno accanto all’altro separati dalla virgola.
  • I selettori a:link, a:visited e a:hover si chiamano pseudoselettori.La parte a destra per i contenuti (identificatore contenuto) è impostata con le seguenti dichiarazioni di stile
  • Le notizie del contenitore precedente (classe notizia) sono scritte con caratteri più piccoli (80%).
  • Il piè di pagina (identificatore footer) ha un’altezza di 30 pixel, caratteri più grandi del 14%, font Arial, allineamento al centro, colore bianco su fondo verde scuro.
  • Anche per il footer possiamo ridefi nire gli stili dei link usando gli pseudoselettori visti prima: colore bianco (FFFFFF) per i link e per i link visitati, perché lo sfondo del footer è verde scuro, e colore giallo (FFFF00) per i link quando il mouse passa sopra di esso.
  • Attraverso i fogli di stile CSS si può anche applicare uno sfondo alla pagina, impostando le proprietà del tag predefi nito <body>.La proprietà background-color assegna un colore allo sfondo dell’elemento.
  • Attraverso i fogli di stile CSS si può anche applicare uno sfondo alla pagina, impostando le proprietà del tag predefi nito <body>.La proprietà background-color assegna un colore allo sfondo dell’elemento.
  • Per inserire un’immagine di sfondo si deve usare la proprietà background-image, seguita dalla parola chiave url con l’indirizzo dell’immagine, racchiuso tra parentesi tonde
  • Per inserire un’immagine di sfondo si deve usare la proprietà background-image, seguita dalla parola chiave url con l’indirizzo dell’immagine, racchiuso tra parentesi tonde. La proprietà background-repeat imposta la ripetizione dell’immagine di sfondo. I possibili valori sono:
    • • no-repeat (una sola occorrenza);
    • • repeat-x (ripetizione in orizzontale);
    • • repeat-y (ripetizione in verticale);
    • • repeat (ripetizione in orizzontale e in verticale fino a riempire l’intera pagina).
  • Nelle pagine del sito dell’azienda si inserisce come sfondo l’immagine di un fiore con il file fiore.png che si trova nella sottocartella img

Le precedenti dichiarazioni vengono salvate in un unico file di testo con estensione .css:

body {
    background-image: url(img/fiore.png);
    background-repeat: no-repeat 
}

h2 {
    font: bold114 Arial,sans-serif;
    color: #006699 
}

#titolo {
    height: 60px;
    font: bold200 Arial,sans-serif;
    color: #FFFFFF;
    background-color: #009300 
}

#titolo2 {
    height: 60px;
    font: bold150
    Arial,sans-serif;
    color: #FFFFFF;
    background-color: #009300 
}

#navbar {
    border:1pxsolidred;
    position: absolute;
    width: 20%;left: 10px;
    top: 140px;
    background-color: #FFFFFF 
}

#navbar li {
    font-size: 110% 
}

#navbar a:link, #navbar a:visited {
    color: navy;text-decoration: none 
}

#navbar a:hover {
    color: #0000FF 
}       

#contenuto {
    color: #000000;
    background-color: #FFFFFF;
    margin-right: 20%;
    margin-top: 0px;
    margin-left: 25%;
    margin-bottom: 0px 
}

.notizia {
    font-size: 80% 
}

#footer {
    height: 30px;
    font: bold114%Arial,sans-serif;
    text-align: center;
    color: #FFFFFF;
    background-color: #009300 
}

#footer a:link, #footer a:visited {
    color: #FFFFFF;
    text-decoration: none 
}

#footerba:hover {
    color: #FFFF00 
}

Effetto:

Cliccando qui potrete scaricare alcuni esempi incluso l’esempio completo. Oppure potrete visitare la pagina dei DOWNLOAD

Lascia un commento

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