Что такое css и как добавить стили на страницу?

@import

Кроме описанных выше способов, вставлять CSS-код можно ещё с помощью директивы . Она доступна для использования в тегах и CSS-файлах:

CSS

С помощью мы можем импортировать стили из других CSS-файлов. При этом распологать следует в самом начале, до остального CSS-кода. В другом месте эти директивы будут просто проигнорированы:

CSS

URL-адрес CSS-файла можно указывать как в виде строки, так и с помощью функции :

HTML

В можно указать различные условия, при выполнении которых стили из импортируемых файлов должны применяться:

CSS

В этом примере стили из будут применяться только для устройств с небольшим экраном (ширина области просмотра которых меньше или равно ). В остальных случаях, будут браться стили из файла .

Директивы работает очень просто. Браузер при их выполнении просто переходит по указанным URL и загружает стили, содержащиеся в них. Далее проверяет условия и смотрит нужно ли эти стили добавлять. После этого читает остальные правила в этом CSS-файле, и затем уже на основании всех этих стилей отрисовывает страницу.

В примере приведённом выше не смотря на наличие условий браузер всё равно загрузит два этих файла. Так как проверку на заданные условия он выполняет в конце, после их чтения. При этом каждый – это всегда дополнительный запрос на сервер. Вообще использовать в CSS не рекомендуется, так как это может замедлить загрузку страницы.

Но как же тогда разрабатывать стили? Не удобно же все стили создавать в одном CSS-файле. Да, это конечно так. Поэтому веб-разработчики прибегают к различным инструментам, а точнее к сборщикам веб-проектов. Наиболее популярными решениями сейчас являются Webpack, Parcel JS, Gulp и другие. Эти инструменты позволяют не только собрать все стили в один файл, но также выполняют очень много других задач, необходимых при веб-разработке. Поэтому сейчас практически нет веб-проектов, которые не собирались бы с помощью сборщиков.

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» Народная мудрость

Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только четные или нечетные элементы и так далее.

Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию , добавить стили.
3. Селектор по идентификатору. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция .

Рассмотрим все три селектора на реальном примере:

После применения этих стилей получится следующая картина:

• Черный фон секции . Для этого использовали класс и селектор ;
• Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор , поэтому для добавления стилей мы смогли использовать селектор по идентификатору ;
• Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

В реальной разработке не всегда удается пользоваться только этими тремя видами селекторов в том виде, в котором вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберем на примере:

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

Этот селектор комбинирует два уже известных типа:

1. Селектор по классу
2. Селекторы по тегу и

Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки из , который лежит внутри элемента с классом ». В примере это элемент .

Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов. Важно понимать, что такая запись выберет все заголовки второго уровня во всех , которые лежат внутри блока с классом

Давайте немного видоизменим верстку, чтобы это проверить

Важно понимать, что такая запись выберет все заголовки второго уровня во всех , которые лежат внутри блока с классом. Давайте немного видоизменим верстку, чтобы это проверить

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри , которые находятся в блоке с классом .

Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ . Укажем, что нам нужны только те , которые лежат внутри . И нам нужны заголовки, которые находятся внутри этих . Это делается следующим образом:

Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный селектор для заголовков.

Самостоятельная работа

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
• Попробуйте скопировать примеры из этого урока.

Подключение CSS-файла через внешние таблицы

Внешние сценарии стилей указываются в файле с расширением .css. Их можно написать даже в стандартном Notepad. Для подключения файла стилей CSS нужно лишь указать корректное расширение. Инструкции, указанные в нем, аналогичны тем, которые заданы для инлайн-стиля и содержатся в разделе между открывающим тегом <style> и закрывающим </style>:

p {

color: red;

font-size: 3em;

}

Таким образом, в файле CSS можно указывать инструкции, заданные в инлайн-стиле. Аналогичным образом параметры, написанные для приукрашивания, дублируются в файле сценария CSS. Стили, указанные в отдельном файле, при этом могут использоваться для указания параметров, предназначенных для нескольких страниц или даже для всего сайта.

Подключение CSS-файла через внешние таблицы

В HTML-файле необходимо указать вместо тегов <style> путь, по которому размещается внешний файл CSS. Он пишется сразу после тега (<title>), где в предыдущем случае указывались внутренние параметры стиля.

<link href=»styles.css» rel=»stylesheet»>

Инструкция будет иметь следующий вид:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=»utf-8″>

<title>Стили Skillbox</title>

<link href=»styles.css» rel=»stylesheet»>

</head>

<body>

<p>Добрый день!</p>

</body>

</html>

Дарим скидку от 60% на обучение «Инженер-программист» до 10 сентября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

Огромное преимущество внешних таблиц стилей состоит в том, что они могут использоваться для неограниченного числа веб-страниц и сайтов. Следовательно, можно изменением одной инструкции в файле .css задать новые параметры для десятков разделов ресурса. Это гораздо быстрее и удобнее, чем в каждой странице указывать собственный инлайн-стиль.

Чтобы применить параметры стороннего файла стиля к своей странице, напишите в ней абсолютный путь к соответствующему сценарию:

<link href=»https://site.туе/styles.css» rel=»stylesheet»>

Несмотря на все удобства, очевидно, что при таком способе пользователь оказывается зависим от автора указанного в HTML сценария. Если скрипт будет изменен или удален, ссылка на таблицу окажется неработоспособной. Рекомендуется копировать файл .css на собственный сервер, тогда дизайн страницы не будет зависеть от действий сторонних пользователей.

Создание CSS-стилей

Внешний файл стилей

Один из наиболее распространенных способов создания CSS-стилей — использование внешнего файла со стилями. Для этого нужно создать файл с расширением «.css» и разместить его в папке с HTML-файлом. Затем, в теге <head> HTML-документа, нужно добавить ссылку на этот файл с помощью тега <link>.

Пример:

В файле со стилями мы можем определить различные стили для HTML элементов, используя селекторы и свойства стилей. Например:

<style>

h1 {

color: red;

}

</style>

Внутренние стили

Другой способ создания CSS-стилей — использование внутренних стилей. Для этого нужно добавить тег <style> внутри разметки HTML-элемента. Например:

<h1 style=»color: red»>Заголовок</h1>

Inline-стили

Еще один способ создания CSS-стилей — использование inline-стилей. Для этого нужно добавить атрибут style в HTML-элемент. Например:

<p style=»color: blue; font-size: 18px»>Пример текста</p>

Каскадность и наследование

Одной из важных особенностей CSS является его каскадность и возможность наследования свойств. Это позволяет определять стили для групп элементов, а также наследовать некоторые свойства от родительских элементов. Например:

body {

font-family: Arial, sans-serif;

}

h1 {

color: blue;

}

p {

font-size: 16px;

}

ul {

list-style: none;

}

В данном примере, все теги <p> будут иметь свойство font-size: 16px, у тегов <ul> не будет маркера списка, изменятся шрифты для всего текста на странице в селекторе <body>, а у заголовков <h1> будет свойство color: blue.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will «cascade» into a new «virtual» style
sheet by the following rules, where number one has the highest priority:

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and
internal styles and browser defaults.

Ever heard about W3Schools Spaces? Here you can create your own website, or save code snippets for later use, for free.

Get started for free ❯

* no credit card required

❮ Previous
Next ❯

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Сохранение CSS-стилей в файле .css

После создания стилей для веб-страницы необходимо сохранить их в отдельном файле с расширением .css. Этот файл будет подключаться к HTML-странице и определять ее внешний вид.

Создание файла .css

Для создания файла .css можно использовать любой текстовый редактор, например, Notepad или Sublime Text. Создайте новый файл и сохраните его с именем style.css. В этом файле вы можете определить все необходимые стили для вашей веб-страницы.

Подключение файла .css к HTML-странице

Чтобы подключить файл .css к HTML-странице, необходимо использовать тег <link>. Этот тег можно разместить внутри <head> HTML-страницы.

Пример кода:

• Создайте новый файл с именем index.html
• Создайте новый файл с именем style.css
• Откройте файл index.html в редакторе и добавьте следующий код внутри <head> HTML-страницы:

<head>

<link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

Второй атрибут тега <link> указывает на файл .css, который нужно подключить к HTML-странице. В данном случае это файл style.css.

Внешние стили

Внешние стили подключаются отдельным файлом при помощи тега <LINK>. В этом случае все стили располагаются в обычном текстовом файле с расширением .css и влияют на элементы всех страниц, к которым этот файл подключается. Обычно создание стилей сайта начинается именно с этого способа, так как только с его помощью ощущаются все плюсы CSS, ведь изменяя данные всего в одном файле можно управлять отображением сразу большого числа страниц. А уже в процессе работы над сайтом добавляются внутренние или встроенные стили, если это необходимо.

При использовании внешних стилей авторы поступают совершенно по-разному. Одни хранят все стили сайта в одном файле, другие — в нескольких. Например, один файл содержит стили для всего сайта и присутствует на всех страницах, другой — дополнительно подключается только к определенным разделам, третий — к определенным подразделам и т.д. Как будете поступать вы — решать только вам.

Пример подключение в CSS внешних стилей

Содержимое файла style.css

Результат в браузере

Параграф 1

Параграф 2

Как видите все очень просто. Вообще, по названиям практически всех свойств CSS уже можно понять, что за изменения они осуществляют, конечно, если вы хоть чуть-чуть знаете английский.

В большинстве примеров этого учебника по CSS я буду использовать внутренние стили, так как они наиболее наглядные для демонстрации. Вам же для дальнейшего изучения лучше сразу создать файл внешних стилей и привыкать применять именно их. Например, сделайте подпапку style, в ней создайте файл style.css и подключите его к вашей HTML-странице.

Edit 17/9/3 19:03

Thanks for the answers, guys. The following didn’t work.

3 Answers 3

I don’t believe jumping to css classes and ids is supported natively by Vscode. Try the CSS Peek extension, it does what you want nicely.

Make sure that the path you provided to access style.css file is correct. If that doesn’t work, try adding inline css in index.html:

This is an alternative Solution.

According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R

Try it if still getting problem then you can test it by using firebug tool for firefox.

For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.

You can also try this syntax:

Make sure that the browser actually makes the request and doesn’t return a 404.

Настраиваем стили в отдельном CSS-файле

Это наиболее распространенный метод подключения CSS к сайту или приложению. Он используется как при работе с классическим стеком HTML/CSS/JavaScript, так и при подключении фреймворков в духе React. 

Подключение производится по-разному в зависимости от используемых технологий. 

Стандартное подключение к HTML

Нужно в HTML-файле добавить метатег link. Метатег link – тип ссылки – адрес файла со стилями.

<link rel="stylesheet" href="styles.css">

HTML-файл автоматически соберет все стили из подключенного файла, опираясь на классы и другие параметры, указанные в разметке. 

Подключение при помощи Webpack

Если в ходе разработки вы задействуете сборщик пакетов, то нужно зарегистрировать в нем специальный плагин. Например, css-loader, который преобразует все добавленные в него CSS-файлы в единый набор стилей, используемых в приложении. 

Деление стилей на группы

Размещение стилей в отдельных CSS-файлах не только упрощает редактирование стилей и управление ими, но и позволяет не увеличивать количество кода в одном документе. 

Чтобы это сделать, можно воспользоваться любым из описанных выше методов, но повторить его несколько раз. Например, написать директиву import несколько раз, указав разные адреса. Или же добавить в список метатегов дополнительные ссылки на CSS-документы. 

Conclusion

So now you’ve learned all the methods of adding CSS to HTML and you’ve seen how they can work together to speed up your website.

I hope you’ve found this tutorial valuable.

Do you use tags to structure your website? Read this first: Replace Divs With Custom Elements For Superior Markup

Are you building a responsive website? The following articles may help you:

• Responsive Font Size (Optimal Text at Every Breakpoint)
• Responsive Padding, Margin & Gutters With CSS Calc
• Responsive Columns Layout System
• Responsive Banner Ads

Are IDs or classes better? See my guide for the answer: ID vs Class: Which CSS Selector Should You Use? (6 Examples).

Способ 1. Строгое структурирование

Под словами «четкое разделение» я подразумеваю разделение названных частей на два отдельных файла. Вследствие такой реализации девелоперам легче отлавливать баги и комфортнее работать. К тому же отдельный документ с прописанными стилями можно подключать к разным веб-сервисам.

В этом варианте подключения css-правил происходит через специальный тег <link>. Этот элемент может быть объявлен только в контейнере <head>.

В нем нужно указать минимум 2 параметра: rel, который описывает связь между рабочим файлом и документом, путь к которому указан в href, и href – путь к документу.

Как правило, стилевые параметры сохраняют в документе с расширением .css.

Для наглядности я привел пример такого подключения стилей. Хочу отметить важный момент: для подключения css-файла в атрибуте rel всегда пишется «stylesheet».

Для начала создадим структуру веб-ресурса.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Внешний</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <article>
<h2>Яркий заголовок</h2>
<p>Сенсационное содержание</p>
</article>
 </body>
</html>

Теперь оживим созданную страницу, подключив к ней документ со списком стилей. Вот строка, которая за это отвечает:

Создаем в блокноте файл с нужным расширением и называем его style.css. Заметьте, что имя должно быть идентичным с наименованием, указанным в теге <link>.

1
2
3
4
5
6
7
8
9
10

h2{
 color: #FF0000;
 text-shadow: 7px -3px 5px;
 border-bottom: 4px double #FF0000;
}
p {
 font-size: 19px;
 font-family: Calibri;
 margin-left: 35px;
}

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список

• вверхуСсылки
  в нем не работают, потому что наш “сайт” пока что состоит только из
  одной страницы, но это неважно в данный момент. Конечно же, на
  настоящем сайте не должно быть неработающих ссылок

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или
“верстка” на странице изучая CSS, вы найдете несколько готовых к
использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст
переместился направо а навигация налево

Внутренние таблицы стилей

Итак, способы подключения, относящиеся ко внутренним таблицам, разбиты на 2 части: внутри HTML и в отдельном CSS. Если хотите обойтись без внешних файлов вовсе – этого можно достичь с помощью использования атрибутов style. Style можно прописать как отдельному элементу, так и всему html-документу. Первый случай:

Здесь вы объявляете style внутри тега, после чего прописываете все необходимые параметры.

Для второго варианта нужно воспользоваться тегом head и прописать style внутри него:

В этом случае описанный стиль будет применяться по всем H1 на странице (если у вас их по каким-то причинам больше 1). 

Из всех методов подключения эти два – самые плохие. Дело в том, что у них очень высокий приоритет, и они будут перекрывать все другие стили, если у последних не прописан !important. Если у вас простой одностраничник – это может не сильно сказаться на верстке, но для более-менее крупного сайта отлавливание багов верстки при наличии внутренних стилей – настоящий ад, поэтому за прописывание style внутри HTML-страницы бьют по рукам на любой работе.

Вариант 1 — Глобальный CSS

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы — вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Преимущества глобальных CSS

• Таблица стилей влияет только на одну страницу.
• В глобальной CSS могут быть использованы классы и идентификаторы (ID).
• Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

• Увеличенное время загрузки страницы.
• Подключается только к одной странице — неэффективно, если вы хотите использовать одну и ту же CSS для нескольких страниц.

Как произвести подключение CSS к HTML странице

1. Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
2. Найдите открывающий тег <head> и добавьте после него следующий код:

<style type="text/css">

3. Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body {
     background-color: blue;
 }
 h1 {
     color: red;
     padding: 60px;
 }

4. Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

</style>

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h1>Руководство Hostinger</h1>
<p>Это наш текст.</p>

</body>
</html>

Исходный пример.

Вот разметка простейшей HTML-страницы:

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Основы CSS</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<h1>Основы CSS</h1>
<p>CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки
(чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.</p>
<img src=»https://progtips.ru/wp-content/uploads/2020/10/img-1-1.jpg» />
<h2>Способы подключения CSS к документу</h2>
<p>Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:</p>
<ul>
<li>Когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента
<link>, включённого в элемент <head>.</li>
<li>Когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу
инструкцией @import в элементе<style>.</li>
<li>Когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в
элемент <head>.</li>
<li>Когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента.</li>
</ul>
<footer>(c) <a href=»https://ru.wikipedia.org/wiki/CSS» target=»_blank»>Википедия</a></footer>
</body>
</html>

Вот как такая страница выглядит в браузере:

В разных браузерах, страница может отображаться немного по-разному, но в целом она будет такой, как на картинке выше.

Как-то изменить внешний вид страницы, средствами HTML мы не можем, а ведь хочется? Согласитесь, обычно сайты выглядят более презентабельно. И вот тут в дело вступает CSS.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used. 

Assume that an external style sheet has the following style for the <h1> element:

h1
{
  color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1> element:

h1
{
  color: orange;   
}

Example

If the internal style is defined after the link to the external style sheet, the <h1> elements will be
«orange»:

<head><link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
<style>h1 {  color: orange;}</style></head>

Example

However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be
«navy»: 

<head><style>h1 {  color: orange;}</style><link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
</head>