Il CSS: introduzione

Facebook
Twitter
LinkedIn

Quasi contemporaneamente allo sviluppo dell’HTML, si è sviluppato un altro linguaggio: il CSS. La nascita di questo nuovo linguaggio risale ufficialmente al 1996 con il rilascio della versione di livello 1. Tuttavia la loro storia e la genesi dell’idea che portò alla loro realizzazione risalgono ad alcuni anni prima, e precisamente al 1993, quando per la prima volta si cominciò a parlare di stile per le pagine web. All’epoca infatti le pagine web non avevano stili, e la loro formattazione era affidata unicamente alle preferenze del browser.

Il CSS, sigla di Cascading Style Sheets (in italiano fogli di stile a cascata), è un linguaggio che gestisce il design e la presentazione delle pagine web (cioè l’aspetto estetico) e lavora in combinazione con l’HTML, o HyperText Markup Language (linguaggio a marcatori per ipertesti), il quale come abbiamo visto gestisce i contenuti delle pagine.

Con il CSS potete stabilire le regole secondo cui il nostro sito web dovrà mostrare le informazioni, mantenendo tutti i comandi relativi alla formattazione e allo stile (font, colori, dimensioni, ecc) separati da quelli relativi al contenuto.

Vengono chiamati cascading (a cascata) perché i fogli di stile su cui lavorare sono svariati, ma solo uno eredita a cascata tutte le proprietà dei fogli precedenti. Per molte persone la struttura classica e semplice di un blog può essere sufficiente; ma quando l’obiettivo è personalizzare l’aspetto di un sito web, è necessario approfondire la conoscenza del CSS.

Uno dei vantaggi di utilizzare questo linguaggio è sicuramente dato dalla possibilità di applicare un gruppo di stili a tutti gli elementi dello stesso tipo presenti in più pagine del sito web, senza dover applicare lo stile in ogni singola pagina (pensate a quanto sarebbe complicato dover applicare lo stesso stile su 100 pagine di un sito web…).

Altri vantaggi di questo linguaggio sono:

  • maggiore velocità di visualizzazione
  • maggiore compatibilità con i vari browser
  • migliore accessibilità
  • più semplice sviluppo e manutenzione

Inserimento

L’inserimento di codice CSS nelle pagine web può essere effettuato in tre modi diversi:

  1. In linea all’interno degli elementi
  2. Inserendo, all’interno dell’<head> tra gli specifici tag <style> e </style> le dichiarazioni css.
  3. Inserendo nel tag <head> della pagina in codice HTML un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall’estensione .css 

Vediamo un esempio per ogni modalità:

  1. in linea con gli elementi: <tag style="dichiarazioni CSS">...</tag>
  2. all’interno dell’<head></head> :
<html>
 <head>
 <title>Esempio</title>
 <style type="text/css">
   codice css
 </style>
 </head>
  1. in un foglio apposito così richiamato all’interno dell’<head></head>:
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>

dove all’interno di href="" dovremmo inserire il percorso in cui sarà il nostro file salvato con l’estensione .css

Quest’ultimo metodo è senza dubbio alcuno il più consigliato e permette un richiamo semplice all’interno di ogni singola pagina del nostro sito web.

Regole

Un foglio di stile CSS è sintatticamente strutturato come una sequenza di regole, che sono coppie costituite da un selettore (spesso corrispondenti ai tag HTML) e un blocco di dichiarazioni, racchiuso tra parentesi graffe. Un selettore è un predicato che individua certi elementi del documento HTML; una dichiarazione, separata con un punto e virgola dalle altre, è a sua volta costituita da una proprietà, ovvero un tratto di stile (come il colore del testo) e un valore da assegnare a quest’ultimo (per esempio blu). separati dai due punti.

selettore1 {
  proprietà1:valore1;
  proprietà2:valore2;
}
selettore2 {
  proprietà3:valore3
}

Può anche capitare che diversi selettori abbiano proprietà comuni: in tal caso si può usare una scrittura in forma abbreviata

selettore1, selettore2 {
  proprietà1:valore1;
  proprietà2:valore2;
}
selettore3 {
  proprietà3:valore3
}