CSS

Selettore universale

* {
    background-color: tomato;
}

/* seleziono tutti gli elementi all'interno del tag article */
article * {
    background-color: tomato;
}

Nota:
l selettore universale seleziona tutti gli elementi.

È possibile selezione tutti gli elementi all’interno di uno specifico tag.

Il codice CSS

CSS (Cascading Style Sheets) è stato creato nel 1996 da Håkon Wium Lie, un ricercatore all’epoca presso il CERN (Organizzazione Europea per la Ricerca Nucleare). Lie ha sviluppato CSS per consentire agli sviluppatori di separare la formattazione del contenuto dalla struttura del contenuto stesso, rendendo più facile la manutenzione e la modifica del design di un sito web.

CSS consente di definire regole di stile per i tag HTML, come il colore del testo, la dimensione del carattere, la disposizione degli elementi sulla pagina e molto altro. Ad esempio, si può utilizzare una regola CSS per impostare il colore di sfondo di tutte le intestazioni in una pagina web in rosso, oppure per allineare tutti i paragrafi al centro della pagina.

CSS consente anche di utilizzare selettori per selezionare specifici elementi HTML e di creare layout complessi utilizzando le proprietà di posizionamento e di layout come float, display, position, e grid.

La prima versione di CSS, chiamata CSS1, è stata rilasciata nel 1996 ed era in grado di gestire solo la formattazione di base del testo e la disposizione degli elementi sulla pagina. Nel corso degli anni, sono state rilasciate nuove versioni di CSS che hanno introdotto nuove funzionalità e proprietà, come CSS2, le cui specifiche son state pubblicate nel 1998 e raccomandato dal W3C nel 2011 e CSS3, le cui specifiche sono state pubblicate in momenti differenti, dette moduli, a partire dal 2011 per poi venire raccomandato dal W3C a novembre 2014.

In sintesi, HTML è il linguaggio per la struttura dei contenuti mentre CSS si occupa della formattazione e presentazione dei contenuti strutturati con HTML.

Selettore di tipo (o di elementi)

p {
  background-color: tomato;
}

Nota:
il selettore di tipo seleziona tutti i tag con il nome del tag specificato.

Selettore di classe

.content {
  background-color: tomato;
}

Nota:
il selettore di classe seleziona tutti gli elementi con una classe specifica assegnata.

La classe viene dichiarato utilizzando un punto (.) seguito del nome , mentre nell’elemento viene utilizzato l’attributo class per l’assegnazione.

Esempio:
<div class="content">...</div>

Nello stesso documento, può essere usato più di una volta.

Attenzione: i nomi delle classi devono iniziare con un carattere alfabetico e non con un numero e non devono contenere spazi vuoti o caratteri speciali. Il trattino (-) o l’underscore (_) possono essere utilizzati. Il nome è case sensitive.

Selettore di id

#content {
  background-color: tomato;
}

Nota:
Il selettore di id si utilizza per identificare in modo univoco un elemento all’interno della pagina.

Viene definito utilizzando il simbolo “#”, mentre nell’elemento viene utilizzato l’attributo id per l’assegnazione.

Esempio:
<div id="content">...</div>

Attenzione: nello stesso documento, può essere usato una sola volta. Inoltre, i nomi degli id devono iniziare con un carattere alfabetico e non con un numero e non devono contenere spazi vuoti o caratteri speciali. Il trattino (-) o l’underscore (_) possono essere utilizzati. Il nome è case sensitive.