Основи роботи з мовою CSS

Ми з вами вже розібрали основні теги мови розмітки HTML і тепер настав час навести красу. Хотілося б мати можливість змінювати колір тексту, його розмір, фон та багато іншого. Це робиться за допомогою мови CSS.

Як правило, CSS команди (стилі) зберігаються в окремому файлі, який підключається спеціальним тегом до всіх HTML сторінок нашого сайту.

Перевага такого підходу полягає в тому, що CSS файл один, а HTML файлів може бути будь-яка кількість, хоч тисяча. Якщо ми зробимо зміну в одному місці файлу CSS, наприклад, пофарбуємо всі абзаци в червоний колір, то ці зміни застосовуються на всій тисячі HTML сторінок, до яких підключено наш CSS файл. Дуже зручно та швидко.

Файл зі стилями повинен мати розширення .css. Щоб підключити такий файл до HTML-сторінки, у тезі head слід написати таку конструкцію:

<link rel="stylesheet" href="ім'яФайлу.css">

В наступному прикладі до нашого HTML файлу підключаєтся CSS файл styles.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Це заголовок тайтл</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			Це абзац з текстом.
		</p>
	</body>
</html>

Створіть та підключіть до всіх ваших сторінок файл styles.css.

Як працювати з CSS

Кожному тегу HTML відповідає так званий селектор CSS. Наприклад, тегу <p> відповідає CSS селектор p, за допомогою якого ми можемо звернутися до всіх абзаців HTML сторінки і, наприклад, пофарбувати їх усіх одночасно у червоний колір.

Після селектора слід ставити фігурні дужки, всередині яких слід писати CSS властивості. Властивості і задають колір, розмір шрифту та інші цікаві речі. Їх слід писати у такому форматі: ім'я властивості, потім двокрапка, потім значення цієї властивості (наприклад, властивість - це колір, а "червоний" - це значення). Потім потрібно поставити крапку з комою і можна писати наступну властивість.

Давайте, наприклад, пофарбуємо всі абзаци в червоний колір:

p {
	color: red;
}

У вашому файлі styles.css розмістіть код, який розфарбовує абзаци в червоний колір. Відкрийте сторінки вашого сайту в браузері та переконайтесь у тому, що всі абзаци стали червоними.

Інші значення для кольору

Крім ключового слова red, що задає червоний, можна використовувати й інші англійські слова для кольору, наприклад, green - зелений, blue - блакитний, yellow - жовтий, orange - помаранчевий, black - чорний, white - білий.

Використовуючи відповідні селектори, розфарбуйте заголовки h1 в зелений колір, заголовки h2 у блакитний, заголовки h3 - у червоний, а абзаци - у помаранчевий.