Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes. This example will display the first letter of paragraphs with class="intro", in red and in a larger size:

HTML file: Displayed by browser:
<style>
p.intro::first-letter {
     color: #ff0000;
     font-size:200%;
}
</style>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text but no "intro" class is added to it.</p>
</body>

This is an introduction.

This is a paragraph with some text but no "intro" class is added to it.


Back button Table of Contents Next button