Text Styling and CSS Units
Some of the most important properties for styling text are font size and line height.
CSS has several different units for expressing length. Font size consists of a number followed by a length unit, for example 10px. The length unit can be: px, pt, em, rem, vw, vh, vmin, vmax.
1h1 {
2 font-size: 28px;
3}A pixel (px) is a unit of measurement commonly used in web design, which is approximately 0.26 mm. It is an absolute unit, meaning its value is fixed and the appearance of an element expressed in pixels will always be the same. In everyday life, we also encounter other absolute units, such as centimeters (cm) or millimeters (mm).
Nowadays, in web design, relative units are increasingly used, which allow elements to scale depending on other length properties. This way, page elements better adapt to different screens and resolutions.
The most popular relative units are:
em – a unit relative to the font-size value of the element (2em means a font size twice the current font size of the element). rem – a unit relative to the font-size of the root element (usually the html element). vh – 1vh equals 1% of the browser window height (viewport). vw – 1vw equals 1% of the browser window width (viewport). Using relative units enables creating responsive and flexible layouts that adapt to different devices and screen sizes, ensuring better user experiences.
The line-height property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. In other words, it is the spacing between the baselines of two adjacent lines of text. This property affects text readability as well as the overall appearance of a block of text on the page.
The line-height value can be specified as:
An absolute unit, e.g., pixels (px) or points (pt). A relative unit, e.g., em, rem, or percentage (%). A unitless number that specifies the ratio between line height and font size. For example, line-height: 1.5 means the line height will be 1.5 times the current font size. Here is an example of using the line-height property:
1p {
2 font-size: 16px;
3 line-height: 1.5;
4}In the example above, the line height for paragraph elements is set to 1.5 times the font size (16px). As a result, the spacing between lines will be 24px (16px * 1.5).
A well-chosen line-height value can significantly affect the comfort of reading text for users, so it's worth experimenting with different values to achieve the optimal effect.
Text Styling
Text styling in CSS includes various properties that can be customized:
- Font: The font-family property allows you to specify which font to use.
- Font Size: font-size specifies how large the text should be.
- Font Style: font-style controls whether the text should be italic or not.
- Font Weight: font-weight allows you to control the thickness of text, e.g., bold.
- Text Color: color allows you to specify the text color.
- Text Alignment: text-align controls text alignment to the left, right, center, or justified.
- Letter Spacing: letter-spacing allows you to control the space between letters.
- Line Spacing: line-height allows you to control the space between lines of text.
- Text Transforms: text-transform can be used to control capitalization, such as uppercase, lowercase, or capitalize.
Exercise: Text Styling and CSS Units
In this exercise, you'll learn how to style text using various CSS units and how to use the line-height property to control text line height.
Step 1: Create a Basic HTML Document Structure
First, create a new HTML file and add a basic HTML document structure.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Text Styling</title>
7</head>
8<body>
9 <main>
10 <!-- Place your page content here -->
11 </main>
12</body>
13</html>Step 2: Add a Heading and Paragraph
Add a heading and a text paragraph that you'll be styling.
1<main>
2 <h1>Text Styling in CSS</h1>
3 <p>The <code>line-height</code> property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. This property affects text readability as well as the overall appearance of a block of text on the page.</p>
4</main>Step 3: Add CSS Styles
Add an internal stylesheet in the
<head>1<head>
2 <style>
3 body {
4 font-family: Arial, sans-serif;
5 }
6 h1 {
7 font-size: 28px;
8 color: darkblue;
9 }
10 p {
11 font-size: 16px;
12 line-height: 1.5;
13 }
14 </style>
15</head>Step 4: Experiment with Different Units
Try applying different units to the
font-sizeline-height1<head>
2 <style>
3 body {
4 font-family: Arial, sans-serif;
5 }
6 h1 {
7 font-size: 2em; /* Changed to em unit */
8 color: darkblue;
9 }
10 p {
11 font-size: 1rem; /* Changed to rem unit */
12 line-height: 1.8; /* Increased line height */
13 }
14 </style>
15</head>Step 5: Add Additional Paragraphs
Add several additional paragraphs to better see the effect of the
line-height1<main>
2 <h1>Text Styling in CSS</h1>
3 <p>The <code>line-height</code> property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. This property affects text readability as well as the overall appearance of a block of text on the page.</p>
4 <p>The <code>line-height</code> value can be specified as an absolute unit, a relative unit, or a unitless number that specifies the ratio between line height and font size.</p>
5 <p>A well-chosen <code>line-height</code> value can significantly affect the comfort of reading text for users, so it's worth experimenting with different values to achieve the optimal effect.</p>
6</main>Step 6: Add Additional Text Styling Properties
Add more text styling properties such as color, alignment, letter spacing, and text transforms.
1<head>
2 <style>
3 body {
4 font-family: Arial, sans-serif;
5 }
6 h1 {
7 font-size: 2em;
8 color: darkblue;
9 text-align: center; /* Center alignment */
10 }
11 p {
12 font-size: 1rem;
13 line-height: 1.8;
14 color: darkgray; /* Text color */
15 letter-spacing: 0.05em; /* Letter spacing */
16 text-transform: capitalize; /* Capitalization */
17 }
18 </style>
19</head>Result
After completing all steps, your HTML file should look like this:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Text Styling</title>
7 <style>
8 body {
9 font-family: Arial, sans-serif;
10 }
11 h1 {
12 font-size: 2em;
13 color: darkblue;
14 text-align: center;
15 }
16 p {
17 font-size: 1rem;
18 line-height: 1.8;
19 color: darkgray;
20 letter-spacing: 0.05em;
21 text-transform: capitalize;
22 }
23 </style>
24</head>
25<body>
26 <main>
27 <h1>Text Styling in CSS</h1>
28 <p>The <code>line-height</code> property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. This property affects text readability as well as the overall appearance of a block of text on the page.</p>
29 <p>The <code>line-height</code> value can be specified as an absolute unit, a relative unit, or a unitless number that specifies the ratio between line height and font size.</p>
30 <p>A well-chosen <code>line-height</code> value can significantly affect the comfort of reading text for users, so it's worth experimenting with different values to achieve the optimal effect.</p>
31 </main>
32</body>
33</html>Now you have a complete web page with text styled using various CSS units and the line-height property. You can continue experimenting by adding more styles and changing values to better understand how CSS works.