Impara a stilizzare HTML usando i CSS

I fogli di stile a cascata - o CSS - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' HTML. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.
Percorso di apprendimento
Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione Cominciare con l'HTML.
Con tale modulo potrai imparare:
  • CSS, iniziando con il modulo Introduzione ai CSS
  • Una semantica HTML più avanzata
  • Javascript, e come usarlo per aggiungere funzionalità dinamiche alle pagine web

Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.

Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in Installazione di software fondamentali, e sapere come creare e gestire file, come esposto in Gestire i file — entrambi fanno parte della nostra guida completa per principianti Primi passi con il web.

Ti raccomandiamo di completare con Primi passi con il web prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra Introduzione ai CSS, anche se in dettaglio molto maggiore.

Moduli

Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.

Introduzione al CSS
Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.
Styling text
Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.
Styling boxes
Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.
CSS layout
A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.

Solving common CSS problems

Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.

See also

CSS su MDN
Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.