Сделать первую букву заглавной

Первая буква заглавная

В CSS нет свойства, которая делает первую букву заглавной. Но можно выбрать первый символ текста через псевдоэлемент :first-letter, и применить к нему свойство text-transform: uppercase.

/* know online => Know online */
p::first-letter {
  text-transform: uppercase;
}

Псевдоэлемент :first-letter работает только с блочными элементами (т.е. с такими тегами как <span> данное свойство не будет работать). Чтобы :first-letter работало со строчными элементами, данному элементу надо задать свойство «inline-block» или «block».

/* не будет работать, т.к. строчный элемент */
span::first-letter {
  text-transform: uppercase;
}


/* <span> с классом .ucfirst теперь блочный, и свойство будет работать */
.ucfirst {
  display: inline-block;
}

.ucfirst::first-letter {
  text-transform: uppercase;
}

Сделать каждое слово с заглавной буквы

Сделать каждое слово с заглавной буквы можно через свойство text-transform: capitalize.

p {
  /* know online => Know Online */
  text-transform: capitalize;
}