---
title: Learn to style HTML using CSS
slug: Learn/CSS
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Debugging
  - Landing
  - NeedsContent
  - NeedsTranslation
  - Style
  - Topic
  - TopicStub
  - length
  - specificity
translation_of: Learn/CSS
---
<div>{{LearnSidebar}}</div>

<p class="summary">Cascading Stylesheets — або {{glossary("CSS")}} — це перша технологія, яку слід почати вивчати після {{glossary("HTML")}}. Хоча HTML використовується для визначення структури та семантики вашого вмісту, CSS використовується для його стилізації та викладки. Наприклад, ви можете використовувати CSS, щоб змінити шрифт, колір, розмір та інтервал вашого вмісту, розділити його на кілька стовпців або додати анімацію та інші декоративні функції.</p>

<h2 id="Шляхи_навчання">Шляхи навчання</h2>

<p>Ви повинні вивчити основи HTML, перш ніж спробувати будь-який CSS. Рекомендуємо спочатку опрацювати наш Вступ до модуля HTML. У цьому модулі ви дізнаєтесь про:</p>

<ul>
 <li>CSS, почніть з модуля <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></li>
 <li>Більш продвинуті <a href="/en-US/docs/Learn/HTML#Modules">HTML м</a>одулі</li>
 <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, і як використовувати його для додавання динамічної функціональності веб-сторінкам</li>
</ul>

<p>Після того, як ви зрозумієте основи HTML, рекомендуємо вам вивчити HTML і CSS одночасно, рухаючись вперед і назад між двома темами. Це тому, що HTML набагато цікавіше і набагато цікавіше вчитися, коли ви застосовуєте CSS, і ви не можете навчитися CSS, не знаючи HTML.</p>

<p>Перш ніж розпочати цю тему, ви також повинні ознайомитись з використанням комп’ютерів та пасивним використанням Інтернету (тобто, просто переглянувши його, споживаючи вміст). Ви повинні мати базове робоче середовище, налаштоване як детально<br>
 в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення</a> та зрозуміти, як створити та керувати файлами, як це детально описано в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> — обидва вони є нашими частинами <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> повний модуль для початківців.</p>

<p>Рекомендується опрацювати <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> перш ніж перейти до цієї теми. Однак це не зовсім необхідне, оскільки значна частина того, що розглядається в статті про основи CSS, також висвітлено в нашому модулі <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, хоча і набагато детальніше.</p>

<h2 id="Модулі">Модулі</h2>

<p>Ця тема містить наступні модулі в запропонованому порядку для роботи над ними. Ви обов'язково повинні почати з першого.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></dt>
 <dd>Цей модуль розпочинає роботу з основами роботи CSS, включаючи використання селекторів та властивостей; написання правил CSS; застосування CSS до HTML; визначення довжини, кольору та інших одиниць у CSS; контроль каскаду та успадкування; розуміння основ моделі коробки; та налагодження CSS.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt>
 <dd>Тут ми розглядаємо основи стилізації тексту, включаючи встановлення шрифту, жирності та курсиву; інтервал між рядками та літерами; і скидання тіней та інших функцій тексту. Ми округляємо модуль, дивлячись на застосування спеціальних шрифтів до вашої сторінки та стилістичні списки та посилання.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Стильні коробки</a></dt>
 <dd>Далі ми розглянемо вікна стилізації, один із основних кроків щодо створення веб-сторінки. У цьому модулі ми резюмуємо модель коробки, потім переглядаємо керування макетами коробки, встановлюючи накладки, межі та поля, встановлюючи власні кольори фону, зображення та фантазійні функції, такі як тіні для крапель та фільтри на коробках.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS макет</a></dt>
 <dd>На даний момент ми вже розглядали основи CSS, як стилювати текст та як стилізувати та маніпулювати полями, у яких розміщений ваш вміст. Тепер прийшов час розглянути, як розташувати вікна в потрібному місці по відношенню до вікна перегляду та один до одного. Ми забезпечили необхідні передумови, тому тепер ми можемо зануритися в глиб CSS-макета, переглядаючи різні налаштування дисплея, сучасні інструменти компонування, такі як flexbox, CSS-сітка та позиціонування, а також деякі застарілі методи, про які ви все ще можете знати.</dd>
 <dt>Чуйний дизайн (TBD)</dt>
 <dd>Завдяки такій кількості різних типів пристроїв, які сьогодні можуть переглядати Інтернет, <a href="/en-US/docs/Web/Guide/Responsive_design">чуйний веб-дизайн</a> (RWD) стала основним навиком веб-розробки. Цей модуль буде охоплювати основні принципи та інструменти роботи RWD; поясніть, як застосувати різні CSS до документа залежно від функцій пристрою, таких як ширина екрана, орієнтація та роздільна здатність; та вивчити технології, доступні для обслуговування різних відео та зображень залежно від таких функцій.</dd>
</dl>

<h2 id="Вирішення_поширених_проблем_CSS">Вирішення поширених проблем CSS</h2>

<p><a href="/en-US/docs/Learn/CSS/Howto">Використовуйте CSS для вирішення загальних проблем</a> надає посилання на розділи вмісту, що пояснюють, як використовувати CSS для вирішення дуже поширених проблем під час створення веб-сторінки.</p>

<p>Ви спочатку застосовуватимете кольори до елементів HTML та їх фонів; зміни розміру, форми та положення елементів; і додавати та визначати межі елементів. Але не так багато, що ти не зможеш зробити, коли добре зрозумієш навіть основи CSS. Одна з найкращих речей щодо вивчення CSS - це те, що, як тільки ви знаєте основи, зазвичай у вас є гарне відчуття того, що можна, а чого не можна зробити, навіть якщо ви ще не знаєте, як це зробити!</p>

<h2 id="Дивіться_також">Дивіться також</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS">CSS в MDN</a></dt>
 <dd>Основна точка входу для CSS-документації на MDN, де ви знайдете детальну довідкову документацію щодо всіх функцій мови CSS. Хочете знати всі цінності, які може спричинити властивість? Це гарне місце.</dd>
</dl>