CSS

Cos'è il CSS?

Il CSS (Cascading Style Sheets) è il linguaggio standard del W3C che consente di personalizzare l'aspetto di una pagina web. Mentre infatti, l'HTML (Hyper Text Markup Language) è un linguaggio di markup, ovvero che definisce la struttura della pagina e dove sono disposti gli elementi, CSS cura l'estetica della pagina aggiungendo colori, permettendo di cambiare font, dimensione del testo, posizione di testo e immagini, e così via <img>.

Come si aggiunge lo stile?

Vi sono 3 modi per inserire un foglio di stile:

Foglio di stile esterno

Consiste nella creazione di un file con estensione .css in cui all'interno sono inserite le regole di stile da applicare. Ogni regola si scrive nel formato:

elemento_html1 {
    proprietà1: valore;
    proprietà2: valore;
    .
    .
}
elemento_html2 {
    proprietà: valore;
    proprietà2: valore;
    .
    .
}
.
.

Dove elemento_html è un cosiddetto “Selettore CSS” che per ora assume il valore di un elemento html, come p, body, img, div ecc. (Da notare l'assenza delle parentesi angolari). Le proprietà invece corrispondono agli attributi degli elementi che vogliamo modificare, come il colore o la dimensione dell'elemento html. Infine, il valore è il valore che diamo alla proprietà. Ad esempio, nel caso di un colore, valore potrà assumere la forma di un numero scritto in esadecimale, come #FFAA2B. I puntini stanno per “eccetera” e non vanno riportati nel codice.

Il foglio di stile esterno si include nella pagina attraverso il tag <link> all'interno del tag <head>:

<head>
    <title>Pagina</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/foglio.css">
</head>

Dove:

rel: indica la relazione che ha il foglio di stile con la pagina web. In questo caso la relazione è quella di essere il foglio di stile primario applicato alla pagina. Si possono creare più fogli collegati alla stessa pagina, ponendo quelli secondari con il valore rel="alternate stylesheet" dove in questo caso si indica che i fogli sono “alternativi” e si può passare tra uno e l' ad esempio tramite uno script in javascript;
type: indica il tipo di contenuto che è inserito all'interno della pagina. Nel caso di un foglio di stile css sarà sempre type="text/css", ma ad esempio può valere anche audio/mp4 nel caso in cui si stia inserendo un file di tipo mp4.
href: indica il percorso in cui si trova la risorsa che vogliamo includere nella pagina. Il percorso può essere relativo alla posizione della nostra pagina in html così come nell'esempio sopra, oppure assoluto, ovvero contenente il percorso completo, come https://www.miosito.it/css/foglio.css". In entrambi i casi si sta indicando che il foglio di stile è contenuto nella cartella nominata css.

Questi 3 attributi sono obbligatori, ovvero gli va sempre dato un valore quando si inserisce il tag <link>.

Foglio di stile embedded

Il foglio di stile embedded o interno, è uno stile incorporato nel codice html. Le regole CSS sono definite con la stessa struttura sintattica dei fogli di stile esterni, ma sono contenute nel tag <style> sempre all'interno del tag <head>:

<head>
    <title>Pagina</title>
    <meta charset="utf-8" />
    <style type="text/css">
        elemento_html1 {
            proprietà1: valore;
            proprietà2: valore;
            .
            .
        }
        elemento_html2 {
            proprietà: valore;
            proprietà2: valore;
            .
            .
        }
        .
        .
    </style>
</head>

Foglio di stile inline

Per ogni elemento html, direttamente quando l'elemento è definito, possono essere specificate delle regole di stile. In questo caso lo stile si dice inline perché è inserito sulla stessa linea dell'elemento a cui si riferisce. In questo caso si utilizza l&apos,attributo style che ogni elemento html può definire:

<body>
    <h1 style="proprietà1:valore;proprietà2:valore;...">
    <p style="proprietà1:valore;proprietà2:valore;...">
</head>

dove i puntini stanno per “eccetera” e non vanno riportati nel codice.

In tutti e 3 i casi, si possono specificare quante proprietà si vogliono nello stile di un elemento. Alcune proprietà possono richiedere più valori, ad esempio le famiglie di font, per cui si possono inserire i diversi valori separati da una virgola. Le proprietà terminano sempre con “;”.

I tre modi descritti possono essere impiegati contemporaneamente all'interno di una stessa pagina html. Ma quindi che differenza c'è?

I fogli di stile esterni sono più adatti per definire uno stile comune a tutte le pagine di un sito. Infatti, uno stesso foglio di stile può essere incluso tramite tag <link> in più pagine html. Questo evita la riscrittura di regole uguali in pagine diverse tramite fogli inline o embedded che potrebbe diventare causa di errore o comunque dimenticanza dell'aggiornamento di una di queste regole all'interno di un sito.
I fogli di stile embedded si prestano meglio alla personalizzazione di elementi html che compaiono in più punti della pagina, ad esempio tutti o alcuni h1 o p oppure img. Inoltre è utile se si vuole definire uno stile diverso per quella singola pagina rispetto alle altre pagine che compongono il sito.
I fogli di stile inline, infine, sono utilizzati per modificare lo stile del singolo elemento html. Se bisogna definire la stessa proprietà con lo stesso valore per due o più elementi html è meglio passare ai fogli embedded o esterni a seconda delle esigenze.

Il nome “CSS” non è casuale: la traduzione in italiano recita “Fogli di stile a cascata” per il modo particolare in cui essi sono applicati ad una pagina web. Infatti, prima di tutto sulla pagina è applicato il foglio esterno, in seguito quello embedded e per ultimo l'inline. In pratica, se per lo stesso elemento html, ad esempio un paragrafo, si definisce la stessa proprietà con il CSS inline, embedded ed esterno, ma con valori diversi, quella nel CSS inline avrà la precedenza su quella nell'embedded e nell'esterno e la proprietà contenuta in quello embedded avrà la precedenza su quella nell'esterno. Ad esempio, se si colorano i paragrafi di rosso nel foglio esterno, di blu nel foglio embedded e di verde nel foglio inline, i paragrafi saranno mostrati in verde perchè l'inline ha la precedenza su tutto. Se invece sono solo colorati di rosso nel foglio esterno e di blu in quello interno (senza inline), i paragrafi saranno mostrati in blu.