Позиціонування елементів, розташування на сторінці
Зовнішній та внутрішній відступи
| Властивість | Опис |
| Margin: auto/Величина | Задає зовнішні відступи для елементів. |
| Margin-bottom, margin-left, margin-right, margin-top | Задає нижній / лівий / правий / верхній зовнішній відступ для елемента. |
| Значення: auto - елемент буде центрирован по горизонталі. Величина —Вказує розмір поля в (px). Може містити від одного до чотирьох значень, розділених пробілами. | |
| Приклад: margin:10px 5px 15px 20px; margin:10px 5px 15px; margin:10px 5px; margin:10px; |  - одне, два, три або значення для усіх сторін
|
| Padding: [значення] | Встановлює внутрішні відступи в елементі. |
| Padding-bottom, padding-left, padding-right, padding-top | Задає нижній / лівий / правий / верхній відступ (внутрішнє поле) для елемента. |
| Приклад: padding:10px 5px 15px 20px; padding:10px 5px 15px; padding:10px 5px; padding:10px; |  - одне, два, три або значення для усіх сторін
|
Фон (тло)
| Властивість | Опис |
| background | Встановлює декілька або всі значення властивостей фону |
| Background-color: color / transparent | Встановлює колір фону для елемента. Transparent —прозорий фон |
| Background-image: url('шлях до файлу') | Встановлює фонове зображення в елементі. |
| background-repeat | Задає, як фонове зображення буде повторюватися на екрані. |
| No-repeat - без повторень; Repeat - повторюється по горизонталі і вертикалі; Repeat-x- повторюється тільки по горизонталі. Repeat-y - повторюється тільки по вертикалі. |
Рамка и контур
| Властивість | Опис |
| Borderborder-width border-style border-color | Дозволяє використовувати основні властивості границь в одній властивості. |
border-style -Вказує стиль для рамки, який визначається одним із ключових слів: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden і none. Значення hidden і none  є взаємозамінними, вони вказують, що рамка відсутня.
border-width - Вказує ширину для рамки
Border-color - Задає колір для рамки
| |
| Border-radius: значення (px) | Дозволяє змінити форму кутів області на сторінці. |
Розмір будь-якого елементу, блоку
| Властивість | Опис |
| Height: значення / % / auto | Встановлює фіксовану висоту. |
| Width: значення / % / auto | Встановлює фіксовану ширину. |
Позиціонування елементів, розташування на сторінці
| Властивість | Опис |
| Bottom: auto/величина | Вказує напрямок зсуву від нижнього краю. |
| Top: auto / величина | Вказує напрямок зсуву від верхнього краю. |
| Left: auto / величина | Вказує напрямок зсуву від лівого краю. |
| right: auto / величина | Вказує напрямок зсуву від правого краю. |
| auto - Елемент залишається на своєму місці. Величина - Визначає величину зміщення (px). | |
| Clear: none / left / right / both | Вказує з якого боку елемента не допускаються плаваючі елементи. |
| Left - Плаваючі елементи не дозволені з лівого боку. Right - Плаваючі елементи не дозволені з правого боку. Both - Плаваючі елементи не дозволені з обох сторін. None - наявність плаваючих елементів з обох сторін. | |
| display: [значення]; | Вказує, як буде відображатися елемент в браузері. |
| none - Елемент не відображається на екрані і під нього не резервується місце на сторінці. Bloc - Елемент сприймається браузером як блоковий, тобто має розрив рядка до і після елемента і займає всю доступну ширину, застосовуються властивості для блокових елементів. | |
| Float: none / left / right | Визначає чи буде елемент плаваючим (обтікання елементів) |
| left - Елемент плаває зліва. Right - Елемент плаває зправа. None - Елемент не являється плаваючим і буде відображатися там, де він розташований. | |
| position: static / absolute / fixed / relative | Визначає метод позиціонування елементів. |
| Static: - Елемент статичний, не змінює положення. Інші елементи не перекривають його. Absolute: - Інші елементи на веб-сторінці можуть перекривати поточний елемент. Fixed: - Елемент з фіксованим позиціонуванням при прокрутці вмісту у вікні браузера, залишається на місці, тобто НЕ прокручується з рештою вмісту. Relative: - Додавання властивостей left,top, right і bottom змінює позицію елемента і зрушує його в ту або іншу сторону від первісного розташування. | |
| Visibility: visible / hidden / collapse | Визначає, чи є елемент видимим, дозволяє приховувати елементи, але при цьому залишати порожній простір на його місці, рівне розміру прихованого елемента. |
| visible - Вказує, що елемент буде відображено на сторінці. Hidden - Вказує, що елемент буде приховано. Collapse - Використовується тільки з елементами таблиці. Приховує рядок або стовпець, при цьому не змінюючи загальний вигляд таблиці. Порожній простір стає доступним для іншого вмісту. | |
| Overflow: auto / hidden / scroll / visible | управляє відображенням змісту блокового елемента, якщо воно цілком не поміщається і виходить за область заданих розмірів. |
| Visible -Відображається весь вміст елемента, навіть за межами встановленої висоти і ширини. Hidden -Відображається тільки область всередині елемента, інше буде приховано. Scroll -Завжди додаються смуги прокручування. Auto -Смуги прокручування додаються тільки при необхідності | |
| box-sizing: content-box / border-box / padding-box | Застосовується для зміни алгоритму розрахунку ширини і висоти елемента. ширина блоку складається з ширини контенту (width), значень відступів (margin), полів (padding) і меж (border). Аналогічно і висота блоку. Властивість box-sizing дозволяє змінити цей алгоритм, щоб властивості width і height задавали розміри не контенту, а розміри блоку. |
| Content-box -при цій властивості width і height задають ширину і висоту контенту і не включають в себе значення відступів (margin), полів і границь(border). Border-box - при цій властивості width і height включають в себе значення полів і меж, але не відступів (margin). Padding-box - при цій властивості width і heightвключають в себе значення полів, але не відступів (margin) і границь (border). |
Тіні і прозорість
| Властивість | Опис |
| box-shadow: x y радіус розмиття колір box-shadow: 0 0 10px yellow; | Додає ефект відкидання тіні до елементу. |
| opacity: <число від 0 до 1>; opacity: 0.5; /* Напівпрозорий елемент */ | Встановлює рівень прозорості елементу. |
| Text-shadow: x y “радіус розмиття” колір; text-shadow: 1px 1px 2px black; | Створює тінь до тексту. |
Списки
| Властивість | Опис |
| list-style | Управляє маркером в списках. |
| list-style-image: url('шлях до файла-картинки') | Замінює маркери списків на зображення. |
| list-style-type | Вказує вид маркера в списку: circle / disc / square; або вид номера: decimal (1,2,3...)/ decimal-leading-zero(01,02,03... / lower-alpha (a, b, c, d,...)/ lower-greek (, , , ,...)/ lower-roman (i, ii, iii, iv, v,...). / upper-alpha (A, B, C, D,...)./ upper-roman (I, II, III, IV, V,...)./ none (без номера) |
Текст і шрифт
| Властивість | Опис |
| Color: <значення коліру> | Змінює колір тексту. |
| Direction: ltr / rtl | Визначає напрямок написання тексту. Ltr - напрямок зліва направо. Rtl — напрямок справа наліво |
| letter-spacing: <розмір> / normal | Контролює відстань між символами в тексті. |
| Line-height: <розмір> / % / normal | Визначає міжрядковий інтервал (інтерліньяж). |
| Text-align: center / justify / left / right | Вказує спосіб вирівнювання вмісту по горизонталі. |
| Text-decoration: line-through / overline / underline | Додає деякі елементи декорування до тексту. Line-through— перекреслений текст. Overline — лінія над текстом. Underline — підкреслений текст. |
| Text-indent: <розмір> / <проценти> | Визначає відступ першого рядка в тексті елемента. |
| text-transform: capitalize / lowercase / uppercase / none | Контролює використання малих і великих літер в тексті. Capitalize — Перший символ кожного слова в реченні буде Заголовковим. Lowercase - Всі символи тексту стають рядковими (нижній регістр). Uppercase - Всі символи тексту стають прописними (верхній регістр). None - Не змінюється регістр символів. |
| Word-spacing: <розмір> / normal | Визначає ширину пробілів між словами. |
| Word-wrap: normal / break-word | Дозволяє переривати довгі слова для переносу на інший рядок. Normal - рядки не переносяться або переносятья в тих місцях, де явно задано перенос (за допомоги <br>). Break-word - Перенос рядків додається автоматично, щоб слово вмістилось в задану ширину блоку. |
| Font-family: <шрифт> | Вказує шрифт або сімейство шрифтів для тексту. serif — шрифти із зарубками, типу Times New Roman; · sans-serif — рублені шрифти без зарубок, типу Arial; · cursive — курсивні шрифти; · fantasy — декоративні шрифти; · monospace — моноширинні шрифти, типу Courier. |
| Font-size: розмір (pt) | Вказує розмір для шрифту. |
| font-weight: bold / bolder / lighter / normal / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 | Задає ширину символів тексту. bold - напівжирне накреслення, normal - нормальне накреслення. допустимо використовувати умовні одиниці від 100 до 900. Значення bolder і lighter змінюють жирність щодо насиченості попереднього шрифту, відповідно, у більшу і меншу сторону. |
Використання псевдокласів: