Corso CSS - Lezione 1 - Collegare i fogli di stile CSS
Non spiegherò a cosa serve il CSS. Se hai aperto questo corso significa che desideri impararlo. Da parte mia posso solo dire che le potenzialità del CSS sono molto ampie e permettono di impaginare layout di qualsiasi complessità. D’altra parte, l’uso del CSS implica che dovrai rinunciare a diversi attributi dei tag come size, color, bgcolor, align e altri che “interferiscono” con il CSS.
Esistono almeno tre modi per collegare i CSS al tuo file HTML. Vediamo prima il metodo più semplice, poi il secondo e infine quello corretto.
CSS all’interno del tag
È possibile aggiungere CSS tramite l’attributo style:
<div style="width: 200px; height: 100px;"> Blocco </div>
In questo modo impostiamo un blocco di 200 per 100 pixel. Vediamo ora come si scrive il CSS. Per prima cosa scriviamo l’attributo style="" e poi, tra le virgolette, inseriamo le dichiarazioni CSS.
style="parametro:valore; parametro:valore; parametro:valore"
Scriviamo gli stili nel seguente modo: prima il parametro (width, height e altri), poi i due punti e il valore del parametro. Ogni parametro è separato da un punto e virgola.
Ora passiamo al secondo modo di scrivere il CSS.
CSS all’inizio del documento HTML
Per questo utilizziamo il tag <style></style>, all’interno del quale scriviamo il codice CSS.
<html> <head> <title>Corso CSS</title> <style type="text/css"> qui scriveremo il codice CSS </style> </head> <body> <p>Impara CSS insieme a drupalbook.org</p> </body> </html>
Il tag style va scritto all’interno del tag <head></head>, subito dopo il tag <title>. Scriviamo ora un po’ di codice CSS:
<html>
<head>
<title>Corso CSS</title>
<style type="text/css">
body{
background: #eeeeee; /* sfondo della pagina */
font-size: 14px; /* dimensione del font */
}
p{
color: #ff0000; /* colore del testo */
}
</style>
</head>
<body>
<p>Impara CSS insieme a drupalbook.org</p>
<p>Seconda riga: impara CSS insieme a drupalbook.org</p>
</body>
</html>
Vediamo come si scrive il CSS per i tag. Se scriviamo il nome di un tag nel CSS, tutti i tag di quel tipo riceveranno le proprietà definite. Ad esempio, se scriviamo p, tutte le sezioni di paragrafo useranno quei parametri.
Quando scriviamo il codice CSS, prima indichiamo il tag al quale vogliamo applicare gli stili, poi tra parentesi graffe scriviamo le dichiarazioni CSS. Gli stili si scrivono allo stesso modo dell’attributo style="":
parametro:valore; parametro:valore; parametro:valore
Parametro, due punti, valore, punto e virgola e di nuovo parametro, due punti, valore, punto e virgola e così via. Dopo l’ultima dichiarazione si può anche omettere il punto e virgola, ma è buona pratica inserirlo sempre.
Abbiamo visto due modi di inserire gli stili CSS, ora vediamo il terzo, quello più ottimale.
CSS in un file separato
Questo è il metodo migliore, che consente di separare completamente il CSS dal codice HTML. Naturalmente, a volte può sembrare comodo inserire il CSS direttamente nell’HTML, ma in questi casi bisogna “darsi una pacca sulla mano” e spostare il CSS in un file separato. Perché?
La principale idea del CSS è separare il contenuto dal suo aspetto. L’HTML serve per strutturare il testo, mentre il CSS serve per rendere quel testo armonioso e leggibile. Con l’HTML visualizziamo solo il contenuto, mentre con il CSS gestiamo dimensioni, colori, forme, bordi e spaziature.
Questo era il primo motivo. In secondo luogo, quando HTML e CSS si trovano nello stesso file, il codice diventa difficile da leggere e molto ingombrante. E terzo: i CSS vengono memorizzati nella cache del browser, quindi se si esternalizza tutto in un file separato, la pagina si caricherà più velocemente, poiché il CSS verrà scaricato solo una volta. Ora credo che abbiate capito dove voglio arrivare.
Bisogna sempre cercare di spostare il CSS in un file separato! Questo è ciò che intendo dire. Ora creiamo un file CSS separato. Per farlo usiamo il tag <link>:
<html> <head> <title>Corso CSS</title> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> </head> <body> <p>Impara CSS insieme a drupalbook.org</p> <p>Seconda riga: impara CSS insieme a drupalbook.org</p> </body> </html>
Il tag <link> ha i seguenti attributi:
type="text/css" – indica che si tratta di un file CSS,
rel="stylesheet" – specifica che il file collegato è un foglio di stile,
media="all" – il file CSS sarà applicato a tutti i dispositivi che visualizzano il sito,
href="styles.css" – il percorso del file CSS; nel nostro caso è un percorso relativo.
Ora che abbiamo capito come collegare un file CSS, crea il file styles.css nella stessa cartella dove si trova il file HTML.
Apri il file styles.css e incolla al suo interno le seguenti regole CSS:
body{
background: #eeeeee; /* sfondo della pagina */
font-size: 14px; /* dimensione del font */
}
p{
color: #ff0000; /* colore del testo */
}
Salva questo file e apri il tuo file HTML nel browser. Ora il CSS è collegato correttamente tramite un file separato. Nella prossima lezione analizzeremo in dettaglio come scrivere gli stili in un file separato.