Как сделать разный стиль у букв CSS

Разный стиль у букв практикуют, например, поисковые системы в своих логотипах. Он достигается путём использования тега <span>.

<span style="color: Tomato; font-size: 20px; font-weight: bold;">&lt;span&gt;</span>

Немного усложним:

<div style="color: DarkSalmon; font-size: 30px; font-weight: bold;">тег <span style="color: Tomato;">&lt;span&gt;</span></div>

И теперь по аналогии. Псевдоклассы облегчат код.

<style type="text/css">
.google {
  font: 100 500% Georgia, 'Times New Roman', Times, serif;
  text-indent: 0px;
}
.google span:nth-child(1) {color: #133BC1;}
.google span:nth-child(2) {color: #E33B21;}
.google span:nth-child(3) {color: #E6B500;}
.google span:nth-child(4) {color: #4BCE54;}
.google span:nth-child(5) {color: #0048E3;}
.google span:nth-child(6) {color: #E33B21; font-style: italic;}
</style>

<div class="google">
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></div>

<style type="text/css">
div.yahoo span {
  color: #FF0000;
  font-family: Garamond, Georgia, 'Times New Roman';
  float: left;
  font-weight: 0;
  text-transform: uppercase;
  text-indent: 0px;
}
.yahoo span:nth-child(1) {
  font-size: 500%;
  margin: 0;
}
.yahoo span:nth-child(2) {
  font-size: 350%;
  margin: 15px 0 0 -10px;
}
.yahoo span:nth-child(3) {
  font-size: 350%;
  margin: 8px 0 0px -5px;
}
.yahoo span:nth-child(4) {
  font-size: 300%;
  margin: 12px 0 0px -5px;
}
.yahoo span:nth-child(5) {
  font-size: 350%;
  margin: 6px 0 0px -1px;
}
.yahoo span:nth-child(6) {
  font-size: 350%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 4px 0 0px -1px;
  text-transform: none;
}
</style>

<div class="yahoo">
<span>Y</span><span>A</span><span>H</span><span>O</span><span>O</span><span>!</span></div>
<div style="clear: both;"></div>

Есть ещё псевдоэлемент :first-letter. Благодаря ему можно задать стиль для первого символа.
Яндекс

<style type="text/css">
.yandex {
  font-family: Arial Narrow, Helvetica, sans-serif;
  font-size: 500%;
  text-indent: 0px;
  display: inline-block;
}
.yandex:first-letter { color: #ff0000; }
</style>

<span class="yandex">Яндекс</span>

Травка зеленеет,
Солнышко блестит;
Ласточка с весною
В сени к нам летит.

С нею солнце краше
И весна милей…
Прощебечь с дороги
Нам привет скорей!

Дам тебе я зерен;
А ты песню спой
Что из стран далеких
Принесла с собой.

<style>
p.stih, p.stih3 {font-size: 120%;}

p.stih:first-letter {
  color: #ff0000;
  font-family: serif;
  font-size: 300%; 
  line-height: 0%;
}

p.stih3:first-letter {
  color: #133BC1;
  font-family: serif;
  font-size: 300%; 
  line-height: 67%; 
  float: left; 
}
</style>

<p class="stih">Четверостишье</p>
<p class="stih">Четверостишье</p>
<p class="stih3">Четверостишье</p>

Источник