HTML Large First Letter of Paragraph

This CSS code snippet helps you to make the first letter large in a paragraph of HTML document. It uses CSS first-letter pseudo selector to create an eye-catching large initial letter with a distinct font, color, and optional styling.

The method employed involves selecting the first letter within a paragraph in a specific section, applying unique typography, and adding optional text shadow for visual appeal.

This stylish tweak is helpful for improving the visual appeal of your text content, making it stand out and captivate your audience.

How to Create HTML Large First Letter Of Paragraph

1. First of all, insert your desired content within the <p> tag(s) inside the <section> tag. You can also set a class name for your specific text that you want to apply this typography style.

<section>
	<p>Similique magnam alias recusandae veniam, quisquam magni, itaque quaerat dolor? Veniam animi exercitationem at quasi molestiae! Doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam omnis repellendus, atque similique magnam alias.</p>
</section>

2. The magic happens in the CSS file. The section p:first-letter selector targets the first letter of each paragraph within the section. Adjust the styling properties such as font-size, color, and text-shadow according to your preferences.

Feel free to customize the imported font in the CSS code to suit your design preferences. Replace "Montagu Slab" with the desired font.

@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:opsz,wght@16..144,600&display=swap");

*,
* + * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
section{
	display: grid;
	place-items: center;
	min-height: 100vh;
	margin-inline: 6vw;
	background: #fff3fe !important;
	font-family: system-ui, sans-serif;
	font-size: 16pt;
	line-height: 1.5;
	font-kerning: normal;
}

p {
	max-width: 40ch;
	margin-block-end: 2rem;
}
section p:first-letter {
	float: left;
	font-family: "Montagu Slab", serif;
	font-size: 8rem;
	line-height: 1;
	color: #d9381e;
	margin-right: 0.5rem;

	/* styling optional */
	text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black,
		-0.25rem 0.25rem rgba(0 0 0 / 0.15);
}

Feel free to experiment with different font families, sizes, colors, and additional styling to match your website’s design.

That’s all! hopefully, you have successfully styled the first letter of paragraphs in your HTML. If you have any questions or suggestions, don’t hesitate to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.