CODEWITHSUNDEEP
css
Grave Stones Yardson
Grave Stones Yardson

Reputation: 99

Capitalize all letters with first one bigger

what's the most efficient way to do this in CSS??? Basically it looks like this: {F}IRST {L}ETTER, where the letters in the braces are a little bigger than the other ones but they all the letters are uppercase.

Any suggestions?

Upvotes: 8

Views: 4479

Answers (4)

Hesham El Masry
Hesham El Masry

Reputation: 423

Look if it is no dynamic data i have a good suggestion which is: wrap the letters you want it to be slightly bigger in a span and create a class for this span with font size bigger a than the h1 font size for example if h1 font size 16px make the span 18px

h1 {
  font-size: 16px;
}

span {
  font-size: 18px;
}
<h1><span>M</span>ain <span>H</span>eading</h1>

simply this will solve your problem easily but using css font-variant doesn't take size.

Upvotes: 0

Ivan Venediktov
Ivan Venediktov

Reputation: 436

p {
  text-transform: uppercase
}

p::first-letter {
  font-size: 200%;
}
<p>Example text</p>

JS Bin

Browser support

Upvotes: 2

stefano
stefano

Reputation: 606

.simplyCapFirstBigger
{
    font-variant: small-caps;
}

Upvotes: 2

Yousaf
Yousaf

Reputation: 29354

Use font-variant property of CSS

h1 {
  font-variant: small-caps;
}
<h1>Main Heading</h1>

Upvotes: 10

Related Questions