Уроки CSS

Корисні посилання:

• Практикум по CSS;
• Редактор Visual Studio;
• Редактор Sublime Text.

Інформація про CSS

CSS є мовою, що відповідає за оформлення сторінки. Він дозволяє вказати стильове оформлення кожного з HTML елементів. Також за рахунок CSS можна вказувати стилі для файлів з XML-розміток: XUL, SVG та інші.

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

Написання CSS

CSS-стиль – це певне правило, що підказує веб-браузеру правила форматування для кожного елемента. Під форматуванням мається на увазі: зміна кольору тексту, фону елемента, шрифту, тіней, позиції на екрані тощо.

Щоб створити робочий CSS-стиль, потрібно правильно вказати 2 основні частини:

• Селектор – вказує цільовий елемент, якому призначається стиль;
• Блок стилів – вказує браузеру потрібні правила форматування.

Приклад:

div {
	background-color:red;
	width: 100px;
	height: 60px;
}

У прикладі селектором є тег div. Це означає, що всі стилі в блоці будуть застосовані до кожного елемента div на сторінці.

У фігурних дужках завжди вказуються стилі. Вони повинні стояти строго у дужках, а не за їх межами. У наведеному прикладі на виході вийде div блок з червоним тлом, шириною 100 і висотою 60 пікселів.

Усі команди мають властивість, а за ним йде значення. Ілюстрація на основі того ж прикладу:

background-color:red; /* , де
background-color – це властивість;
red – значення. */

Властивість задає певний стиль. Подібних властивостей дуже багато, у нашому випадку – це колір тла. Значення завжди вказується після двокрапки. За прикладом background-color встановлено значення red. Таким чином колір фону перефарбовується в червоний.

По завершенню команди завжди ставиться крапка з комою. Цей символ є дільником, який відокремлює між собою команди.

Список різних стилів називається таблицею стилів або CSS. Є кілька різних способів вказівки стилів. 

Атрибути HTML та стилі CSS

Більшість HTML-елементів підтримують встановлення стилів за допомогою атрибутів. Наприклад, окремим елементам є можливість вказати атрибути width та height (ширина з висотою). Атрибути вказуються прямо у HTML-файлі. З ними треба бути обережними.

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

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

Перевірка валідності

Під час створення стилів нерідко з'являються неясності щодо правильності їх вказівки та коректності. В даному випадку на допомогу приходить валідатор CSS, доступний за цим посиланням.

План курсу

У курсі вивчення мови стилів CSS для початківців ми навчимося прописувати CSS3 стилі, вивчимо основи CSS, навчимося працювати з селекторами і за підсумком розробимо безліч міні проектів на HTML і CSS.

До кінця відеокурсу CSS у вас будуть стійкі знання в самій мові та розуміння як можна зробити красивий веб-сайт.

Програма навчання

Також на нашому сайті є більш поглиблена програма з вивчення розробки веб-сайтів. Ознайомитися з програмою навчання з Front-end можна за цим посиланням і з програмою навчання Full Stack за цим посиланням.