HTML Large First Letter of Paragraph

HTML Large First Letter of Paragraph
Code Snippet:Simple drop cap
Author: Chris Smith
Published: March 4, 2024
Last Updated: March 4, 2024
Downloads: 487
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X