外部CSS

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

外部CSSは、CSSスタイルを別のCSSファイルに配置し、<link>タグを使用してそのファイルをHTMLドキュメントにリンクさせることで、HTMLドキュメントにCSSスタイルを追加する方法です。このアプローチにより、複数のHTMLページに同じスタイルを適用できるため、ウェブサイトのデザインの保守や更新が容易になります。外部CSSは、一貫性と効率性が不可欠な大規模なプロジェクトに最適です。

外部CSSを使用する方法は次のとおりです:

CSSファイルを作成し（例: styles.css）、そこにCSSルールを記述します:

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

2. <head>セクションに<link>タグを追加して、CSSファイルをHTMLドキュメントにリンクします：

<!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）が与えられています。ファイルを接続するためにHTMLファイルにlinkタグを追加し、HTMLファイルにスタイルを適用しましょう！

チートシート

外部CSSを使用すると、CSSスタイルを別のファイルに配置し、<link>タグを使用してHTMLドキュメントにリンクさせることができます。

スタイルを記述したCSSファイルを作成します：

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

HTMLの<head>セクションでCSSファイルをリンクします：

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