Spessore del testo in CSS

In questa lezione studieremo la proprietà font-weight, che permette di rendere il testo grassetto o, al contrario, di rimuovere il grassetto (ad esempio, per gli titoli, che sono grassetti per impostazione predefinita). Per rendere il testo grassetto, bisogna specificare il valore bold, mentre per rimuovere il grassetto - il valore normal.

Questa proprietà funziona in modo analogo al tag b, che abbiamo già analizzato. La differenza è che con CSS è molto più comodo gestire il grassetto - si può, ad esempio, fare in modo che tutti i paragrafi diventino grassetti e tutti gli titoli - non grassetti, con solo un paio di righe nel file CSS.

Se dovessi rendere grassetto usando il tag b - dovrei avvolgere il contenuto di ogni paragrafo in questo tag, e questo richiederebbe molto tempo (e se poi volessi togliere il grassetto ai paragrafi - dovrei rimuovere tutti questi tag, immaginate quanto lavoro extra e inutile).

Nel prossimo esempio renderemo tutti i paragrafi grassetti e tutti gli titoli h2 - non grassetti:

<h2>Title</h2>
<p>
	This is a paragraph with text.
</p>

h2 {
	font-weight: normal;
}
p {
	font-weight: bold;
}

Copia il seguente codice HTML nella tua pagina:

<table border="1">
	<tr>
		<th>Name</th>
		<th>Surname</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Smith</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Nick</td>
		<td>Mayers</td>
		<td>300$</td>
	</tr>
	<tr>
		<td>Alex</td>
		<td>Jonson</td>
		<td>400$</td>
	</tr>
</table>

Imposta per la tabella una larghezza di 500px, e un'altezza di 300px. Rendi le celle td grassette e centrate, e le celle th - non grassette.