Как уже говорилось, html нужен только чтобы задать определенную структуру странице и добавлять на нее некоторые элементы.
С помощью языка CSS мы можем очень гибко оформлять нашу страницу придавая ей различные элементы дизайна, то есть привести ее к такому внешнему виду, чтобы ее не стыдно было выложить в интернет.
Разделение CSS и HTML – это попытка разделить код, которым выполняется дизайн страницы и код, которым выполняется придание ей структуры.
CSS. Базовые концепции
Весь css код обычно пишется в отдельном файле, обычно с именем style.css. Как видим, css код пишется в файле со своим собственным особым форматом – css.
В отдельном файле css код пишется, чтобы его потом можно было применить ко многим html страницам. То есть можно задавать дизайн сразу многим страницам в одном файлике style.css.
Давайте создадим css файл со стилями и html файл страницы в папке HTML.
Стили из файла style.css будут применены к файлу pageWithCSS.html.
Дизайн(стили) придается конкретным html тегам с помощью свойств.
Чтобы придать конкретному html тегу страницы некоторые свойства, в css файле указывается тег, которому мы хотим придать их, а потом в фигурных скобочках эти свойства.
Теперь как же придать только что заданные свойства нашей pageWithCSS.html странице?
Большой заголовок
Заголовок поменьше
Ваше маленький заголовок жесть
Тестируем написанный HTML+CSS код
Давайте откроем только что написанную страницу в браузере.
Как видим, свойства определенные в файле style.css были успешно применены к тегам на странице pageStructure.html.
Текст тегов h1, h2 стал жирным и принял шрифт Brush Script MT. Тег h3 стал жирным и принял шрифт ‘Courier New’, monospace. У картинки же появились закругления и рамка красного цвета. То есть всё, как мы писали в css файле.