Урок 4. Знакомство с CSS 🎈

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

Начнём с того, что CSS расшифровывается, как Cascading Style Sheets, что означает каскадные таблицы стилей. То есть если HTML - язык разметки, с помощью которого описывается содержимое страницы, то CSS описывает внешний вид страницы.

Чаще всего для оформления страницы создается отдельный файл (или несколько отдельных файлов) с расширением .css. Но можно код CSS использовать и в самом файле HTML между тегами ˂style˃.

Правила CSS определяют стиль элемента или группы элементов. Выглядит это так:

селектор {
  свойство:значение;
  свойство: значение;
  свойство: значение;
}

Такие пары свойство: значение; называются декларациями.Декларации между собой разделяются точкой с запятой. Селектор определяет на какие элементы будут распространяться правила. Разберем следующие правила:

p {
   color: blue;
   font-family: Helvetica;
   font-size: 10pt;
  }

Это правило говорит о том, что текст во всех параграфах (т.е. содержащийся между тегами ˂p˃) должен быть синего цвета, размер текста должен быть 10 точек, а в качестве шрифта нужно использовать шрифт Helvetica.

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

Если описания внешнего вида вашей страницы вы выносите в отдельный css-файл, то его необходимо подключить в файле с разметкой. Это делается в "голове" страницы с помощью тега link:

В прошлый раз мы с вами сделали простенькую страничку, на которой отображается "Привет, Голос!". Давайте её немного украсим. Изменим цвет фона на любой какой вам нравится (коды разных цветов можно найти, например, здесь) и изменим шрифт заголовка. Можете, конечно, еще сами поэкспериментировать, испытать возможности этой парочки: HTML и CSS.

Ну а я буду рада, если вы захотите поделиться своими победами со мной. Жду вас в Telegram или здесь в комментариях.

В следующем уроке я расскажу о классах, идентификаторах и о том, как их использовать в CSS.