Курс HTML5, CSS3, SEO, Wordpress и Photoshop

Основы CSS3

В предыдущих уроках мы изучали HTML тэги. Мы изучили многие тэги для вставки — абзаца, ссылок, списков, изображении, заголовков и даже создали простенькое меню.

Однако всего этого мало, так как страницы получались не презентабельными, не хватало стилей. Этим и занимается CSS (CSS это аббревиатура от английских слов Cascading Style Sheet’s что переводится как каскадные стили таблиц).

Для того чтобы подключить к нашим HTML страницам CSS нужно сделать следующее:

1) Создать текстовый документ style.css в блокноте:

Создание и сохранение CSS документа
Обратите внимание что мы даем файлу — расширение: .css, кодировку: utf-8 и тип файла: Все файлы.

И написать внутри этого файла style.css следующее:

body {
background: red;
}

2) Создать в одной папке с файлом style.css HTML документ page.html с таким содержанием:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<head>
<body>
</body>
</html>
Теперь посмотрите на результат в браузере:
Фон в CSS
Как видно экран стал красным!

Упражнение

Теперь вставьте в HTML документ page.html несколько абзацев и заголовков h1, h2. А затем в файле style.css вставьте следующий код и посмотрите на результат в браузере:
p {
background: blue;
}
h1 {
background: green;
}
h2 {
background: yellow;
}