CSS: le basi

Eccoci come promesso nel secondo articolo dedicato alla programmazione di siti web, oggi tratteremo il CSS (Cascading Style Sheets), ovvero la tecnica introdotta per aggiungere in maniera semplicissima lo stile a un vostro documento html. La sua funzione principale è quello di separare lo stile dagli elementi effettivi della pagina, in modo da poter agire velocemente sul codice.

Mentre prima l’html comprendeva nei tag anche lo stile, dando vita a obrobri del tipo

   1: <p width="20%" color="blue" background-color="yellow" text-align="center">

ora il CSS permette la separazione dei due elementi, andando dunque a definire un documento html in cui compare all’interno solo il contenuto effettivo della pagina e un foglio CSS con tutti gli elementi stilistici. Vediamo la sintassi di questo “linguaggio”:

   1: #container

   2: {

   3:     color: blue;

   4:     font-family: Verdana;

   5: }

   6:  

   7: h1.titolo

   8: {

   9:     text-align: center;

  10:     float: letf;

  11: }

Come potete notare sono presenti due diverse denominazioni per uno stile, quella con il #, per definire elementi unici (ad esempio i contenitori dell’applicazione come Sidebar, Footer, Header,.. oggetti dell’articolo di domani) e quella con il “.”. In quest’ultimo caso andiamo a definire classi di tag specificati che hanno lo stile specificato nel CSS.

Come linkare dunque lo stile nel documento html? I modi sono 3:

1. Potete scegliere di spostare il CSS in un documento esterno con estensione .css e mettere in head nell’html il seguente comando

      1: <link rel="stylesheet" type="text/css" href="path/del/CSS">

2. Potete inserirlo nel tag <style> all’interno dell’head dell’html.
3. Potete inserire il tag style in ogni elemento da personalizzare (styling inline), ad esempio

      1: <p style="color: blue; font-family: Verdana">

Continua la lettura con:

1. Strutturare una pagina web, Box model css Eccoci al penultimo articolo sul mondo html e css. Oggi parliamo di come strutturare una...
2. La struttura portante di un documento HTML Come sapete tutti benissimo un sito web pianta le sue fondamenta nel linguaggio html. Tutte...
3. Storia dell’encoding e utilizzo nella progettazione di applicazioni web Ultima lezione sul web programming, abbandoniamo per un momento la “pratica” per concentrarsi su un...
4. Configurazione del virtual host in Apache Riprendiamo dove ci siamo lasciati ieri, alla creazione dei virtual host. Per creare un sito...
5. Css Spinners personalizzati per i vostri progetti Come si distingue un vero Web Designer da un imitatore? Il vero Web Designer lavora...