Le classi
Nell’esempio di prima abbiamo quattro paragrafi e tutti utilizzano il colore rosso. Questo succede perchè abbiamo definito le proprietà per body e p come selettori. Possiamo però utilizzare uno strumento di css che sono le classi. Con esse noi possiamo creare regole da applicare solo a parti della pagina pur mantenendo le regole create in precedenza. Quindi nel nostro esempio manteniamo le due regole per i colori di body e di p ma creiamo una classe per applicare il colore blue ai soli paragrafi. Ecco il codice modificato
1 body{
2
3
4
5 color:yellow;
6
7
8 }
9
10
11 p{
12
13
14
15 color:red;
16
17
18
19 }
20
21
22 .blu{
23
24
25 color:blue;
26
27
28
29 }
Abbiamo creato una classe nominata blu preceduta da un punto. Per creare una classe la sintassi è .nomeclasse. Poi abbiamo specificato un colore blue. Ora questa classe non è applicabile solo ai paragrafi ma anche al testo normale basta richiamarla nella pagina come segue
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <link rel="stylesheet" href="stile.css" type="text/css">
8
9
10
11 </head>
12 <body>
13
14
15 Testo con colore giallo
16
17 <p>Paragrafo rosso</p>
18
19 <p class="blu">Testo con colore blu</p>
20
21
22
23 </body>
24 </html>
Come vedete al terzo paragrafo abbiamo applicato la classe usando l’attributo class con il simbolo = e tra apici il nome. Ora se ricaricate la pagina nel browser dovreste avere del testo giallo, poi un paragrafo rosso e uno solo blu, proprio quello su cui abbiamo applicato la classe. Sempre mantenendo questo esempio possiamo creare un’altra classe di nome paragrafo che possa applicare del testo di colore arancione. Provate a modificare il codice così
1 body{
2
3
4
5 color:yellow;
6
7
8 }
9
10
11 p{
12
13
14
15 color:red;
16
17
18
19 }
20
21
22 .blu{
23
24
25 color:blue;
26
27
28
29 }
30
31 #paragrafo{
32
33
34 color:orange;
35
36
37 }
Abbiamo creato una classe di nome paragrafo usando la seguente sintassi alternativa #nomeclasse ed abbiamo definito la proprietà del colore. Ora per applicare la classe seguite il codice seguente
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <link rel="stylesheet" href="stile.css" type="text/css">
8
9
10
11 </head>
12 <body>
13
14
15 Testo con colore giallo
16
17 <p>Paragrafo rosso</p>
18
19 <p class="blu">Testo <span id="paragrafo">con colore blu</span></p>
20
21
22
23
24 </body>
25 </html>
Come vedete abbiamo applicato la classe di nome blu ad una parte del testo e alla parte restante dello stesso la classe paragrafo richiamandola con la parola chiave id ed il nome della stessa ed usando il tag span che dovreste conoscere.