Внешний CSS

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 8 из 76.

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

Вот как использовать внешний CSS:

Создайте CSS-файл (например, styles.css) с вашими CSS-правилами:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Подключите CSS-файл к вашему HTML-документу, добавив тег <link> в раздел <head>:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

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

Задание

Легко

Вам даны HTML и CSS файлы (index.html и styles.css), добавьте тег link в HTML-файл, чтобы соединить файлы и применить стили к HTML-файлу!

Шпаргалка

Внешний CSS позволяет размещать CSS-стили в отдельном файле и подключать его к HTML-документам с помощью тега <link>.

Создайте CSS-файл со своими стилями:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

Подключите CSS-файл в секции HTML <head>:

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

Атрибут rel определяет отношение (stylesheet), а href указывает путь к CSS-файлу.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>