次に作成したindex.htmlにcssを適応します。
part1ディレクトリ内に、styles.cssのファイルを作成します。
作成したら、以下を記述しましょう。
img {
width: 100px;
border-radius: 10px;
}
CSSは、まず適応したいタグを記述します。上記ではimgタグを指定しています。タグを指定後、{}（カーリーブラケット）で括ります。
その中に、変更したいプロパティ（文字の大きさ、色、上下左右のスペースなど）と値を記述していきます。
上記の場合は、widthといプロパティに100pxという値をセットしています。
これにより、画像の横幅を100pxにすることができます。
border-radiusは要素の角を値の分だけ、丸くすることができます。
作成したcssファイルを、htmlファイルに適応するためには、index.htmlファイルのheadタグに、linkタグを追加します。
<!DOCTYPE html>
<html>
<head>
<title>初めてのHTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<img src="images/sample.jpg" alt="東茶屋街の街並みの画像" />
<p>東茶屋街の街並みです！</p>
<p>とても綺麗でした！</p>
</body>
</html>
上記により、以下のように画像のレイアウトが変更されたことが確認できるかと思います。
次に、「東茶屋街の街並みです！」の文字を太くしましょう。
ただ、下記のような記載の場合、「とても綺麗でした！」の文字も太くなってしまいます。
特定のタグにcssを適応したい場合、そのタグにclass属性を付与します。
class属性の値は、英数字であれば自由に定義できます。
そしてcssファイルの方でclassを指定する場合は、先頭に.(ドット)を先頭に付けて指定します。
これで「東茶屋街の街並みです！」の文字列のみ太文字にすることができます。
