Semplicemente

Il supporto del linguaggio CSS nei vari browser sta nettamente migliorando. Ecco perché è forse il momento giusto per dare una timida occhiata a CSS 3.
Se non ricordi cosa sono le pseudo classi puoi dare una ripassata all’articolo Introduzione ai CSS - I selettori.
Fino ad ora abbiamo definito CSS come il linguaggio con il quale [...]

Alcuni modesti suggerimenti, per far la vita meno amara.
Centrare un box con CSS
Un primo metodo per centrare un box all’interno della pagina consiste nell’assegnare ad esso una larghezza esplicita ed il valore auto per le proprietà margin-left e margin-right.

#box {
width: 300px;
margin-left: auto;
margin-right: auto;
}

Se siete maniaci della retro-compatibilità, come il sottoscritto, noterete che questo metodo non [...]

Perché ciò che vedi a volte non è tutto.
La proprietà overflow
Quando un elemento è dimensionato in modo esplicito (per esempio div { width: 300px;}) c’è il rischio che non sia sufficientemente ampio per il contenuto.
La proprietà overflow consente di controllare il comportamento del contenuto quando supera le dimensioni del contenitore.
I valori possibili sono:

visible
Il contenuto non [...]

Il visual formatting model stabilisce le regole per la generazione dei box da parte degli elementi.
La posizione che un box assume nel flusso dei contenuti della pagina può essere determinata:

Dalle dimensioni e dal tipo di box.
Dallo schema di posizionamento.
Dalle relazioni tra gli elementi nell’albero.
Da informazioni esterne: dimensioni dell’area di visualizzazione, dimensioni intrinseche delle immagini ecc.

Come controllare il comportamento dei box generati dagli elementi?
Con la proprietà display, ovviamente. I quattro valori più comuni per questa proprietà sono i seguenti (se desideri approfondire consulta la specifica CSS):

block
L’elemento inizia e finisce su una nuova riga, per esempio un paragrafo p.
inline
L’elemento è visualizzato in un box posizionato sulla stessa riga del contenuto precedente, [...]

La struttura di un documento HTML è fatta, in ultima analisi, di elementi posti all’interno di altri elementi.
E’ possibile rappresentarli in una struttura gerarchica ad albero oppure, visivamente, come box rettangolari contenuti all’interno di altri box rettangolari.
Il box model1 descrive esattamente le caratteristiche dei box rettangolari generati dagli elementi.
Il box più esterno di un documento [...]

Perché anche il vuoto ha il suo peso.
Spazi vuoti
La proprietà white-space definisce come lo spazio vuoto presente nel codice HTML sarà trattato. I valori possibili sono:

normal
Le tabulazioni sono convertite in spazi, ogni spazio aggiuntivo e rimosso e le righe sono interrotte per adattarsi alle dimensioni del contenitore. E’ la modalità predefinita.
pre
Gli spazi vuoti aggiuntivi e [...]

Scelte le dimensioni e la famiglia di caratteri, aggiungiamo un po’ di stile. Un altro articolo sulla tipografia CSS.
Corsivo
La proprietà font-style consente di rendere il testo in corsivo ed ha quattro valori possibili: normal, italic, oblique e inherit.
L’effetto corsivo1 può essere ottenuto in due modi:

Utilizzando la variante corsiva del carattere (valore italic).
Oppure inclinando di circa [...]

Perché Internet Explorer mi delude sempre?
Oggi giocavo un po’ con il CSS del form di ricerca del mio sito. Si vede che non ho un cacchio da fare eh? (sorriso).
Speravo davvero che il mancato supporto per il valore dotted della proprietà CSS border-style fosse stato risolto del tutto con la versione 7 di IE. Ma [...]

Iniziamo con questo articolo ad approfondire la tipografia CSS.
Le famiglie di caratteri
La proprietà CSS font-family consente all’autore di scegliere il tipo di carattere per il testo di un elemento.
Il valore è una lista separata da virgole di nomi di famiglie di caratteri e/o di famiglie generiche. E’ consigliabile indicare sempre una delle famiglie generiche di [...]

E se volessimo destinare un foglio di stile a un particolare dispositivo?
Alcune proprietà possono essere condivise tra più dispositivi (media).
Il media di destinazione di un intero foglio di stile può essere specificato sia con l’attributo media degli elementi link e style di HTML, sia all’interno di una regola @import.
Ecco un esempio nel quale sono associati [...]

Gabriele Romanato continua il suo ottimo lavoro di ricerca sui CSS.
Ora CSS Zibaldone è citato nella Home Page di Position Is Everything sito “culto” per chiunque si occupi seriamente, o si sia occupato, di CSS nella vita.
Ho chiesto a Gabriele se poteva riassumere il senso del suo lavoro. Ecco le sue parole:

I miei test nascono [...]

Un approfondimento sulle unità di misura e i valori nelle regole CSS
Con CSS, le misure di lunghezze possono essere espresse con valori numerici positivi o negativi. Esistono proprietà che non ammettono un valore negativo e, nel caso il designer lo inserisse, il browser dovrà ignorarlo.
Il valore numerico della lunghezza deve sempre essere seguito dall’abbreviazione dell’unità [...]

Cosa succede quando due o più regole entrano in conflitto in un foglio di stile?
La specificità dei selettori
In generale i selettori maggiormente specifici vincono. Ma come si calcola la specificità?
Lo si fa utilizzando una sequenza di quattro numeri (A, B, C, D), ottenuti nel seguente modo:

A: se il selettore è un attributo style di HTML [...]

Grazie al contenuto generato via CSS è possibile modificare l’aspetto delle liste ordinate. Nulla di nuovo, ma ovviamente IE (compresa la versione 7) non supporta questo metodo.
Maria, una mia ex allieva, oggi mi ha chiesto un consiglio sui fogli di stile e le liste ordinate. Mentre le rispondevo ho giocato un po’ con il contenuto [...]

Con questo articolo cercheremo di orientarci un po’ nella selva dei selettori CSS.
Prima di procedere con la lettura consiglio di leggere l’articolo Introduzione ai CSS - Le relazioni tra gli elementi per familiarizzare con la terminologia.
I selettori di cui mi occupo in questo articolo sono esclusivamente riferiti alla specifica CSS 2.0.
Selettore di tipo
Un selettore [...]

Su indicazione di Livio Mondini, segnalo l’ottimo lavoro di Gabriele Romanato che sul suo sito CSS Zibaldone, ha pubblicato una serie di test sui fogli di stile (in lingua inglese) davvero ben fatti e utili. Ma il suo sito contiene molte altre interessanti risorse!

Esistono differenti metodi per associare un foglio di stile ad un documento.
Fogli di stile esterni
Un foglio di stile esterno è un file testuale esterno al documento, contenente esclusivamente le regole CSS da applicare.
Esso è associato al documento utilizzando l’elemento HTML link, posto all’interno dell’elemento head:

<link rel=”stylesheet” href=”stile.css” type=”text/css” media=”screen” />

I file di testo collegati hanno [...]

La mia guida “incompleta” ai CSS cerca co-autori.
Continua la chiamata ai commenti, alle critiche e alle integrazioni per gli articoli della serie “Introduzione ai CSS”.

Un foglio di stile è costituito da un insieme di regole che specificano l’aspetto di un documento sorgente.
Il linguaggio CSS consente la separazione dello stile di presentazione di documenti strutturati (come pagine HTML o applicazioni XML) dal contenuto.
Grazie a questa separazione, il documento può essere fruito in modalità differenti senza perdita di informazioni o struttura.
La [...]