05. Generalità su CSS

Cascading Style Sheets, noti come CSS, sono una parte fondamentale dello sviluppo moderno delle pagine web. CSS è un linguaggio di stile utilizzato per controllare l'aspetto e la formattazione degli elementi all'interno di una pagina web scritta in HTML.

Mentre l'HTML è responsabile della struttura e della semantica di una pagina web, il CSS è ciò che definisce come tali elementi dovrebbero apparire. Con CSS è possibile definire attributi come colori, dimensioni del testo, margini, sfondi e molto altro ancora consentendo di personalizzare l'aspetto di una pagina in modo flessibile e coerente.

CSS opera su regole di stile, ognuna delle quali definisce come un elemento HTML di uno specifico tipo dovrebbe essere visualizzato. Queste regole includono selettori che identificano gli elementi HTML a cui si applicano e dichiarazioni che specificano gli stili desiderati.

Un buon controllo su CSS è essenziale per creare pagine web attraenti, di facile comprensione e professionali. 

Questa pagina HTML fa uso di alcune semplici regole di stile CSS.


<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <title>Pagina con CSS</title>

    <style>

        /* Regole di stile CSS per la formattazione degli elementi HTML nella pagina */

        body {

            font-family: Arial, sans-serif;

            background-color: #ffe4b5;

        }


        h1 {

            color: #FF0000;

            text-align: center;

        }


        p {

            font-size: 16px;

            color: #800080;

            line-height: 1.5;

            margin: 20px;

        }

    </style>

</head>

<body>

    <h1>Pagina dimostrativa con CSS</h1>

    <p>

         Questo è un paragrafo di testo.<br>Utilizzando il CSS, possiamo personalizzare il 

         colore del titolo, la famiglia di caratteri del testo, lo sfondo del corpo della 

         pagina e molto altro ancora.

    </p>

</body>

</html>

Notare che in questo esempio sono definite tre regole di stile CSS, inserite nella sezione delimitata da <style> e </style>.

Esse fanno riferimento a:

Queste regole di stile CSS influenzano l'aspetto della pagina HTML, consentendo di personalizzare la tipografia, i colori e la spaziatura degli elementi. In questo modo il CSS migliora notevolmente l'aspetto visivo della pagina web.

Modalità di utilizzo

Gli stili CSS possono essere applicati ad un documento HTML in tre differenti modalità:

Colori del testo

In HTML è possibile specificare il colore del testo tramite l'attributo style del paragrafo o di titolo.

E' possibile specificare 

Il colore può essere specificato con un nome standardizzato o con un codice esadecimale preceduto da #.

La seguente tabella matte in relazione alcuni colori con il nome standardizzato e il codice esadecimale. Un elenco più esteso di colori può essere trovato a questo link.

Per completezza occorre precisare che sono possibili anche altre codifiche dei colori che però in queste pagine non sono considerate.

Pagina di esempio:

Applichiamo in una pagina HTML l'attributo style per mostrarne l'uso.



<!DOCTYPE html>

<html lang="it"> 


    <head>

        <meta charset="UTF-8">

        <title>Colori</title> 

    </head> 


    <body> 

        <h1 style="color:Red;">Titolo principale rosso</h1>

        <p style="color:Green;">Paragrafo di colore verde</p>

        <p style="color:#FF00FF;">Paragrafo di colore fucsia (tramite codice)</p>


        <h1 style="background-color:Yellow; color:Red;">Titolo principale rosso con background giallo</h1>


        <h1 style="background-color:Yellow; color:Red; border: 2px solid Purple;">Titolo principale rosso con background giallo in un riquadro porpora di 2 pixel</h1>


    </body>

</html>