Привет, CSS мир!

После обсуждения, что такое CSS и почему его стоит использовать, вы вероятно хотите увидеть его в действии. Если вы читаете это в своем веб-браузере, то вы уже можете видеть ту магию, которую творит CSS, начиная от размера и цвета заголовков, кончая блоками с примерами программного кода, меню, списками и много чем еще, если у каких-то элементов на странице есть фон, рамка, разный размер текста или разные цвета, то это скорее всего благодаря CSS. Однако, это может быть немного слишком сразу понять, как все это устроено, поэтому давайте начнем с азов.

Всю историю программирования, каждое руководство начинается с примера выводящего сообщение "Привет, мир!", с целью показать, как вывести текст "Привет, мир!" на экран пользователя. Однако, это легко сделать на чистом HTML, без использования CSS, поэтому мы не просто выведем текст, а еще изменим его цвет:

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

Вот и все, мы написали наше первое CSS правило, которое применяется к тегу H1 и меняет цвет текста в нем, используя свойство "color", задавая ему значение с названием цвета "DeepSkyBlue".

Резюме

Как вы могли заметить, CSS очень простой язык, но боюсь, что вы не до конца поняли наш первый пример. В следующей главе мы обсудим, что на самом деле значит CSS-код в этом примере и почему он написан именно так.