Esplorare i concetti relativi ai fogli di stile CSS

  • 4 minuti

Struttura dei fogli di stile CSS

Se si vuole che la pagina HTML visualizzi tutto il testo tra i tag h1 con il colore arancione, è possibile usare il codice CSS che segue.

h1 {
    color: orange;
}

Il codice CSS precedente inizia con (h1) che seleziona il codice HTML che si vuole usare come stile. Nell'esempio h1 viene chiamato un selettore.

Si noti che il codice all'interno delle parentesi graffe color: orange;dichiara quale stile deve essere applicato al tag h1 selezionato. Il codice CSS nelle parentesi graffe { }, ad esempio color: orange; viene chiamato dichiarazione.

La dichiarazione di esempio contiene una proprietà, color, che è separata da un valore, orange, con un segno di due punti (:) e la fine dell'impostazione è contrassegnata da un punto e virgola (;).

Nota

Non c'è bisogno di memorizzare tutte le proprietà e i valori disponibili nei CSS. Ci sono molti siti web a cui puoi fare riferimento. Inoltre, strumenti come vscode.dev o Visual Studio Code offrono opzioni di completamento automatico che possono aiutarti a creare un CSS.

Incorporare un file CSS

Un modo rapido per aggiungere informazioni sullo stile consiste nel posizionarle all'interno dei tag head della pagina HTML usando un attributo style. Questo metodo non è considerato la procedura consigliata, ma può essere tranquillamente usato per l'apprendimento e i test.

L'esempio che segue aggiunge il tag <style> con informazioni sullo stile per qualsiasi h1 da visualizzare in grigio. Poiché si tratta dell'unico stile, il resto dell'HTML viene visualizzato con lo stile predefinito del browser.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Quando viene visualizzato in un browser, il testo "Welcome" nel tag <h1> viene visualizzato in grigio.

Screenshot della pagina H T M L di cui è stato eseguito il rendering che visualizza l'intestazione 1 in grigio.

Applicare stili a HTML usando CSS

Per aggiungere stili a HTML (Hypertext Markup Language), è consigliabile usare un file CSS separato. Quando più file HTML utilizzano lo stesso CSS, hanno un aspetto coerente. Inoltre, l'aggiornamento di un file CSS è più semplice rispetto alla necessità di aggiornare ogni singolo file HTML.

Per fare riferimento al file CSS, si usa usare l'elemento link.

link ha due attributi, rel e href. rel si usa per identificare il tipo di risorsa a cui si fa riferimento, foglio di stile per i fogli di stile. href si usa per identificare il percorso del file CSS. Se il file CSS si trova nella stessa cartella del file HTML e ha il nome style.css, è possibile usare quanto segue per farvi riferimento dalla pagina:

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

Ora hai almeno due file, un .html file e un .css file. L'esempio precedente includerebbe un file HTML con un collegamento al file CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>