Guida creare con i CSS

Perchè utilizzare i CSS

Sviluppando le pagine HTML, ci si sarà pienamente resi conto dei limiti di questo linguaggio sul lato della pura presentazione. Quasi tutto quello che con HTML non è possibile realizzare, riusciremo a farlo con i fogli di stile.

Finalmente, ad esempio, potremo dare al testo delle nostre pagine un aspetto da word-processor: non solo con il colore o i font che si preferisce, ma con un sistema di interlinea pratico e funzionale, con le decorazioni desiderate, riuscendo a spaziare lettere e parole, impostando stili diversi per titoli e paragrafi, sfruttando i benefici dell’indentatura o della giustificazione.
Si potranno distanziare gli elementi che compongono la pagina, incastrarli e sovrapporli tra loro. Giocare con i colori, le sfumature e i bordi ed utilizzare immagini come sfondi.

Un altro vantaggio non di poco conto nell’uso dei fogli di stile è la separazione che esiste tra questi e le pagine html. In altre parole qualora si desideri cambiare un’immagine di sfondo da centinaia di pagine html, sarà necessario modificare esclusivamente poche righe del file CSS legato alle pagine. Il vantaggio inoltre è quello di avere pagine più leggere, facilmente modificabili e mantenibili.

Usare un CSS esterno

Realizziamo un file di stile esterno. Salviamo quindi la nostra regola in un file di testo con estensione .css, che chiameremo ad esempio stile.css.

Il passo successivo sarà quello di associare ad una pagina html il foglio di stile:

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

Vediamo quindi con un esempio il codice da inserire nella pagina html per collegare il file CSS:

<html>
<head>
    <title>STILE CSS</title>
    <link href="stile.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <h1>I Promessi Sposi</h1>
    <p align='justify'>
        Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti...
    </p>
</body>
</html>

Usare un CSS interno

Il file CSS viene inserito internamente all'interno della dell’head delle pagine html. La sintassi sarà la seguente:

<head>
    <style type=‘text/css’>
    .....css interno.....
    </style>
</head>

Vediamo quindi il codice completo della pagina html con il file CSS incorporato:

<html>
<head>
    <style type=‘text/css’>
        h1 {
        color : red;
        background-color : black;
    }.
    </style>
</head>
<body>
    <h1>I Promessi Sposi</h1>
    <p align='justify'>
        Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti...
    </p>
</body>
</html>

Stile in linea (CSS per singolo elemento)

Uno stile in linea può essere usato per applicare uno stile unico per un singolo elemento.

Per usare gli stili in linea, aggiungiere l'attributo style all'elemento pertinente. L'attributo style può contenere qualsiasi proprietà CSS.

La sintassi è la seguente:

<selettore style="testo CSS">testo selettore</selettore>

L'esempio seguente mostra come cambiare il colore e il margine sinistro di un elemento <h1>:

<h1 style="color:blue;margin-left:30px;">Testo H1</h1>