When we refer to a capital letter we are talking about the style given to the first letter of a paragraph. Using the style sheet language CSS we can format said letter, so that it stands out from the rest of the content.
What CSS offers us a pseudo-element to be applied to both classes and selectors. The specific pseudo-element that it offers us to manage the capital letter is
first-letter
.
This way, using the class with the pseudo-element
first-letter
will look like this.
.paragraph:first-letter {
/* CSS definition */
}
We can take advantage of all the attributes of CSS to format the capital letter. That is, you can apply everything that we have explained within the CSS examples. For example, we can make it larger using
font-size
, or change the color with
color
, or modify its alignment using
float
,…
Thus, our code, to format a capital letter, could look like this, in which we double its size, align it to the left and make the color of the letter red.
.paragraph:first-letter{
font-size:200%;
float:left;
color:#f00;
}
Now that we have defined the code in CSS, we will only have to apply the class that we just defined on our text in HTML. To apply the class on some of the elements HTML we will use the class attribute. We are going to assign this attribute to a paragraph that we have defined using an element
p
.
<p class="paragraph">This is our paragraph, which will have its first letter as a capital letter</p>
A very simple code, but at the same time very useful to be able to shape the first letters of our paragraphs.