Come inserire il codice
Le istruzioni css possono essere inserite in un file css esterno. Per iniziare questo corso create nel vostro editor una cartella di nome css e al suo interno create un file di tipo css e nominatelo stile in modo da avere un file stile.css. All’interno di esso inserite questo codice
p{
font-size:26px;
}
poi salvate. Ora create nella cartella del progetto un file html e lo nominate test, quindi ora abbiamo un file stile.css e uno test.html.
Non cancellate questi due files mai perchè li useremo sempre durante il nostro studio. Ora nella sezione <head> del file html
inserite questa istruzione <link rel="stylesheet" type="text/css" href="stile.css"> .
Spieghiamo questa istruzione. Link rel fa in modo che il link si riferisca ad una risorsa di tipo css, infatti stylesheet sta per foglio di stile. Poi segue type=text/css che rappresenta la tipologia di testo e href indica il percorso dove si trova il file. In questo caso non abbiamo dovuto indicare un percorso perchè si trova già nella stessa cartella del progetto e non in sottocartelle. Questa modalità di inserire il css è quella che useremo sempre nel libro e quindi non cancellate il file e non spostatelo di posizione. Si definisce questa modalità css esterno. Ora provate a scrivere uno o più paragrafi nel vostro file html 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 </head>
10 <body>
11
12
13 Testo senza formattazione
14
15 <p>Testo con la proprietà font.weight</p>
16
17 <p>Testo con la proprietà font.weight</p>
18
19 <p>Testo con la proprietà font.weight</p>
20
21
22
23 </body>
24 </html>
Aprite la pagina in un browser e noterete che tutti i paragrafi hanno un font con grandezza 26 pixels. I 26 pixels noi li indichiamo con 26px. Un secondo modo per inserire il css è all’interno della sezione <head> ma usando il tag <style>, così
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8
9 p{
10
11 font-size:26px;
12
13 }
14
15
16
17 </style>
18
19 </head>
20 <body>
21
22
23 Testo senza formattazione
24
25 <p>Testo con la proprietà font.weight</p>
26
27 <p>Testo con la proprietà font.weight</p>
28
29 <p>Testo con la proprietà font.weight</p>
30
31
32
33 </body>
34 </html>
In pratica inseriamo nella sezione <head> una sezione <style> e al suo interno il codice. Si definisce css interno alla pagina. Se lo usate uguale in cento pagine e poi decidete di apportare una modifica sarete costretti a ricopiarlo uguale in tutte le pagine, quindi questa modalità va bene quando una o più pagine del vostro sito si distinguono nella formattazione e vogliono applicare una standard distinto dal css esterno. Infine esiste un terzo modo per inserire css ed è definito in linea. Il nostro esempio di prima potrebbe riprodursi così
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7
8
9 </head>
10 <body>
11
12
13 Testo senza formattazione
14
15 <p style="font-size: 26px;">Testo con la proprietà font.weight</p>
16
17 <p style="font-size: 26px;">Testo con la proprietà font.weight</p>
18
19 <p style="font-size: 26px;">Testo con la proprietà font.weight</p>
20
21
22
23 </body>
24 </html>
In pratica se volete applicare il font con grandezza 26 pixels dovete applicarle per ogni paragrafo che vi interessa. Dovete inserire nello stesso paragrafo style e poi tra apici l’istruzione css. Questi sono i tre modi di inserire css ma noi useremo sempre il css esterno e vi conviene insistere su questo.