Guida CSS

CSS è l'acronimo di Cascading Style Sheets, ovvero "fogli di stile a cascata" o, più brevemente, fogli di stile. Cos'è CSS e a cosa serve Si tratta del linguaggio standard per la stilizzazione di documenti HTML (ma non solo) che assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel documento. Attraverso i CSS è...

Nella precedente lezione abbiamo visto che lo scopo dei CSS è quello di separare la formattazione dalla struttura del documento: se la seconda è demandata ai tag HTML, la prima è di esclusiva competenza dei fogli di stile. Abbiamo anche detto che CSS è un linguaggio nuovo e distinto rispetto a CSS... ma a questo punto una prima domanda (assolutamente...

Nella precedente lezione abbiamo visto come integrare delle istruzioni CSS all'interno di un documento HTML. In questa lezione presenteremo un importante attributo che è possibile aggiungere tanto al tag <style> che al tag <link>. L'attributo in questione è media ed il suo compito è quello di definire il supporto cui applicare le regole contenuto nel foglio di stile. In...

Una buona prassi di programmazione prevede che il bravo sviluppatore non ometta mai di commentare il codice. I commenti sono delle porzioni di testo, presenti tra le varie istruzioni CSS, che non vengono interpretate dal browser, il quale le ignora in fase di rendering della pagina. I commenti, quindi, possono essere definiti come dei semplici appunti lasciati dallo sviluppatore a...

Nella seconda lezione della nostra guida abbiamo visto come utilizzare i CSS all'interno di un documento HTML. Abbiamo visto, infatti, che è possibile applicare regole all'interno dei singoli tag HTML (stile inline), definire fogli di stili interni al documento o importare fogli di stile esterni e separati mediante un semplice link. Quello che non abbiamo ancora visto è come è...

Nella precedente lezione abbiamo visto come costruire una regola CSS ed abbiamo visto che il primo elemento (partendo da sinistra) prende il nome di selettore. Il selettore, come il nome lascia intuire, serve "per selezionare" il o gli elementi della pagina cui applicare le dichiarazioni contenute tra le parentesi graffe (il cosiddetto "blocco dichiarativo"). Sino ad ora abbiamo utilizzato come selettore...

La differenza tra classi ed ID è di fondamentale importanza: mentre con una classe definiamo la stilizzazione di una serie di elementi con caratteristiche comuni, con l'ID si definisce un elemento unico all'interno della pagina. Se ad esempio volessimo stilizzare una serie di paragrafi useremo un classe: p.esempio { color:#000000 } Se invece volessimo definire un DIV contenitore della pagina (elemento presente...

Nella passata lezione abbiamo visto i selettori di base, ovvero i selettori utilizzati più di frequente attraverso i quali è possibile far fronte alle più comuni esigenze di sviluppo. Le possibilità offerte da CSS 2.1, tuttavia, non si euriscono qui. Le specifiche del linguaggio, infatti, prevedono altri tipi di selettori che, da un punto di vista espositivo, possiamo dividere...

Le pseudo-classi sono un concetto fondamentale per chi lavora coi CSS. Attraverso le pseudo-classi non si definisce l'aspetto di un elemnto ma di un particolare stato. Una pseudo classe differisce da una classe in quanto la prima (a differenza della seconda) non esiste materialmente nel documento ma viene "creata" virtualmente dal browser al verificarsi di certi eventi. Un esempio tipico...

Uno dei concetti fondamentali dei CSS è quello di ereditarietà, in questa lezione cercheremo di spiegare, in modo semplice, cos'è e come sfruttarla all'interno dei nostri fogli di stile. Il DOM (cenni) Il concetto di ereditarietà, per essere compreso a pieno, deve essere affrontato tenendo bene a mente una caratteristica tipica dei documenti HTML, cioè quella di essere rappresentabili come un...

Abbiamo appena visto, al termine della lezione precedente, come si risolve un primo "conflitto" tra regole discordanti: abbiamo visto, infatti, che le proprietà assegnate specificamente prevalgono su quelle ereditate. In un certo senso il meccanismo di risoluzione dei conflitti si comporta in modo analogo anche in altre situazioni in quanto CSS tende a far prevalere la regola più specifica...

A partire da questa lezione iniziamo a parlare delle proprietà CSS per l'attribuzione degli stili agli elementi, a comprenderne il significato e ad esaminarne le casistiche di utilizzo. Il primo passo in tal senso lo faremo parlando di box model, cioè di quell'insieme di regole che determinano l'aspetto degli elementi di tipo block. Elementi blocco e in linea Iniziamo col dire...

Nella lezione precedente abbiamo introdotto il box-model di CSS, mentre a partire da questa lezione vedremo di illustrarne le principali proprietà, ovvero width, height, padding, border e margin. La proprietà width La proprietà width è utilizzata per assegnare una larghezza esplicita ad un elemento di tipo block. Come abbiamo già visto, in mancanza il nostro elemento si espanderà occupando tutta la...

In questa lezione vedremo le proprietà padding e margin ovvero, rispettivamente, la spaziatura interna ed esterna al box. La proprietà padding Tramite il padding viene definito uno spazio tra l'area dei contenuti ed il confine interno del box. Il suo utilizzo è frequente in due circostanze ben precise: quando il box ha un bordo (per creare un po' di distanza tra il...

Ultima famiglia di proprietà attinenti al concetto di Box-model è quella relativa alla gestione dei bordi. Attraverso queste proprietà CSS consente agli sviluppatori una massima libertà creativa essendo possibile, per ciascun bordo, definire: spessore stile colore Come abbiamo visto per le proprietà padding e margin, anche per i bordi è possibile agire simultanemante su tutti e quattro i lati del box oppure solo...

Con la scorsa lezione abbiamo esaurito la rassegna delle proprietà CSS tipiche del box-model. A partire da questa lezione passeremo in rassegna le altre proprietà dei fogli di stile partendo da quelle relative allo sfondo (o background), le quali possono essere applicate tanto alla pagina (tag <body>) quanto ad un suo elemento (ad esempio un box). Attraverso tali proprietà possiamo...

Abbiamo già affrontato le tematiche relative al colore nei CSS in due precedenti lezioni, più precisamente nella lezione dedicata alla stilizzazione dei bordi (proprietà border-color) e nella lezione dedicata al background (proprietà background-color). In questa lezione vedremo una panoramica generale sull'utilizzo dei colori nei fogli di stile. I colori nei fogli di stile CSS Abbiamo già visto che i colori, all'interno...

Nella precedente lezione abbiamo già visto un'importante proprietà del testo, cioè la proprietà color attraverso la quale è possibile definire il colore degli elementi testuali. Vediamo adesso quali sono le principali proprietà CSS per la stilizzazione del testo. Per prima cosa vediamo le proprietà della famiglia font attraverso le quali è possibile impostare il tipo di carattere da utilizzare, le...

Oltre a quelle citate nella lezione precedente della nostra Guida CSS esistono diverse altre proprietà per la stilizzazione del testo attraverso le quali è possibile definirne, in modo estremamente preciso, la disposizione di lettere e parole. Queste proprietà di CSS sono: letter-spacing word-spacing white-space line-height Anche queste proprietà, come tutte le altre relative alla stilizzazione dei blocchi di testo, sono ereditate. Vediamole nel dettaglio. letter-spacing...

La stilizzazione dei link attraverso i codici CSS non prevede comandi specifici se non quelli che già abbiamo visto per il testo, una sua trattazione specifica, tuttavia, si rende opportuna in quanto si tratta di un elemento particolarmente importante e sovente oggetto delle più disparate stilizzazioni come, appunto, i collegamenti ipertestuali. Una premessa si rende opportuna: quando si lavora sui...

In questa lezione della nostra Guida CSS vedremo come stilizzare liste e tabelle. Stilizzare le liste Attraverso i CSS è possibile agire sulla presentazione delle liste, cioè sull'aspetto di liste ordinate (<ol>) e non ordinate (<ul>). A tal fine i fogli di stile ci consentono di fare ricorso a quattro proprietà (tre specifiche + una con sintassi compatta). list-style list-style-image list-style-position list-style-type Anche queste proprietà, come...

Cambiare l'aspetto del cursore del mouse con i CSS può essere un'ottima opzione per personalizzare l'esperienza utente su un sito web. Grazie alla proprietà cursor di CSS, è possibile scegliere tra una vasta gamma di cursori predefiniti del browser o definire un cursore personalizzato, creando così un'esperienza di navigazione unica e coinvolgente per gli utenti. Personalizzare il cursore con uno...

La proprietà display Una proprietà fondamentale di CSS è sicuramente display. Attraverso questa proprietà, infatti, è possibile definire il modo in cui un dato elemento viene mostrato (o meno) all'interno della pagina. Abbiamo già visto, in una precedente lezione, che ogni elemento della pagina ha un valore predefinito di visualizzazione ed è pertanto possibile distinguere gli elementi in linea dagli elementi...

Nella lezione precedente abbiamo visto cosa sono e come funzionano le proprietà del CSS visibility e display ed abbiamo avuto modo di capire che entrambe agiscono sulla visualizzazione (o meno) di un dato elemento della pagina. Diveramente da quello che si potrebbe pensare, tuttavia, le due proprietà non hanno lo stesso effetto... Usare display:none o visibility:hidden? In entrambi i casi l'elemento...

I CSS permettono di "giocare" con gli elementi di una pagina in modo da posizionarli dove si preferisce, a prescindere cioè dalla naturale posizione sequenziale che un elemento avrebbe se si seguisse il normale flusso del codice HTML. La proprietà position Si tratta di una proprietà fondamentale nella costruzione di layout coi CSS. Attraverso position, infatti, è possibile posizionare con precisione...

Abbiamo visto come, attraverso i CSS, possiamo gestire ogni aspetto della presentazione degli elementi della pagina; nella precedenti lezioni abbiamo imparato manipolare la proprietà display e come posizionare gli elementi nella pagina. In questa lezione vedremo come gestire un aspetto particolare del rapporto tra i vari elementi della pagina, cioè le eventuali sovrapposizioni. La sovrapposizione tra elementi della pagina è...

Concludiamo la nostra guida di base all'utilizzo dei CSS analizzando due proprietà fondamentali, ovvero float e clear. Queste due proprietà (che non vengono ereditate dagli elementi discendenti) assumono un ruolo assolutamente centrale nell'attività quotidiana di web design in quanto sono le protagoniste indiscusse di buona parte dei nuovi layout table-less. La tecnica che prevede l'utilizzo di queste proprietà è detta...