Reputation: 99
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
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
Reputation: 436
p {
text-transform: uppercase
}
p::first-letter {
font-size: 200%;
}
<p>Example text</p>
Upvotes: 2
Reputation: 29354
Use font-variant property of CSS
h1 {
font-variant: small-caps;
}
<h1>Main Heading</h1>
Upvotes: 10