How to Make First Letter Capital in HTML and CSS
In this tutorial, we will learn how to make first letter capital in HTML and CSS. When we are working on a project, we may need to capitalize the first letter of a word for various reasons.
By making use of the CSS text-transform property, we can easily capitalize the first letter. This property can have three possible values; uppercase, lowercase, or capitalized. Depending upon the set value, the text will be transformed.
In the following example, we will capitalize he first letter of the each word in a text. Please have a look over the code example and the steps given below.
HTML
- We have one paragraph element with some text content.
- In the head element, we have added a stylesheet
style.cssusing the link element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>lorem ipsum dolor sit amet consectetur, adipisicing elit. cumque harum quisquam possimus dolore perspiciatis illo accusamus. a asperiores itaque voluptates!</p>
</body>
</html>
CSS
We are selecting the paragraph element and setting the value of the text-transform property to capitalize. As a result, the first letter of each word will be converted into an uppercase letter.
p {
text-transform: capitalize;
}
