Оформление веб-страницы с помощью CSS

HTML задаёт структуру страницы, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — её внешний вид. Разделение содержания и оформления облегчает управление страницей: один CSS-файл может изменить цвет и шрифт всего сайта. Правило CSS состоит из двух частей: селектора, указывающего, к какому элементу оно относится, и пар свойство: значение;.

Проще всего задать стиль элементу через атрибут style: <p style="color: blue; font-size: 18px;">Salom</p>. Свойства разделяются точкой с запятой. Часто используемые свойства: color — цвет текста, background-color — цвет фона, font-size — размер шрифта, font-family — гарнитура, text-align — выравнивание (left, center, right).

Чтобы задать один стиль многим элементам, стили выносят в отдельное место. Их записывают в теге <style> внутри <head> или в отдельном файле style.css, который подключают через <link rel="stylesheet" href="style.css">. Селектором может быть имя тега (все элементы p), класс (.card — элементы с class="card") или идентификатор (#menu — единственный элемент с id="menu"). Чаще всего применяют классы.

Каждый элемент представляется в виде «коробки»: содержимое, вокруг него padding (внутренний отступ), border (рамка) и снаружи margin (внешний отступ). Цвет можно задать названием (red), HEX-кодом (#1e88e5) или в виде rgb(30, 136, 229). В дизайне ограничивайте число цветов и оставляйте достаточный контраст между текстом и фоном, чтобы страницу было удобно читать.

Главное

• HTML — структура, CSS — внешний вид.
• Правило CSS состоит из селектора и пар свойство: значение;.
• Стиль задают атрибутом style, тегом <style> или внешним файлом .css.
• Селектор — тег, класс (.имя) или идентификатор (#имя); «коробка» элемента: margin, border, padding.