無料ホームページ作成 CSS（スタイルシート）入門 y-labo - CSS（スタイルシート）で文字を設定

例）
h3 {
color: #0000FF;
}
.text-red {
color: red;
}

<h3>特別区部</h3>
<p>人口は<span class="text-red">約815万人</span>です。</p>

例）
p {
font-size: 12px;
}
.text-larger {
font-size: larger;
}

<h3><span class="text-larger">八王子</span>市</h3>
<p>人口は約54万人です。</p>

例）
.text-red-bold {
color: red;
font-weight: bold;
}
strong {
font-weight: normal;
}

<h3>町田市</h3>
<p>人口は<span class="text-red-bold">約38万人</span>です。</p>
<h3>府中市</h3>
<p>人口は<strong>約23万人</strong>です。</p>

例）
.text-red-italic {
color: red;
font-style: italic;
}
em {
font-style: normal;
}

<h3>府中市</h3>
<p>人口は<strong class="text-red-italic">約23万人</strong>です。</p>
<h2>大阪府</h2>
<p>人口は<em>約880万人</em>です。</p>

例）
h2 {
font-family: serif;
}
.text-skpop {
font-family: "HG創英角ﾎﾟｯﾌﾟ体";
}
.text-tnrts {
font-family: "Times New Roman", Times, serif;
}

<h2>神奈川県</h2>
<p>人口は<span class="text-skpop">約879万人</span>です。</p>
<h3>横浜市</h3>
<p>人口は<span class="text-tnrts">約340万人</span>です。</p>

例）
.text-smallcaps {
font-variant: small-caps;
}

<p class="text-smallcaps">人口は約125万人です。<br>
The population of Kawasaki city is 1.25 million.</p>

例）
.text-font {
font: 12pt/1.2em "ＭＳ Ｐ明朝";
}

<p class="text-font">人口は約125万人です。</p>

例）
h2 {
text-decoration: underline overline;
}
.text-line-through {
text-decoration: line-through;
}

<h1>日本</h1>
<p>人口は<span class="text-line-through">約1億2700万人</span>です。</p>
<h2>東京都</h2>
<p>人口は約1250万人です。</p>

例）
.text-capitalize {
text-transform: capitalize;
}

<p class="text-capitalize">人口は約54万人です。<br>
The population of Hachioji city is 540 thousand.</p>

例）
.text-letter-spacing {
letter-spacing: 10px;
}

<p class="text-letter-spacing">人口は約880万人です。<br>
The population of Osaka prefecture is 8.8 million.</p>

例）
.text-word-spacing {
word-spacing: 10px;
}

<p class="text-word-spacing">人口は約260万人です。<br>
The population of Osaka city is 2.6 million.</p>

例）
.text-vertical-align {
vertical-align: super;
}

<p>人口は約83万人です。<br>
面積は約150km<span class="text-vertical-align">2</span>です。</p>