Введение в веб-разработку с HTML, CSS, JavaScript

И использование цвета, позиционирования, размера и прочего является частью этого оформления.

Каскадные таблицы стилей, или CSS, – это технология, обеспечивающая возможность стилизации и оформления контента в Интернете.

В качестве примера можно посмотреть сайт csszengarden.com, где один и тот же HTML файл с помощью CSS выглядит фантастически по-разному.

CSS или каскадные таблицы стилей работают следующим образом, они связывают определенные правила с элементами HTML.

Эти правила управляют тем, как должно отображаться содержимое указанных элементов.

И хотя стилизация всей веб-страницы может быть довольно сложным процессом, определить простое правило CSS довольно просто.

Правило CSS состоит из селектора, в данном случае это p, тэг абзаца, и это говорит о том, что это правило должно применяться к содержимому каждого тэга абзаца на всей HTML-странице.

За селектором следуют открывающие и закрывающие фигурные скобки. И внутри этих фигурных скобок у нас есть объявление CSS, которое состоит из двух частей, свойства и значения.

Имя свойства предопределено спецификацией CSS, и для каждого свойства существует определенное количество предопределенных значений.

Каждое свойство отделяется от значения двоеточием и заканчивается точкой с запятой.

С технической точки зрения, точка с запятой не является обязательным требованием, но это лучшая практика, и вы должны всегда ее использовать.

Каждое правило CSS может состоять из нескольких объявлений.

Теперь, набор этих правил CSS называется таблицей стилей.

В этом HTML-документе у нас есть заголовок h1, пара заголовков h2 и пара абзацев между ними, обозначенные тегом абзаца p. И что мы хотим сделать, так это придать этим элементам индивидуальный стиль. И мы разместим таблицу стилей прямо в разделе заголовка нашего HTML-документа.

И в этой таблице мы видим тег абзаца. И мы изменим его цвет на синий, размер шрифта на 20 пикселей и ширину на 200 пикселей, что означает, что он будет занимать область экрана шириной 200 пикселей.

Далее для тега h1, мы определяем зеленый цвет и увеличиваем его размер шрифта, и мы также выравниваем его по середине экрана.

Так эта страница выглядит в браузере.