2025-12-077 min read

CSS Text (Web Development)

Learn CSS Text (Web Development) step by step with clear examples and exercises.

Why This Matters

CSS Text properties play a crucial role in web development as they enable developers to customize and enhance the visual appeal of websites. By mastering CSS text manipulation, you can create engaging, professional-looking, and easily readable content that stands out from the crowd.

Prerequisites

To fully grasp CSS Text properties, it is essential to have a solid understanding of HTML (HyperText Markup Language) basics, including the structure of web pages, and familiarity with fundamental concepts such as the box model, selectors, and CSS syntax.

Core Concept

Basic Text Properties

CSS provides various properties to customize text properties for selected elements. Here's an in-depth look at some common ones:

Font Family

The font-family property specifies the font style for the selected elements. You can list multiple fonts, separated by commas, in case a specific one is not available on the user's system.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
font-family: 'Arial Black', Gotham, sans-serif;
}
</style>
</head>
<body>
<p>This is some text.</p>
</body>
</html>

Font Weight

The font-weight property determines the boldness of the selected elements' font. You can use numerical values (100 to 900) or keywords like normal, bold, and bolder.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is some text.</p>
</body>
</html>

Text Alignment and Spacing

CSS offers properties to control the alignment of text within elements, as well as the space between lines and letters. Here are a few examples:

Text-Align

The text-align property adjusts the horizontal alignment of text within an element. Possible values include left, center, right, and justify.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
text-align: justify;
}
</style>
</head>
<body>
<p>This is some justified text.</p>
</body>
</html>

Line-Height

The line-height property sets the height of a line box, which includes both the content and any padding or margins. This can help maintain consistent spacing between lines of text.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
line-height: 1.5;
}
</style>
</head>
<body>
<p>This is some text with a line height of 1.5.</p>
</body>
</html>

Letter-Spacing

The letter-spacing property controls the space between individual letters within an element. You can use positive or negative values to increase or decrease the spacing, respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
letter-spacing: 2px;
}
</style>
</head>
<body>
<p>This is some text with increased letter spacing.</p>
</body>
</html>

Worked Example

Let's create a simple web page that demonstrates various CSS text properties.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Arial Black', Gotham, sans-serif;
background-color: #f0f0f0;
padding: 2rem;
}

h1 {
font-size: 3rem;
color: navy;
text-align: center;
margin-bottom: 1.5rem;
}

p {
font-weight: bold;
line-height: 1.5;
letter-spacing: 1px;
margin: 0.5rem 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
background-color: #eee;
padding: 0.5rem;
border-radius: 4px;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<h1>CSS Text Properties Example</h1>

<ul>
<li>This is an example list item with a different background color and text color.</li>
<li>Another list item with unique styling.</li>
<li>Yet another list item demonstrating CSS text properties.</li>
</ul>

<p>This paragraph has a bold font weight, increased line height, and slightly reduced letter spacing.</p>
</body>
</html>

Common Mistakes

Forgetting to close CSS rules: Always remember to end your CSS rules with a semicolon (;) and close them with a curly brace (}).
Incorrect syntax for multiple selectors: If you want to apply the same style to multiple elements, separate them with commas but do not use curly braces inside the selector list.
Using absolute units instead of relative ones: Absolute units like px can make your CSS less responsive, as they don't scale well across different devices and screen sizes.
Ignoring browser defaults: Sometimes, browsers apply default styles to certain elements that may interfere with your custom styles. Always check the default styling of an element before applying your own rules.
Not using specificity correctly: Specificity is a CSS concept that determines which style rule takes precedence when multiple rules target the same element. Be aware of how specificity works and use it to your advantage.
Incorrect casing: CSS properties are case-insensitive, but consistent casing can make your CSS easier to read and maintain.
Forgetting to include a doctype declaration: The <!DOCTYPE html> declaration is essential for proper rendering of web pages in modern browsers.

Practice Questions

Create a web page with a heading, paragraph, and list that uses different font families, sizes, weights, and colors.
Style an unordered list so that each list item has a different background color and text color.
Create a responsive design for a paragraph by adjusting the line height and letter spacing based on screen width.
Given the following HTML structure:

<div class="container">
<h1>Welcome</h1>
<p>This is some text.</p>
</div>

Write the CSS to center both the heading and paragraph within the container.

What are some common units used for setting font sizes in CSS, and what are their advantages and disadvantages?
Explain how specificity works in CSS and provide an example of how it can be used to resolve a styling conflict between rules.
What is the difference between font-weight and font-style, and when would you use each property?
How can you ensure that your CSS styles are not overridden by other stylesheets or user customizations?
What is the purpose of the !important keyword in CSS, and when should it be used with caution?
Describe a scenario where using relative units for font sizes would be more beneficial than using absolute units like pixels (px).

FAQ

Why should I use relative units instead of absolute ones for font sizes? Relative units like rem, em, and % make your design more responsive, as they scale based on the user's screen size or browser settings. Absolute units like px are fixed and may cause issues when the layout needs to adapt to different devices.
How can I ensure that my CSS styles are not overridden by other stylesheets or user customizations? Use more specific selectors, increase the specificity of your rules, or use the !important keyword with caution. However, be aware that overusing !important can make your CSS harder to maintain and debug.
What is the difference between font-weight and font-style? font-weight determines the boldness of a font (normal, bold, etc.), while font-style sets the typeface style (normal, italic, oblique).
Why is it important to use semicolons at the end of CSS rules? Semicolons are used to separate declarations within a rule and provide clarity for both humans and machines when reading or parsing your CSS code.
What is specificity in CSS, and how does it affect my styles? Specificity determines which style rule takes precedence when multiple rules target the same element. The specificity of a rule is based on the number and type of selectors used. A more specific selector will take precedence over a less specific one.
Why should I avoid using absolute units like pixels (px) for font sizes in responsive designs? Absolute units like px are fixed, which means they don't scale well across different devices and screen sizes. Using relative units allows your design to adapt more easily to various screen resolutions and browser settings.
What is the purpose of the !important keyword in CSS, and when should it be used with caution? The !important keyword is used to give a style rule higher priority than other rules that may target the same element. However, overusing !important can make your CSS harder to maintain and debug, as it can create conflicts between rules and make it more difficult to determine which rule is taking precedence.
What are some common units used for setting font sizes in CSS, and what are their advantages and disadvantages? Common units for setting font sizes in CSS include px (pixels), em, rem, and %. Each unit has its own advantages and disadvantages:

px is an absolute unit that provides precise control over font size but can make your design less responsive.
em is a relative unit based on the font-size of the parent element, making it more responsive than px. However, using multiple levels of nesting can lead to inconsistent font sizes.
rem is a relative unit based on the root font-size (usually set in the HTML tag), providing consistent font sizes across your entire design regardless of nesting depth.
% is another relative unit that can be used for setting font sizes, but it may not always provide consistent results due to browser defaults and other factors.