Урок 3: Основи CSS для початківців

CSS (Cascading Style Sheets) — це мова для стилізації HTML-сторінок. Вона допомагає змінювати кольори, розміри тексту, фон та розташування елементів.

Зверніться за порадою

1. Як під'єднати CSS?

Спосіб: Зовнішній файл CSS

Важливо!
Створіть файл `style.css` і під'єднати його до HTML-сторінки.

HTML:

<!DOCTYPE html>
<html lang="uk">
<head>
    <link rel="stylesheet" href="style.css">
    <title>CSS для початківців</title>
</head>
<body>
    <h1>Привіт, світ!</h1>
    <p>Це ваш перший урок CSS!</p>
</body>
</html>

CSS (style.css):

body {
    background-color: #f0f0f0; /* Світло-сірий фон */
    font-family: Arial, sans-serif; /* Зручний шрифт */
}

h1 {
    color: blue; /* Синій заголовок */
    text-align: center; /* Центрування */
}

p {
    color: green; /* Зелений текст */
    font-size: 18px; /* Середній розмір тексту */
}

2. Основні стилі

Колір тексту

color: red; /* Робить текст червоним */

Розмір тексту

font-size: 20px; /* Збільшує текст */

Центрування тексту

text-align: center; /* Вирівнює текст по центру */

Фон

background-color: lightgray; /* Світло-сірий фон */

3. Приклад

Проста сторінка зі стилями:
‍
HTML:

<!DOCTYPE html>
<html lang="uk">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Приклад CSS</title>
</head>
<body>
    <h1>Заголовок</h1>
    <p>Це приклад тексту зі стилями.</p>
</body>
</html>

CSS (style.css):

body {
    background-color: #f0f0f0; /* Світло-сірий фон */
    font-family: Arial, sans-serif; /* Зручний шрифт */
}

h1 {
    color: blue; /* Синій заголовок */
    text-align: center; /* Центрування */
}

p {
    color: green; /* Зелений текст */
    font-size: 18px; /* Середній розмір тексту */
}

4. Висновок

CSS дозволяє створювати стильні та зручні веб-сторінки.
Ви дізналися:

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

Наступні кроки:

Вивчіть селектори CSS для точного налаштування стилів.
Ознайомтеся з блочною моделлю, щоб зрозуміти відступи й розташування елементів.
Експериментуйте, створюючи власні дизайни.

Перші знання CSS уже дозволяють покращити вигляд ваших сторінок!

Попередній урок

Наступний урок