Introduzione al CSS

Salve,

Nel capitolo precedente abbiamo imparato cos'è CSS e perché dovremmo utilizzarlo. Ora vorrei presentarvelo rapidamente con un esempio semplice.

Definiamo una semplice pagina HTML.

Ora vogliamo cambiare in rosso il colore del titolo Hello CSS. A questo scopo utilizzeremo l'attributo style , che può essere aggiunto a quasi tutti i tag HTML. 

Con questo attributo, possiamo definire uno stile inline per ogni elemento.

Quando guarderemo l'anteprima, vedremo che il colore del titolo diventerà rosso.

color: red;

Abbiamo impostato il colore del carattere dell'elemento tramite una definizione di stile.

Ricorderete che abbiamo detto di utilizzare gli attributi in HTML per assegnare comportamenti e caratteristiche ai tag. 

Uno degli attributi più importanti a questo scopo è style: lo utilizziamo per definire uno stile per i tag.

Ora aggiungiamo un nuovo stile. Possiamo aumentare la dimensione del testo con font-size.

Quando definiamo più stili, dobbiamo separarli con i punti e virgola.

Nell'esempio seguente, gli stili color e font-size sono separati da punti e virgola.

La sintassi è importante quando si aggiunge uno stile.

styleName: styleValue;

Ricordiamo ancora una volta che dobbiamo assegnare lo stile come mostrato sopra.

Ora ampliamo un po' il nostro esempio.

In questo esempio, vogliamo cambiare in rosso il colore di tutto il testo. Possiamo definire lo stile per ogni tag nel modo seguente.

Ma in questo modo non è molto elegante, vero?

Ora abbiamo 3 elementi nella pagina e abbiamo cambiato in rosso il colore del testo di ciascuno. Tuttavia, se questo numero arrivasse a 3000, non avrebbe molto senso definire uno stile per ognuno.

Invece di definire ogni elemento inline, dobbiamo utilizzare i selettori CSS.

Ora impariamo il concetto di selettore.

I selettori CSS hanno il compito di selezionare l'elemento HTML pertinente contenuto nel documento, per applicarvi uno stile. 

Come suggerisce il nome, quindi, scelgono gli elementi HTML. 😂

I selettori CSS devono essere definiti tra i tag <style> nel documento HTML oppure in un file CSS esterno.

Nei nostri esempi utilizzeremo ciò che normalmente si trova tra i tag style. Tuttavia, è più corretto definire lo stile in un file CSS esterno.

L'operatore punto e il nome della classe vengono utilizzati per definire una classe tra i tag style. Le definizioni degli stili vengono invece inserite tra le parentesi graffe.

.class-name {

font-size:22px;

color:red;

}

Nell'esempio seguente, abbiamo definito una classe denominata my-component tra i tag style e assegnato lo stile font-size alla classe corrispondente.

Definiamo ora due elementi paragrafo che hanno la classe my-component.

Dopo questa definizione, poiché entrambi i paragrafi hanno lo stesso nome di classe, verranno selezionati dal selettore CSS e le loro dimensioni del carattere verranno aggiornate a 22px.

Possiamo assegnare più di uno stile a un selettore. 

Nell'esempio seguente, nello stesso selettore sono definiti gli stili font-size e color.

Analizziamo il codice HTML qui sotto.

È stato definito un elemento paragrafo e a questo elemento è stato aggiunto un elemento span contenente il testo 'Hello CSS Selectors' .

In questo caso, possiamo dire che l'elemento paragrafo è il genitore dello span.

D'altra parte, lo span sarà anche il figlio dell'elemento p.

Proprio come gli esseri viventi, utilizzeremo gli elementi HTML in relazioni genitore-figlio in base alla loro posizione nel blocco di codice.

Ampliamo un po' il nostro esempio e analizziamo nuovamente la gerarchia tra gli elementi.

• Secondo l'esempio seguente
• Gli elementi <span> e <a> sono fratelli tra loro.
• Gli elementi <span> e <a> sono discendenti dell'elemento div.
• <span> e <a> sono figli dell'elemento <p>.
• L'elemento <p> è figlio dell'elemento <div>.

Osserviamo più da vicino l'immagine qui sopra.

Il seguente esempio di codice HTML è stato convertito in un modello ad albero.

Notate che il modello ad albero è in realtà un riflesso della gerarchia genitore-figlio.

Quando utilizziamo questa relazione gerarchica?

Prima facciamo un esempio e poniamo un problema. Poi vediamo come possiamo trovare soluzioni utilizzando questa gerarchia.

Osserviamo l'esempio di codice qui sotto.

Supponiamo di voler colorare tutto il testo di rosso. Finora abbiamo imparato due modalità diverse.

• La prima, e peggiore, consiste nel definire inline l'attributo style (style = "color: red") per ogni elemento.
• La seconda consiste nel definire una classe chiamata red-txt e assegnarla a ogni elemento come attributo (class = "red-txt").

Ma esiste un modo più semplice per farlo. 🥳

Osserviamo nuovamente il codice precedente.

Se prestiamo attenzione all'elemento div con una classe denominata root, notiamo che è in realtà l'antenato di tutti gli elementi del nostro esempio.

Negli esseri umani, i tratti genetici vengono trasmessi dagli antenati ai discendenti. In CSS, anche lo stile assegnato a un antenato si riflette sui suoi discendenti.

In questo caso, quando definiamo uno stile che seleziona l'elemento div interessato, possiamo aspettarci che tutti i suoi discendenti siano influenzati da questa assegnazione.

Facciamolo.

Definiamo una classe denominata root con l'aiuto di un operatore punto e inseriamo al suo interno una definizione di stile (con color: red).

Verranno selezionati tutti gli elementi che hanno la classe root e il colore del testo diventerà rosso sia per questi elementi sia per i loro discendenti.

Quando osserviamo la sezione Anteprima, vediamo che i colori di tutti i testi diventano rossi.

In CSS possiamo esprimere questo concetto con il termine ereditarietà. Abbiamo imparato a scrivere codice più breve utilizzando questa funzionalità. 

Come nell'esempio precedente, invece di definire la stessa proprietà per ogni elemento, uno alla volta, abbiamo definito questa proprietà sull'elemento antenato e abbiamo evitato la ripetizione del codice.

Negli esempi precedenti, abbiamo aggiunto l'elemento style subito accanto all'elemento HTML che avevamo scritto.

Tuttavia, l'area corretta in cui inserire il tag style è tra i tag head.

L'utilizzo sarà quindi più corretto nel modo seguente.

Quando scriviamo codice, dobbiamo farlo nel modo più breve possibile e riutilizzabile.

Congratulazioni 🎉

In questa sezione abbiamo imparato i concetti di selettore ed ereditarietà.

Nella sezione successiva impareremo i tipi di definizione degli stili in CSS.