Мы сделали несколько статей-уроков по CSS 3, а именно Как сделать градиентный background (фон) с помощью 1px рисунка и с помощью только CSS 3 и Как сделать скругленные углы с помощью css, но взяв во внимание критику друзей, решили несколько изменить подход. Интернет стремительно развиваеться, число сайтов растет в геометрической прогрессии, все болльше людей хотят научиться создавать сайты, и стать веб мастерами. Но в каждом деле нужен системный подход,  начав создавать уроки CSS 3  и HTML5, мы забежали немножко вперед, забыв про ту часть людей которые только, только начали изучать SS 3  и HTML5. Поэтому сегодня у нас будет Урок №1| С чего начать?

Уроки CSS 3  и HTML 5 с нуля

Урок №1| С чего начать? 

Для начала изучения CSS 3  и HTML5, нужно сделать следующее:

1) Создать новую папку, и переименовать ее например на Test, название значения не имеет.

2) Создать в паке  Test  «новая папка» и переименовать ее в Images

3) Создать в паке  Test  «новая папка» и переименовать ее в CSS

3) Создать два новых текстовых документа, это обычные фаилы блокнота, с расширение «.txt».У вас должно получиться два файла: «Новый текстовый документ.txt» и «Новый текстовый документ(2)».txt

4) Переименовать Новый текстовый документ.txt в index.html

5) Переименовать Новый текстовый документ(2).txt в styles.css

6) Переместить styles.css в папку CSS

Теперь у нас есть все, что нужно для начала обучения CSS 3  и HTML5, кроме редактора, лично я использовал разные редакторы, но остановился на Dreamweaver CS5.5, но так как это платная програма, рекомендую еще отличную бесплатною программу Notepad++.

Итак начнем, нам у нас есть  index.html, это главная страница, у нас есть папка CSS, с файлом  styles.css, в этом файле будут стили css. Для начала нам нужно создать начальную структуру в  index.html, для этого открываем его редактором (этот файл можно открыть любым текстовым редактором начиная с блокнота, но специальные редакторы подсвечивают теги что существенно облегчает работу) наберите в свой index.html мой код, можно без коментариев, они для понимания, код вы найдете ниже.  Коментарии задаються в вот таком символе < !—коментарии —>(без пробела) писать их не обязательно, это как подсказки.

<!doctype html> <!--Тег DOCTYPE (что означает "объявление типа документа")- указываетть браузеру, 
как правильно отображать документ и по какой схеме -->         
<head>
<meta charset="UTF-8"><!--Кодировка сайта-->
<title>Уроки от WCDT</title><!--Название сайта, заголовок который отображаеться в овкладке в браузере-->
<link rel="stylesheet" type="text/css" href="css/styles.css"/><!--Эта строчка подключает стиль-->
</head>
<body>
<h1>Это моя первая html страница</h1>
</body>
</html>

Сохраните свой index.html с этим кодом, позлравляю Вы, только что создали свою первую html страницу, даже круче, фактически вы создали сайт, состоящий из одной страницы, и его хоть сейчас можно разместить в интернете.

создаем  index.html и подключаем style.css

Так как мы не просто создали html страницу, а еще и подключили к ней стиль, давайте что нибудь в нем напишем. Итак, окройте файл styles.css и скопируйте туда два стиля, которые приведены ниже, коментарии подсказки в комплекте, обратите внимание что CSS коментарии задаются иначе чем в html, вот так /*коментарий*/

body {background:#090;text-align:center;} /* тут задано цвет фона body, и выравнивание текста по центру*/
body h1 {color:#CC0000;} /*цвет фона body */

И так  из этого Вы урока вы научились создавать  html страницу в новом стандарте HTML 5, подключать к ней стиль. Также в папке Demo создана необхомая структура  которая пригодиться Вам для дальнейшего освоения CSS 3  и HTML5. Каждому, новичку важно запомнить, что  CSS стиль писать нужно только в  styles.css, не стоит прописывать стиле в index.html. Ну что ж, на этом Урок №1 по изучения CSS 3  и HTML5, можно считать завершенным!