CSS – formalmente Cascading Style Sheet

Pubblicato su 3 marzo, 2014 da Manuel Ricci in

CSS o fogli di stile se vogliamo dirla all’italiana, sono dei file che permettono al web designer di formattare i file HTML, quindi stiamo parlando di tecnologie legate all’universo del web.codice css indentato

Il primo rilascio del codice CSS, vede la luce nel dicembre 1996 ad opera della W3C (consorzio internazionale che monitora gli standard della rete). Il rilascio è stato necessario affinché i programmatori potessero separare la formattazione dagli elementi HTML, mentre dal lato dell’utente era possibile ottenere una navigazione più chiara e piacevole.

Attualmente si contano 3 versioni del linguaggio di stile, l’ultima rilasciata nel 2010 ha introdotto numerosi effetti che possono snellire la comunicazione fra client e server, rendendola più veloce, grazie alla possibilità di evitare immagini che prima venivano realizzate appositamente per aggiungere stili particolari al layout (es. ombre e angoli arrotondati).

Esempi di codice css

<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>
</head>

Lo standard W3C prevede l’inclusione dei fogli di stile, caratterizzati dal formato “.css” nella head del file HTML, come nella sintassi visibile nel box sovrastante.

<html>
<head>
<title>Esempio</title>
<style type="text/css">
@import url(foglio_di_stile.css);
</style>
</head>

Oppure al posto del classico tag <link> è possibile utilizzare il tag @import.

<html>
<head>
<title>Esempio</title>
<style type="text/css">
codice css
</style>
</head>

Se si vuole evitare di creare un file css a parte è possibile inserire le proprietà di stile direttamente all’interno del file HTML, basterà infatti aprire il tag <style></style> e scrivere le proprietà come se si trattasse di un file css normalissimo. Il consiglio che do io è quello di utilizzare sempre dei file esterni, in maniera tale da poter ridurre sensibilmente il tempo di caricamento della pagina web, ricordo in fatti che la maggior parte dei file viene eseguita / letta in maniera sequenziale, a meno che non sia il codice stesso ad avvisare il browser o il programma che esegue il codice, di saltare in una parte specifica (vedi ad esempio funzioni in javascript).

Un file css, per essere validato correttamente secondo gli standard della W3C, deve contenere delle istruzioni precise, chiamate regole.

selettore {
proprietà1 : valore1;
proprietà2 : valore2, valore3;
}

La struttura che è possibile osservare sopra questo paragrafo è la struttura generica di una regola CSS, prevede infatti il coinvolgimento di un selettore, che può essere un elemento HTML (ad esempio p, h1, div, ecc. ecc.),  una classe (ad esempio .pippo, .paperino, ecc. ecc.), un id (ad esempio #main, #sidebar, ecc. ecc.).

Sono previste inoltre delle pseudo-classi, pseudo-elementi, e selettori di attributi, sarà possibile con queste set di regole, modificare ad esempio la prima lettera di un paragrafo, il bottone di un form, il colore di un link al passaggio del mouse.

I css sono uno dei linguaggi più complessi sotto un’ottica di compatibilità con i vari browser a disposizione degli utenti web. Famosa è la diatriba che ogni web designer ha con internet explorer, data la sua vasta espansione di versioni troppo vecchie per accettare i più recenti stili.

Approfitto di questa voce del glossario per consigliare a chi non l’avesse ancora fatto, di scaricare un browser recente, come ad esempio Google Chrome, Mozilla Firefox o Opera.