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 [...]

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 [...]

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 [...]

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 [...]

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 [...]

La sequenza dei marcatori presenti in un documento HTML può essere rappresentata in una struttura ad albero che ne evidenzia le relazioni.
Consideriamo il seguente esempio di documento HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Titolo della pagina</title>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
</head>
<body>
<h1>Un titolo di primo livello</h1>
<p>Un paragrafo con testo <strong>grassetto</strong>.</p>
</body>
</html>

Gli elementi si posizionano tutti in ramificazioni gerarchiche ad [...]

Quali sono le differenze tra XHTML e HTML? Tutti i browser “capiscono” XHTML?
Le differenze con HTML 4.01 non sono molte, ma rispettarle è fondamentale: in XHTML, infatti, i documenti devono essere ben formati e validi, pena la mancata validazione e, nei browser che interpretano correttamente XHTML, l’interruzione del rendering del documento. Ecco le differenze, insieme [...]

Qual’è lo scopo della dichiarazione DOCTYPE?
La dichiarazione DOCTYPE specifica:

il tipo di elemento radice del documento, per esempio HTML;
un identificatore pubblico, per esempio: PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”;
il system identifier: “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

Esempi di DTD:
HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Enfatizza la separazione del contenuto dalla presentazione e [...]

I linguaggi di marcatura come HTML, XHTML o XML derivano dall’SGML (Standard Generalized Markup Language).
SGML è un metalinguaggio (un linguaggio, cioè, utilzzato per la creazione di altri linguaggi) e ha origini “antiche”. Nel 1969 Charles Goldfarb, Edward Mosher, e Raymond Lorie, dipendenti IBM, inventarono il Generalized Markup Language come un mezzo per modificare, condividere e [...]