HTML существует только для разметки контента, но не несет в себе никакой стилизации элементов. За это отвечает язык CSS. Все визуальные отличия тегов друг от друга мы видим только благодаря тому что браузер имеет свою таблицу стилей которая работает по умолчанию. Как вы уже поняли, для того чтобы мы могли стилизовать элементы сами, нам нужно будет использовать язык CSS. Разберемся как его внедрить на нашу страницу.
Способ #1 - inline styles
Одним из общих атрибутов для каждого тега, является атрибут style, внутри которого мы и можем писать наш CSS код.
<h1 style="color: red">Some Title - <a href="#">link</a></h1>
Способ #2 - тег <style>
Внутри тега <style> мы можем писать стили, идентифицируя нужные нам теги по их атрибутам, именам и тд. (селектору тега). Тег <style> должен быть расположен внутри тега <head>.
<head>
<style>
div {
max-width: 1200px;
margin: 0 auto;
background-color: antiquewhite;
padding: 10px 20px;
}
</style>
</head>
Открыть на CodePen
Способ #3 - отдельный файл
Самое лучшее что можно придумать, это подключение отдельного CSS файла к нашему проекту. Делается это через тег <link>, который также должен быть вложен внутрь тега <head>.
Атрибуты:
rel - должен иметь значение stylesheet
href - ссылку или путь к файлу .css
Тег <link> имеет больше атрибутов, на данном этапе их рассматривать не будем.
<link rel="stylesheet" href=".././css/style.css">
Способ #4 - отдельный файл через тег <style>
Не рекомендую вам так делать, лучше старайтесь всегда когда возможно подключать свои .css файлы через тег link. Такой способ практически ничем не отличатся от подключения через <link> кроме синтаксиса, но он читается намного хуже и усложняет понимание.
<style>
@IMPORT '.././css/style2.css';
</style>
P.S. Больше уроков у меня на канале
P.P.S. Файлы с урока
