In this lesson, we explore the fundamentals of text styling using HTML and CSS. We’ll cover everything from setting fonts and sizes to adding spacing, aligning text, and working with special characters. By the end, you’ll be equipped to replicate complex designs with confidence. Let’s dive in!
1. Setting Up Your Project
Create a New HTML File
- Start by creating a new file called
text.html. - Open the file in your browser (e.g., Google Chrome).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling</title>
<style>
/* CSS will go here */
</style>
</head>
<body>
<p class="video-title">Sample Text from YouTube</p>
</body>
</html>
2. Styling Text Using CSS
Change the Font
- CSS Property:
font-family - Default font:
Times New Roman - Example: Change to Arial.
.video-title {
font-family: Arial, sans-serif;
}
Adjust Font Size
- CSS Property:
font-size - Example: Increase font size to
30px.
.video-title {
font-size: 30px;
}
Make Text Bold
- CSS Property:
font-weight
.video-title {
font-weight: bold;
}
Italicize Text
- CSS Property:
font-style
.video-title {
font-style: italic;
}
Center Align Text
- CSS Property:
text-align
.video-title {
text-align: center;
}
3. Adding Line Height and Wrapping Text
Adjust Line Height
- CSS Property:
line-height
.video-title {
line-height: 1.5;
}
Set a Width for Text Wrapping
- CSS Property:
width
.video-title {
width: 300px;
}
4. Adding Special Characters
Use HTML Entities for Symbols
- Middle Dot:
· - Checkmark:
✓
<p class="video-stats">3.4M views · Verified ✓</p>
5. Fine-Tuning Margins and Spacing
Reset Default Margins
Paragraphs have default margins. To remove them:
.video-title {
margin: 0;
}
Add Custom Margins
Set precise spacing with margin.
.video-title {
margin-bottom: 5px;
}
6. Styling Additional Paragraphs
Add classes to paragraphs and apply specific styles. For example:
<p class="video-description">This is a detailed description of the video content.</p>
.video-description {
font-family: Arial, sans-serif;
font-size: 14px;
color: gray;
width: 280px;
line-height: 1.6;
}
7. Tips for Complex Designs
- Inspect Elements: Use browser developer tools to check and copy styles.
- Google for Help: Search for CSS properties when unsure (e.g., “CSS text italic”).
- Iterate and Test: Adjust values like font size, width, and margins for a better match.
Conclusion
By combining HTML and CSS, you can achieve professional text styling that aligns with your design goals. From fonts and alignment to spacing and special characters, these tools allow you to bring your creative vision to life.