CSS Properties: How to make the text in all division elements wider?

Last update on February 23 2024 13:05:52 (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 make the text in all division elements wider</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#div1 { /* Targets the element with ID div1 */
font-stretch: condensed; /* Sets the font stretch property to condensed, making the text wider */
}
#div2 { /* Targets the element with ID div2 */
font-stretch: expanded; /* Sets the font stretch property to expanded, making the text wider */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<div id="div1"><!-- Div element with ID div1 -->
CSS, stands for Cascading Style Sheet. <!-- Text content -->
</div><!-- Ends the div element -->
<div id="div2"><!-- Div element with ID div2 -->
CSS, stands for Cascading Style Sheet. <!-- Text content -->
</div><!-- Ends the div element -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to use the font-stretch property to adjust the width of the text in division elements.
Comments are added to both HTML and CSS to explain each section of the code.
In the CSS <style> block, two CSS rules are defined: one for the element with ID div1 and another for the element with ID div2.
The font-stretch property is used to specify the width of the text. Setting it to condensed makes the text narrower, while setting it to expanded makes the text wider.

Live Demo:

See the Pen font-stretch-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	No	Yes

Go to Exercise page