Внутренний CSS

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

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

Вот базовый синтаксис использования внутренних CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

В этом примере тег <style> содержит CSS-правила, которые устанавливают цвет фона body на светло-голубой, цвет p (абзаца) — на синий, а размер шрифта — на 16 пикселей. Эти стили будут применены ко всем элементам внутри HTML-документа.

Задание

Легко

Вам дан HTML-документ. Используйте внутренний CSS, чтобы стилизовать документ со следующими свойствами:

Установите цвет фона для body на lightgreen.
Установите цвет текста всех заголовков h1 на red.
Установите размер шрифта всех параграфов (p) на 18px.

Вам предоставлен начальный CSS-код для этого.

Шпаргалка

Внутренний CSS добавляется внутри тега <style> в секции <head> HTML-документа:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

Внутренний CSS позволяет применять стили к нескольким элементам на одной странице без использования внешних таблиц стилей.

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

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>