HTMLでCSSを適用する方法【現役エンジニアが解説】
今回は、HTMLでCSSを適用する方法について、外部CSSと文書単位、要素の属性で適用する方法に分け、簡単に解説していきます。
外部CSSでCSSを適用する方法
外部CSSファイルを適用するには、linkタグを使います。
linkタグはhref属性で適用するCSSファイルを指定し、headタグ内に書きます。
<link rel="stylesheet" type="text/css" href="hoge.css">
上記のコードでは、hoge.cssという外部のCSSファイルを読み込み、HTML文書に適用しています。
文書単位でCSSを適用する方法
文書単位でCSSを適用するには、headタグ内でstyleタグを使います。
styleタグ内には、HTML文書に適用したいスタイルを書いていくことになります。
<style>
body{font-size:12px;}
</style>
上記のコードでは、HTML文書のbodyタグ内の全てのコンテンツの文字サイズを12ピクセルにしています。
要素の属性でCSSを適用する方法
要素のstyle属性にスタイルを書くことで、各要素独立してCSSを適用できます。
クラスやタグで適用させたいスタイルをまとめられない際には、この書き方が見受けられます。
<body style="font-size:12px;"></body>
上記のコードでは、bodyタグのstyle属性にスタイルを直接書くことで、このタグ内のみでCSSを適用させることができます。