Esercizio - Applicare uno stile al codice HTML con CSS

  • 10 minuti

I fogli di stile CSS (Cascading Style Sheets) consentono di specificare l'aspetto della pagina. L'idea di base è definire quale stile applicare agli elementi che si usano all'interno delle pagine HTML. Mentre gli elementi HTML definiscono il contenuto, gli stili CSS definiscono l'aspetto del contenuto.

È possibile, ad esempio, applicare angoli arrotondati o assegnare uno sfondo con sfumatura a un elemento. In alternativa, è possibile usare gli stili CSS per specificare l'aspetto e la risposta dei collegamenti ipertestuali quando si interagisce con gli stessi. È anche possibile creare layout di pagina ed effetti di animazione sofisticati.

È possibile applicare stili a elementi specifici oppure a tutti gli elementi di un tipo specifico o usare le classi per applicare uno stile a molti elementi diversi.

In questo esercizio vengono applicati gli stili CSS agli elementi della pagina HTML e viene aggiunto codice CSS per definire i temi chiari e scuri. Si controllano anche i risultati negli strumenti di sviluppo del browser.

CSS esterno

Nell'unità precedente relativa al linguaggio HTML, si è creato un collegamento a un file CSS esterno da HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Uno dei vantaggi offerti dal CSS esterno è la possibilità di collegare più pagine HTML allo stesso file CSS. Se si apporta una modifica al file CSS, lo stile viene aggiornato per ogni pagina. L'uso di un file HTML per il contenuto della pagina, di un file CSS per l'applicazione dello stile e di file JavaScript per l'interazione è denominato separazione delle problematiche.

Come descritto in precedenza, è anche possibile scrivere codice CSS direttamente in HTML. Questo codice è detto CSS interno. Anche per un sito Web di base è presente un numero così elevato di regole CSS che la pagina HTML può diventare disordinata molto rapidamente. In presenza di più pagine lo stesso codice CSS verrebbe ripetuto spesso e sarebbe problematico da gestire.

Regole CSS

Le regole CSS consentono di applicare gli stili agli elementi HTML. Alle regole CSS è associato un selettore usato per esprimere a quali elementi devono essere applicati gli stili.

In Visual Studio Code aprire il file main.css e immettere quanto segue.

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Il frammento di codice precedente contiene due regole. Ogni regola include gli elementi seguenti:

  • Selettore. body e ul sono i selettori delle due regole che consentono di selezionare gli elementi cui applicare gli stili.
  • Parentesi graffa di apertura ({).
  • Elenco di dichiarazioni di stile che determinano l'aspetto degli elementi selezionati.
  • Parentesi graffa di chiusura (}).

Il selettore ul, ad esempio, consente di scegliere l'elemento HTML <ul> nella pagina per applicarvi gli stili. La dichiarazione è font-family: helvetica e determina quale deve essere lo stile. Il nome della proprietà è font-family e il valore è helvetica.

Come si vedrà successivamente, è possibile definire nomi personalizzati per gli elementi.

Selettori

I selettori di ID e di classe consentono di applicare gli stili ai nomi di attributi personalizzati nel codice HTML. Un ID permette di definire lo stile di un elemento, mentre le classi possono applicare uno stile a più elementi.

  1. Copiare il codice seguente e aggiungerlo al file CSS. Incollarlo dopo le parentesi graffe di chiusura per il selettore ul aggiunto in precedenza.

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    Il codice precedente contiene tre regole CSS, di cui le ultime due usano attributi personalizzati per selezionare gli elementi: .list e #msg.

    • .list è un selettore di classe. Ogni elemento HTML che contiene un attributo class impostato su list eredita gli stili definiti all'interno di tale selettore.

    • #msg è un selettore di ID. Ogni elemento HTML che contiene un attributo id impostato su msg eredita gli stili definiti all'interno di tale selettore.

    I nomi che si usano per i selettori possono essere arbitrari, purché corrispondano alle definizioni effettuate nel codice HTML.

  2. Salvare il lavoro premendo CTRL+S in Windows o CMD+S in macOS.

Visualizzare nel browser

  1. Per visualizzare un'anteprima usando Visual Studio Code, fare clic con il pulsante destro del mouse sul nome file index.html e quindi scegliere Apri nel browser predefinito.

    Importante

    Anche se si sta semplicemente modificando il file main.css, per visualizzare in anteprima le modifiche è necessario selezionare il file index.html.

    La pagina Web viene aperta nel browser predefinito.

    Screenshot of the website with the font styles applied.

Gli stili dei caratteri sono quelli previsti? È interessante notare come gli stili applicati all'elemento <body> vengano ereditati dall'elemento <h1>. Non abbiamo definito nulla per <h1>, ma il tipo di carattere è ancora quello definito in <body>. Questo meccanismo di ereditarietà dagli elementi padre ai discendenti è uno degli aspetti chiave degli stili CSS. Tuttavia, gli elementi <li> hanno un carattere diverso. Lo stile per gli elementi <li> esegue l'override dello stile impostato per <body> perché l'elemento <li> è un discendente dell'elemento <ul>, per cui è stato definito uno stile.

Quando si usa Apri nel browser predefinito in Visual Studio Code, viene aperta una nuova scheda nel browser ogni volta. Per evitare di aprire una nuova scheda, è possibile ricaricare la scheda che contiene già il sito Web.

Per ricaricare la scheda, premere F5, ovvero la scelta rapida da tastiera per l'aggiornamento, oppure CTRL + R in Windows o Linux e Command + R in Mac.

Aggiungere un tema chiaro

Successivamente, aggiungere il supporto per un tema a colori per il sito Web. Per iniziare, definire un tema di colore chiaro usando codici di colore esadecimale.

  1. Aggiungere il codice seguente alla fine del file CSS (main.css).

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    In questo esempio #000000 specifica il nero per il colore del carattere e #00FF00 specifica il verde per il colore di sfondo.

  2. Nel file HTML (index.html) aggiornare l'elemento <body> con il nome della classe light-theme. A questo punto, il selettore di classe per il tema chiaro applica correttamente gli stili.

    <body class="light-theme">

Visualizzare nel browser

  • Per visualizzare l'anteprima usando Visual Studio Code, fare clic con il pulsante destro del mouse su index.html e quindi scegliere Apri nel browser predefinito o ricaricare la scheda precedente premendo F5.

    Si noti che viene visualizzato il tema chiaro con sfondo verde.

    Screenshot of the website with its light theme applied.

Visualizzare il codice CSS applicato

  1. Nella visualizzazione browser aprire Strumenti di sviluppo.

    Fare clic con il pulsante destro del mouse sulla pagina e selezionare Ispezione o selezionare la scelta rapida da tastiera F12 o CTRL + MAIUSC + I.

  2. Selezionare la scheda Elementi e, nella scheda Elementi, selezionare la scheda Stili (deve essere già selezionata per impostazione predefinita).

  3. Passare il puntatore del mouse sui vari elementi HTML, selezionarne alcuni e notare che gli strumenti di sviluppo indicano gli stili applicati nella scheda Stili.

  4. Selezionare l'elemento <body>. Si noti l'applicazione di light-theme.

  5. Selezionare l'elemento <ul> dell'elenco non ordinato. Si noti lo stile personalizzato font-family: helvetica;, che sostituisce lo stile per l'elemento <body>.

Screenshot of the website with its light theme applied and the Developer Tools next to it showing the Elements panel with the HTML and CSS code.

Per altre informazioni sulla visualizzazione degli stili CSS in Strumenti di sviluppo, vedere l'articolo Introduzione alla visualizzazione e alla modifica di CSS.

Aggiungere un tema scuro

Per il tema scuro, si configura l'infrastruttura in preparazione per l'unità successiva, in cui verrà abilitato il cambio di tema nella pagina Web.

Per aggiungere il supporto per un tema scuro al file CSS, seguire questa procedura.

  1. Nel file CSS (main.css) aggiungere alcune costanti alla radice della pagina all'inizio del file.

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

    Il selettore :root rappresenta l'elemento <html> nella pagina HTML. Per questo tipo di attività, la procedura consigliata consiste nel definire un set di variabili CSS globali in una regola CSS con il selettore :root. In questo esempio sono state definite tre variabili per il colore. È ora possibile usare queste variabili in altre regole CSS.

  2. Nella parte finale del file CSS sostituire la regola light-theme con il codice seguente per aggiornarlo e per aggiungere il selettore dark-theme.

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

    Nel codice precedente sono state definite due nuove variabili, bg e fontColor, che specificano un colore di sfondo e quello del carattere. Tali variabili usano la parola chiave var per impostare i valori delle relative proprietà sulle variabili precedentemente specificate nel selettore :root.

  3. Successivamente, nel file CSS, sostituire il selettore body con il codice seguente.

    body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

    In questo esempio si usa il selettore body per impostare le proprietà background e color. Poiché gli elementi visibili nella pagina Web sono tutti all'interno dell'elemento <body>, erediteranno i colori impostati su <body>.

  4. Nel file CSS rimuovere le regole con i selettori #msg e ul in modo che ereditino anche lo stesso tipo di carattere da <body>.

  5. Ricordarsi di salvare il file selezionando CONTROL+S o COMMAND+S.

    Il file CSS (main.css) dovrebbe essere simile a quello nell'esempio seguente:

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

  6. Per visualizzare il tema scuro, aprire il file index.html e modificare manualmente il tema predefinito nell'attributo di classe <body> in tema scuro (dark-theme). Salvare il file e quindi ricaricare la pagina nel browser.

    Screenshot of the website with its dark theme applied and the Developer Tools next to it.

  7. Modificare l'attributo di classe <body> per tornare al tema chiaro predefinito.

Nell'unità successiva si userà JavaScript per fornire interattività e supportare il passaggio tra i temi.