内部CSS

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 7/76。

内部CSSは、ドキュメントの<head>セクション内にある<style>タグの中に配置することで、HTMLドキュメントにCSSスタイルを追加する方法です。このアプローチにより、外部スタイルシートを必要とせずに、単一ページ内の複数の要素にスタイルを適用できます。内部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>タグには、bodyの背景色をライトブルーに、p（段落）の色をブルーに、フォントサイズを16ピクセルに設定するCSSルールが含まれています。これらのスタイルは、HTMLドキュメント内のすべての要素に適用されます。

チャレンジ

簡単

HTMLドキュメントが与えられます。内部CSSを使用して、次のプロパティでドキュメントをスタイリングしてください：

body の背景色を lightgreen に設定してください。
すべての h1 見出しのテキストの色を red に設定してください。
すべての段落（p）のフォントサイズを 18px に設定してください。

そのためのスターターCSSコードが用意されています。

チートシート

内部CSSは、HTMLドキュメントの<head>セクションにある<style>タグ内に追加されます：

<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>