1文字だけ色や大きさを変えるCSS（とHTML）

<p>りんごは<span class="red">赤</span>い</p>

.red {
  color: red;
}

<p>一文字だけ見た目を<span class="change">変</span>えたい</p>

.change {
  background: yellow;
  font-size: 2em;
}

<p class="change2">最初の一文字目を変えたい。</p>
<p class="change2">長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。長い文章の場合はこうなります。</p>
<p class="change2">
  改行した場合（brタグ使用）はこうなります。<br>
  改行した場合（brタグ使用）はこうなります。改行した場合（brタグ使用）はこうなります。改行した場合（brタグ使用）はこうなります。改行した場合（brタグ使用）はこうなります。改行した場合（brタグ使用）はこうなります。
</p>

.change2::first-letter {
  background: #222222;
  font-size: 2em;
  color: #ffffff;
}