------ CSS ------

Come in altre occasioni, anche il piú semplice file di testo, se salvato con estensione .css diventa un foglio di stile.
Esistono due modi per inserire gli stili in un file HTML, uno é creare un file .css e poi collegarlo nella <head> (</head>) e lui si comporterá come se fosse del codice scritto nella pagina HTML, oppure metterlo, dopo <head> ma prima di </head> nei marcatori appositi:

    <html>
        <head>
            <style>
                body {
                    background-color: lightblue;
                }
            </style>
        </head>
        
        <body>
            
        </body>
    </html>

cosí.
Ci sono diverse diciture e numeri per i colori, per una tabella esaustiva consulta qui
Questa é una pratica che io sconsiglio, primo perché bisogna scorrere il documento fino in cima se qualcosa non va, poi perché bisogna riscriverli per ogni file, c'é il copia e incolla, dirai, ma se il file é di 500 o piú righe trovare il tratto da copiare diventa difficile.
In ogni caso i selettori CSS possono essere ricapitolati in 5 tipologie

Semplici selettori

Selettori combinati

Pseudo-classi (selettori)

Pseudo-elementi (selettori)

Selettore degli attributi

Semplice selettore, propagare lo stile a tutti i marcatori con quel nome.
Esempio:

    p {
        text-align: center;
        color: red;
    }

Con questa istruzione dico di metter al centro e colorare di rosso, quanto contenuto da tutti i marcatori
Le classi sono semplici, basta anteporre un punto prima del nome della classe (esplicativo mi raccomando) e poi dare al marcatore HTML quella classe.
Esempio:


    .centro {
    text-align: center;
    color: red;
    }

Ecco:
I selettori combinati puntano a uno o piú marcatori in base a specifiche istruzioni.
Esempio:

    div p {
        background-color: yellow;
    }

Questa istruzione punta al paragrafo figlio diretto (child) in un div

    div > p {
        background-color: yellow;
    }

Questa istruzione punta al primo paragrafo (p) che segue un div

    div + p {
        background-color: yellow;
    }

Questa istruzione punta a tutti i paragrafi (p) che seguono un div come fratello (sibling)

    div ~ p {
        background-color: yellow;
    }

La sintassi degli pseudo-elementi é la seguente, praticamente si antepone il marcatore con i due punti e poi lo pseudo-elemento.:

    classe:pseudo-elemento {
        proprietá: valore;
    }

Esempio:

    /* link non visitato */
    a:link {
        color: #FF0000;
    }
    
    /* link  visitati */
    a:visited {
        color: #00FF00;
    }
    
    /* il mouse sopra */
    a:hover {
        color: #FF00FF;
    }
    
    /* link selezionato*/
    a:active {
        color: #0000FF;
    }

il primo figlio:

    p i:first-child {
        color: blue;
    }

Le ultime puntano ad un marcatore con un preciso attributo.
Esempio:

    a[target="_blank"] {
        background-color: yellow;
    }

Per ultimo ho lasciato i costrutti ::after e ::before (pseudo-classi). Usati poco, per molti sconosciuti, hanno una potenza incredibile: qualsiasi browser interpreta i vari marcatori come HTML anche se sono parte di un testo. Con questo selettore si può trasformare un elemento vuoto in qualcosa di interessante, senza dilungarmi con un esempio sarò piú chiaro:

    .classe::after {
        content: "quello che vuoi";
    }

        .classe::before {
        content: "quello che vuoi";
    }

*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

Naturalmente ci sono i vari -moz -ms -chrome -webkit e tanti altri da prendere in considerazione, perché grazie alla guerra fra i browsers ognuno interpreta le cose a modo suo.
Praticamente il CSS, anche se molto utile, abbellisce la grafica dello scarno HTML, il quale é un liguaggio interpretato: il CSS é un valido aiutante dell'HTML, sicuramente da capire e da saper usare bene (non come me), ma anch'esso un metalinguaggio.
Anche in questo caso per chi volesse approfondire, esiste il sito ufficiale della W3schools