Background
Possiamo applicare un colore di sfondo per esempio alla pagina intera come ad un elemento <div> oppure a del testo. Scrivete questo codice
1 body{
2
3
4 background-color: aquamarine;
5
6
7 }
8
9 p{
10
11
12 background-color: yellow;
13
14
15
16 }
17
18
19 div{
20
21
22
23
24 width: 300px;
25 height: 300px;
26 border: 1px solid red;
27 background-color: grey;
28
29
30 }
Abbiamo applicato la proprietà background-color:aquamarine alla pagina intera. Il body si riferisce alla pagina intera. E questa proprietà specifica il colore di sfondo della pagina. Poi abbiamo definito un colore di sfondo per i contenitori div ed uno per i paragrafi. Modificate poi la pagina html così
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 <p>Paragrafo giallo</p>
15
16 <div>
17
18
19
20
21
22 </div>
23
24
25
26
27
28 </body>
29 </html>
Nella pagina html abbiamo inserito un paragrafo semplice che avrà un colore giallo, mentre abbiamo creato anche un div che sapete in html serve a creare un contenitore ed abbiamo applicato un bordo che vi invito a ricopiare uguale perchè lo spiegheremo in seguito. Ora se caricate la pagina dovreste avere lo sfondo aquamarine per la pagina, giallo per il paragrafo e grigio per il div. Abbiamo terminato con i colori di sfondo.