Podstawy pracy z językiem CSS

Omówiliśmy już podstawowe znaczniki języka HTML i nadszedł czas, aby upiększyć nasze strony. Chcielibyśmy mieć możliwość zmiany koloru tekstu, jego rozmiaru, tła i wielu innych rzeczy. Robimy to za pomocą języka CSS.

Zazwyczaj polecenia CSS (style) są przechowywane w oddzielnym pliku, który jest podłączany specjalnym znacznikiem do wszystkich stron HTML naszej witryny.

Zaletą tego podejścia jest to, że plik CSS jest jeden, a plików HTML może być dowolna liczba, nawet tysiąc. Jeśli wprowadzimy zmianę w jednym miejscu pliku CSS, na przykład, zmienimy kolor wszystkich akapitów na czerwony, to zmiany te zostaną zastosowane na wszystkich tysiącu stron HTML, do których podłączony jest nasz plik CSS. Bardzo wygodnie i szybko.

Plik ze stylami powinien mieć rozszerzenie .css. Aby podłączyć taki plik do strony HTML, w znaczniku head należy napisać następującą konstrukcję:

<link rel="stylesheet" href="fileName.css">

W następnym przykładzie do naszego pliku HTML jest podłączany plik CSS styles.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

Utwórz i podłącz do wszystkich swoich stron plik styles.css.