Добрый день. В это статье рассмотрим варианты как добавить разметку CSS в ваш сайт.
CSS - это каскадная таблица стилей и , говоря простым языком, нужна для того, чтобы структурировать блоки на сайте, применять различные шрифты к тексту, делать различные отступы между блоками, применять различные цвета к блокам и т.д. Если не использовать CSS, то текст на сайте и блоки будут серыми и невзрачными и это оттолкнет посетителей от вашего сайта.
Так же CSS позволяет применять различные разметки страницы под различные экраны устройств. Например, на большом экране Ваш сайт будет выглядеть иначе чем на экранах мобильных устройств.
Как правило, основной css файл подключается в теге head в самом верху основной страницы вашего сайта.
Создадим файл test.html в любом месте вашего компьютера с таким содержимым:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Тут, как раз, в теге head и прописывается ссылка на наш файл style.css. Создадим рядом с файлом test.html наш файл style.css и внесем в него такой текст:
body {
background: red;
}
Вся наша страница окрасится в красный цвет, значит файл style.css успешно подключен и работает.
Так же бывают случаи, когда мы не хотим подключать отдельный файл стилей, и нужно использовать стиль для отдельного объекта. Тогда делаем так:
<html>
<head>
</head>
<body style="background: red;">
</body>
</html>
Мы увидим, что страница так же будет иметь красный фон, а значит все работает.
Так же можно в тег head вставить тег style и внутри описывать стили. Делается так:
<html>
<head>
<style>
body {
background: red;
}
</style>
</head>
<body>
</body>
</html>
И все так же будет работать. Но рекомендую использовать первый вариант с подключением CSS отдельным файлом.