CSS Corso Base per principianti: cos’è CSS?
Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio informatico che permette di arricchire il linguaggio HTML al fine di fornire una formattazione più varia e ricca di effetti.
Il CSS viene codificato ufficialmente nel 1996 dal W3C. La novità più interessante che colpì chi già allora creava pagine internet era la possibilità di dividere il contenuto della pagina HTML e lo stile di formattazione CSS in file separati. In questo modo se 100 pagine caricavano lo stesso stile di formattazione da un’unico file CSS separato, era sufficiente (finalmente) correggere un solo file CSS e automaticamente lo stile sarebbe variato in tutte le pagine che lo richiamavano. Ci vollero circa 2 anni prima che CSS alla versione 2 venisse supportato dai maggiori browser presenti sul mercato, divenendo di fatto uno standard. Ancora oggi il CSS è in continua evoluzione e non tutti i comandi sono renderizzati allo stesso modo dai diversi browser. Vi invito a sperimentare di volta in volta e di utilizzare le istruzioni più adatte alle vostre esigenze solo dopo averle testate, con un occhio di riguardo ai dispositivi Mobile.
Per chi volesse approfondire la storia del CSS, lo invito a visitare Wikipedia a questo link.
Vediamo una semplice struttura che incorpora un CSS:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
h1 {
/* questo è un commento e non viene processato */
font-family: "Times";
font-style: bold;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<h1>Il contenuto del documento</h1>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Leggendo il codice si può notare che la frase “Il contenuto del documento” è formattata grazie al tag h1 che all’interno della sezione head di HTML definisce le proprietà di formattazione quali famiglia del font, stile, dimensione e colore. Questo modo di scrivere è molto più pratico che dover specificare ogni volta tutti questi parametri per ogni singolo testo inserito. La sintassi del css comporta obbligatoriamente l’utilizzo del punto e virgola alla fine di ogni comando e i commenti vanno racchiusi tra i simboli come mostrato sopra.
Se le pagine nelle quali inserire il CSS fossero 100, il lavoro da fare sarebbe comunque annoso, per questo possiamo scrivere il codice CSS in un file a parte, ad esempio stile.css, e richiamarlo all’interno della pagina HTML tramite il seguente codice:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <style type="text/css"> @import url(stile.css); </style> </head> <body> <h1>Il contenuto del documento</h1> </body> </html>
Volendo al bisogno si può specificare lo stile direttamente all’interno del tag HTML:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> Il contenuto del documento </div> </body> </html>
