CSS Properties: How to set the letter spacing for heading elements?

Last update on February 23 2024 13:05:02 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set the letter spacing for heading elements</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
 h1 { /* Targets h1 elements */
    letter-spacing: 3px; /* Sets the letter spacing of h1 elements to 3 pixels */
}

h2 { /* Targets h2 elements */
    letter-spacing: -2px; /* Sets the letter spacing of h2 elements to -2 pixels (tighter spacing) */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<h1>Heading-1</h1><!-- Level 1 heading element -->
<h2>Heading-2</h2><!-- Level 2 heading element -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set different letter spacing for heading elements.
CSS comments are added to explain each section of the code.
The h1 selector targets level 1 heading elements and sets their letter spacing to 3 pixels.
The h2 selector targets level 2 heading elements and sets their letter spacing to -2 pixels, resulting in tighter spacing.

Live Demo:

See the Pen letter-spacing-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page