w3resource

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

Go to Exercise page

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes No Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.