MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS basics

CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?

Quindi, cosa sono i CSS in concreto?

Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:

p {
  color: red;
}

Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.

Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete Dealing with files (Gestire i files) e HTML basics (Nozioni di base di HTML) per scoprire cosa è stato fatto fin qui.

  1. Apriamo il file index.html e incolliamo la seguente riga nella sezione <head>, cioè tra i tag <head> e </head>.
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.

Anatomia di un set di regole CSS

Diamo un'occhiata più approfondita al CSS precedente.

Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:

Selettore
Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.
Dichiarazione
Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.
Proprietà
Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.
Valore della proprietà
A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).

Notate le altre parti importanti della sintassi:

  • A parte il selettore, ogni gruppo di regole deve essere chiuso tra parentesi graffe ({}).
  • All'interno di ogni dichiarazione, è necessario utilizzare i due punti (:) per separare proprietà e valore.
  • All'interno di ogni set di regole, è necessario utilizzare un punto e virgola (;) per separare una dichiarazione da quella successiva.

Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Selezionare più elementi

È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:

p,li,h1 {
  color: red;
}

Differenti tipi di selettori

Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:

Nome del selettore Cosa seleziona Esempio
Element selector (a volte chiamato tag o type selector) Tutti gli elementi HTML del tipo specificato p
seleziona gli elementi <p>
ID selector L'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID). #my-id
Seleziona <p id="my-id"> or <a id="my-id">
Class selector Gli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte). .my-class
Selects <p class="my-class"> and <a class="my-class">
Attribute selector Gli elementi della pagina con l'attributo specificato img[src]
Seleziona <img src="myimage.png"> ma non <img>
Pseudo class selector Gli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse. a:hover
Seleziona <a>, ma solo quando il puntatore del mouse si trova sopra il link.

Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra Selectors guide (guida ai selettori).

Caratteri e testo

Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.

  1. Prima di tutto, andiamo a riprendere i Google Font che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag <link ...> da qualche parte nella <head> del documento index.html (ancora una volta, in qualsiasi punto tra i tag <head> e </head>. Sarà qualcosa di simile a questo:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.
  3. Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché <html> è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family):
    html {
      font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels  */
      font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts
    }

    Nota: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un commento CSS che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.

  4. Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML  (<h1>, <li>, e <p>). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:

Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata.

Box, box, tutta una questione di box

Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.

Immagine di una grande pila di casse impilate una sopra l'altra

Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:

  • padding (imbottitura), lo spazio intorno al contenuto (ad esempio intorno al testo di un paragrafo)
  • border (bordo), la linea continua che si trova intorno all'imbottitura (padding)
  • margin (margine), lo spazio intorno al bordo, la parte esterna dell'elemento

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In questa sezione usiamo anche:

  • width (larghezza di un elemento)
  • background-color, il colore di sfondo dell'elemento
  • color, il colore del contenuto dell'elemento (abitualmente testo)
  • text-shadow: imposta un ombra per il testo contenuto nell'elemento
  • display: imposta la modalità di visualizzazione dell'elemento (per ora no ti preoccupare di cosa voglia dire)

Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.

Cambiare il colore della pagina

html {
  background-color: #00539F;
}

Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito. (planning your site).

Formattazione del <body>

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Qui ci sono diverse dichiarazioni; vediamole una per una:

  • width: 600px; — imposta una larghezza fissa di 600 px
  • margin: 0 auto; — Quando si impostano 2 valori per le proprietà margin o padding, il primo valore sarà riferito ai lati top e bottom (in questo caso li rende uguali a 0), il secondo valore ai lati left e right (in questo caso imposta il valore auto che è uno speciale valore che divide lo spazio disponibile orizzontalmente tra i due lati). Si possono anche usare 1, 3 o 4 valori come documentato qui.
  • background-color: #FF9500; — come già visto, imposta il colore di sfondo dell'elemento. Ho usato un reddish orange per l'elemento <body> per contrastare il dark blue dell'elemento <html>. Vai avanti a sperimentare. Sentiti libero di usare il white o qualunque altro colore ti piaccia.
  • padding: 0 20px 20px 20px; — abbiamo 4 valori di padding, per creare un po' di spazio attorno al cotenuto. Questa volta il padding è 0 per il lato top del <body>  e 20 pixels per left, bottom e right. I valori si riferiscono, nell'ordine, ai lati top, right, bottom, left (senso orario).
  • border: 5px solid black; — qui si imposta un bordo di 5 pixel di spessore, solid, nero (black) su tutti i lati dell'elemento <body>.

Posizionare e formattare il titolo principale della pagina

h1 {
  margin: 0;
  padding: 20px 0;  
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento <h1> (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comoprtamento del browser impostando  margin: 0;.

Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento <html>.

Una proprietà piuttosto interessante che abbiamo usato é text-shadow, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:

  • Il primo valore in pixels imposta l' horizontal offset (spostamento orizzontale) dell'ombra dal testo — di quanto si sposta; un valore negativo la sopsta a sinistra
  • Il secondo valore in pixels imposta il vertical offset (spostamento verticale) — di quanto si sposta in giù; un valore negativo la sposta verso l'alto
  • Il terzo valore in pixels imposta il blur radius (raggio di sfumatura) dell'ombra — un valore più grande determina un'ombra maggiormente offuscata.
  • Il quarto valore imposta il colore base dell'ombra.

Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.

Centrare l'immagine

img {
  display: block;
  margin: 0 auto;
}

Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (margin: 0 auto) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è block level, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi inline, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "display: block;".

Nota: non preoccuparti se per ora non capisci la regola display: block; e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scobrire di più sui possibili valori display nella nostra pagina di riferimento (display reference page).

Conclusioni

Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare la nostra versione qui):

Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale.

Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (finished example code on Github).

Qui abbiamo solo scalfitto la superfice dei CSS. Per scoprire di più vai a vedere CSS Learning topic.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: howilearn
 Ultima modifica di: howilearn,