Grubość tekstu w CSS

W tej lekcji poznamy właściwość font-weight, która pozwala uczynić tekst pogrubionym lub odwrotnie - usunąć pogrubienie (na przykład dla nagłówków, które są pogrubione domyślnie). Aby uczynić tekst pogrubionym, należy podać wartość bold, a aby usunąć pogrubienie - wartość normal.

Ta właściwość działa podobnie do znacznika b, który już omówiliśmy. Różnica polega na tym, że poprzez CSS znacznie wygodniej jest zarządzać grubością - można na przykład sprawić, aby wszystkie akapity stały się pogrubione, a wszystkie nagłówki - niepogrubione, robiąc zaledwie kilka wpisów w pliku CSS.

Gdybym miał robić pogrubienie za pomocą znacznika b - musiałbym zawartość każdego akapitu opakować w ten znacznik, a to byłoby bardzo czasochłonne (a jeśli później zechcę usunąć pogrubienie akapitom - będę musiał usunąć wszystkie te znaczniki, wyobraźcie sobie, ile to zbędnej, bezużytecznej pracy).

W następnym przykładzie sprawimy, że wszystkie akapity będą pogrubione, a wszystkie nagłówki h2 - niepogrubione:

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

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

Skopiuj poniższy kod HTML na swoją stronę:

<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>

Ustaw tabeli szerokość na 500px, a wysokość na 300px. Sprawdź, aby komórki td były pogrubione i wyśrodkowane, a komórki th - niepogrubione.