Тема 3 Введення в CSS

Введення в `CSS`

Пояснення:

Стилізація сторінки за допомогою CSS

Якщо для тегу h1 задати колір у style, то всі <h1> на сторінці автоматично будуть мати цей колір.

Атрибут class в тегах - селектор для style

Задає стильовий клас, який дозволяє зв'язати певний тег зі стильовим оформленням.
У значенні допускається вказувати відразу кілька класів, розділяючи їх між собою пробілом.

Клас(class) - властивість(атрибут, селектор) для стилізацї.

Стиль шрифту(Сім'я шрифтів) - font-family та розмір тексту - font-size

font-family - встановлює сімейство шрифту, яке буде використовуватися для оформлення тексту вмісту.
font-size - визначає розмір шрифту(тексту) елемента.

font-weight - встановлює насиченість шрифту

Значення встановлюється від 100 до 900 з кроком по 100.
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Або використовувати значення bold - жирний текст.

Список шрифтів

Список шрифтів, які вам будуть потрібні:

Назва	Результат на екрані	Назва	Результат на екрані
Arial	ABCabc	Arial Black	ABCabc
Tahoma	ABCabc	Verdana	ABCabc
Lucida Sans Unicode	ABCabc	Trebuchet MS	ABCabc
Comic Sans MS	ABCabc	Monotype Corsiva	ABCabc
Mistral	ABCabc	Courier New	ABCabc
Lucida Console	ABCabc	Consolas	ABCabc
Georgia	ABCabc	Sylfaen	ABCabc
Century	ABCabc	Garamond	ABCabc

Таблиця:

№	Тема	Приклад коду	Підсумок
1	Використання class	`<head> <style> .game { color: green;} </style> </head> <body> <p class="game">Я граю у Minecraft!</p> </body>`	Атрибут class дає ім’я елементу (наприклад, game). У CSS через крапку .game ми описуємо, як цей клас буде виглядати.
2	Сімейство шрифтів	`<head> <style> .funny { font-family: 'Comic Sans MS', cursive; } </style> </head> <body> <p class="funny"> Minecraft виглядає кумедно!</p> </body>`	Властивість font-family змінює шрифт. Якщо першого немає, браузер вибирає запасний.
3	Розмір тексту	`<head> <style> .big { font-size: 30px; } .small { font-size: 12px; } </style> </head> <body> <p class="big">Гігантський Creeper!</p> <p class="small">Маленький зомбі...</p> </body>`	font-size задає розмір тексту (наприклад px, em, %, rem).
4	Насиченість шрифтів	`<head> <style> .bold { font-weight: bold; } .light { font-weight: 200; } </style> </head> <body> <p class="bold">Діаманти знайшов!</p> <p class="light">Але вони майже непомітні...</p> </body>`	font-weight робить текст жирним (bold) або задає ступінь насиченості. Значення встановлюється від 100 до 900 з кроком по 100.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC