Questo paragrafo utilizza lo stile predefinito per i paragrafi di questa pagina, ossia il font predefinito, il testo giustificato e l'interlinea di 1.8
L'interlinea e il giustificato dovrebbero essere ben visibili nel testo seguente. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus a risus eget tincidunt. Curabitur viverra, ipsum vitae posuere luctus, metus ex congue metus, in ultricies metus nibh quis nisi. Nunc rhoncus orci et arcu dignissim consectetur. Proin pulvinar eu felis a fermentum. Aliquam pretium tristique orci in fringilla. Mauris eget erat vel ipsum ornare blandit. Nulla vestibulum, sem vel molestie consequat, risus eros vehicula diam, vitae tempus leo est sed urna. Quisque ac odio sed nunc tristique mollis. Quisque in aliquet elit. In pulvinar est nec ultrices pretium. Sed id ante in orci sollicitudin feugiat sed sit amet nisl. Vestibulum mi nunc, condimentum sed leo vel, vulputate tempor quam. Nunc id tempor magna. Mauris non posuere urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Questo paragrafo utilizza la classe stile1, che aggiunge allo stile predefinito dei paragrafi il colore blu scuro (color:darkblue), il corsivo (font-style:italic) e un font più piccolo (font-size:0.85rem, ossia l'85% della dimensione del font predefinito).
Questo paragrafo utilizza la classe centrato.
Questo paragrafo utilizza la classe destra.
Questo paragrafo utilizza la classe sinistra.
Questo paragrafo combina le classi stile1 e centrato, gli stili vengono "fusi" automaticamente.
Questo paragrafo utilizza la classe stile2, che aggiunge allo stile predefinito il grassetto (font-weight:bold), il sottolineato (text-decoration:underline) e il corsivo (font-style:italic), il colore rosso cremesi (color:crimson) e utilizza un font diverso (font-family:sans-serif).
Ovviamente, CSS può essere usato assieme ai tradizionali tag di formattazione.
Possiamo personalizzare lo stile dei link manipolando il tag a: Vuoi?
Ovviamente le classi si possono usare anche sui link, questo ad esempio utilizza la classe musicale: Mooseca
Per questa classe di link ho anche inserito una seconda regola che gli fa cambiare colore quando ci metti il mouse sopra utilizzando a.musicale:hover
Possiamo impostare uno stile per gli elenchi puntati manipolando i tag ul e li. In questo caso abbiamo scritto due regole: la prima imposta il font sans-serif a tutti gli elenchi puntati, la seconda invece fa si che gli elenchi puntati che si trovano all'interno di un altro elenco puntato usino un font più piccolo e in corsivo.
Il bello di usare le classi è che posso avere tanti elementi con la stessa classe, è utile per definire degli stili che utilizzo su tanti elementi.
Quest'ultimo paragrafo ha id="conclusione", posso usare gli id per "dare un nome" a un elemento specifico, a cui posso fare riferimento facilmente da CSS. In questo caso come selettore posso usare #conclusione
Come ultima cosa, alla fine di style.css cambiamo anche lo stile per i titoli. Tutti i titoli devono essere centrati, i titoli h1 devono anche essere rossi, sottolineati, grandi, senza grassetto e in corsivo.