Come scrivere un foglio di stile – Guida al CSS

In questa nuova guida del corso CSS, spiegheremo in maniera dettagliata come scrivere le regole dei fogli stile .css esterni ad un documento HTML, ci soffermeremo sulla impostazione e configurazione degli stessi, nonché dei possibili tag inseribili per un corretto utilizzo delle regole CSS.

Nel primo capitolo del corso CSS, abbiamo studiato che le regole di stile possono essere scritte in tre modalità diverse, riassumendo:

  • In-line: all’interno del tag HTML con l’attributo style=””;
  • Internal: Tutte le regole di stile sono contenute nel tag <style></style> e a sua volta contenuto nell’head della pagina HTML;
  • External: Tutte le regole CSS sono contenute in un documento .css esterno, separato da quello .html (consigliato);

È fondamentale capire questa differenziazione per una corretta gestione del codice, se non hai ancora compreso appieno questo concetto, ti consiglio di leggere il primo capitolo del corso qui.

Da adesso e per tutto il corso il corso, le regole CSS saranno scritte come se fossero incluse in un documento esterno (external) per semplificare l’apprendimento e la riscrittura.

Fogli di stile esterni

Creare e richiamare un documento .css

I primi step, che abbiamo già visto nei precedenti articoli sono:

Per proseguire, assicurati di aver seguito correttamente questi passaggi, altrimenti non avrai modo di visualizzare modifiche allo stile della tua pagina web.

Impostare il codice

Impostare il codice CSS o regole di stile all’interno di un file .css esterno è molto semplice e rapido, in poco tempo potrai creare lo stile dei tuoi elementi e migliorarlo sempre di più.

Se hai letto gli articoli precedenti, avrai già notato quanto sia facile gestire un foglio CSS e la scrittura dei suoi valori.

Non ti preoccupare se pensi di aver scritto male un attributo o un valore o di averli duplicati, il browser ignorerà gli errori o i duplicati restituendo il valore più adeguato.
Provvedi poi alla correzione.

Vediamo ora un esempio per un semplice paragrafo di testo:

p {
text-align:center;
font-size:18px;
line-height:22px;
}

Esaminiamo ora il codice:

  • la prima riga richiama il tag <p> dei paragrafi di testo, se cosi impostato ogni paragrafo presente nella pagina HTML verrà modificato con le regole descritte tra le parentesi graffe “{..}”;
  • Gli attributi sono inseriti nelle parentesi e sono rispettivamente: allineamento del testo al centro, la grandezza del font di 18 pixel e l’altezza della riga di testo di 22 pixel;

Escludendo ora gli attributi e il loro significato (che possono essere numerosi e difficili da ricordare), ogni elemento HTML può essere modificato seguendo questo schema.

Nel caso di elementi HTML comuni ci basterà indicare il loro tag personale:

p {}      /* paragrafo <p> */
div {}    /* <div> */
h1 {}     /* heading 1 */
h2 {}     /* heading 2 e via */
table {}  /* tabella <table> */
img {}    /* immagine <img> */
a {}      /* link <a>*/
body {}  /* <body> */

Come puoi notare, differentemente dai selettori (id e class), i tag html non richiedono un simbolo per essere richiamati in CSS.

#id {}
.class {}

Leggi la guida dedicata ai selettori qui.

Regole della pagina

le regole di stile per l’intero documento o pagina possono essere impostate tramite un semplice simbolo “*{ }” (asterisco). Ogni codice relativo a quel simbolo influirà su ogni elemento presente nella pagina HTML.

*{
color:black;
font-size:16pt;
}

Questo è utile per impostare uno stile unico per tutti gli elementi, come il colore del testo o la grandezza.

Stesse regole CSS per tag differenti

Con CSS si possono facilmente implementare regole identiche per elementi differenti senza dover riscrivere di nuovo tutti i codici.

Per la scrittura delle stesse regole di stile, elementi o tag differenti si procede in questo modo:

div, h1, #myId {
background-color: red;
font-size:30px;
}

Basta una semplice virgola tra i tag per integrare lo stesso stile. Questo è utile per risparmiare tempo e non appesantire il documento, oltre che a smaltire l’intero codice e mantenerlo più ordinato.

Gerarchia degli elementi

Altra tecnica utile da imparare e conoscere durante la scrittura delle regole CSS è quella della gerarchia degli elementi. Questo è un metodo mirato a impostare delle regole ad uno specifico sotto-elemento o elemento “figlio”.

Facciamo un esempio pratico:

#myId b {
  text-transform: uppercase;
}

Studiando il codice: il testo del tag <b> contenuto all’interno del selettore #myId avrà tutte le lettere maiuscole. Quindi gli altri tag <b> nella pagina non subiranno effetti.

Questa tecnica è utile appunto per impostare in modo mirato lo stile di un singolo elemento contenuto in un altro, impostando un vero e proprio percorso o path che la regola dovrà seguire.

Altro esempio per capire meglio:

div#myId button .myButton{
  background-color:green;
  width:100px;
  height:40px;
}

Il <button> con classe .myButton contenuto nel div #myId avrà lo sfondo color verde, una larghezza di 100 pixel e un’altezza di 40 pixel. Eventuali altri <button> nella pagina con classe .myButton, ma non contenuti nel div#myId, non ne sarebbero influenzati.

Potrebbe sembrare un po’ confuso, ma con della pratica reale e nella progettazione di pagine complesse, questa tecnica può rivelarsi davvero utile

Commenti

I commenti in CSS possono essere scritti in questo modo:

/* questo è un commento */

/* questo è 
un commento
su più righe */

La scrittura è semplice, si inizia con la combinazione dei simboli / e * (/*) e si chiude il commento con la combinazione contraria * e / (*/);

I commenti sono molto utili anche per annotare o annullare gli effetti di un gruppo di codici senza doverli necessariamente cancellare:

/*
p {
font-weight: bold;
color:gray;
}
*/

Questi concetti appena esaminati, sono i fondamentali per la scrittura dei codici in CSS, tienili a mente ed applicali ai tuoi prossimi progetti. Esercitati con il nostro editor Codewith.it per semplificare la procedura di creazione.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Torna al corso completo di HTML e CSS

Articoli Recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA