Let’s begin with Lecture 15 of the HTML5 & CSS3 series. Styling Text with CSS – Font Families, Sizes, and Styles. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand how to change font families, sizes, and styles using CSS
- Know how to make text bold, italic, or underlined
- Be able to align text (left, center, right)
- Apply these styles to your webpage for a clean, readable look
📝 What is Text Styling?
Text styling helps your website appear neat, readable, and visually appealing.
Think of it like this:
Just like you choose different pens or markers when drawing or writing, CSS lets you style your text so it looks just right!
🖋️ Changing Font Family
The font-family The property lets you choose which type of font to use.
Example:
body {
font-family: Arial, sans-serif;
}You can also use fun fonts:
h1 {
font-family: 'Comic Sans MS', cursive, sans-serif;
}Common Web-Safe Fonts:
ArialTimes New RomanVerdanaGeorgiaCourier NewTahomaLucida Console
💡 Pro Tip: Always include a fallback font, like sans-serif, in case the first one isn’t available.
🔤 Setting Font Size
Use the font-size property to control how big or small your text appears.
Example:
p {
font-size: 16px;
}You can also use:
px– pixels (most common)%– percentage of default sizeem– relative to the parent elementrem– relative to the root element
🖌️ Text Style Properties
| Property | Description | Example |
|---|---|---|
font-weight | Makes text bold or normal | font-weight: bold; |
font-style | Makes text italic | font-style: italic; |
text-decoration | Adds underline, line-through | text-decoration: underline; |
text-align | Aligns text left, center, right | text-align: center; |
💻 Try This: Make Your Page Look Like a Magazine Article
Let’s update your homepage (index.html) to look like a styled article.
Step 1: Open index.html
Make sure your HTML looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style>
body {
background-color: hsl(210, 30%, 95%);
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: hsl(350, 100%, 40%);
border-bottom: 2px solid #007BFF;
}
h2 {
color: rgb(255, 87, 34);
background-color: rgba(255, 255, 0, 0.3);
padding: 5px;
}
p {
color: #2e2e2e;
font-size: 16px;
}
.highlight {
background-color: hsla(60, 100%, 75%, 0.5);
padding: 5px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hello! In this article, I'm going to share some fun facts about animals.</p>
<h2>Cats</h2>
<p>Cats are amazing pets...</p>
<h2>Dogs</h2>
<p>Dogs are loyal friends...</p>
<h2>Birds</h2>
<p class="highlight">Birds can fly and sing beautiful songs. Some birds even talk!</p>
</body>
</html>Step 2: Update Your CSS Styles
Replace the <style> block with this updated version:
<style>
body {
background-color: hsl(210, 30%, 95%);
font-family: 'Georgia', serif;
padding: 30px;
line-height: 1.6;
}
h1 {
font-family: 'Comic Sans MS', cursive, sans-serif;
color: hsl(350, 100%, 40%);
font-size: 36px;
text-align: center;
border-bottom: 3px solid hsl(200, 80%, 50%);
padding-bottom: 10px;
}
h2 {
font-family: 'Trebuchet MS', sans-serif;
color: rgb(255, 87, 34);
font-size: 24px;
font-weight: bold;
font-style: italic;
}
p {
font-size: 18px;
color: #2e2e2e;
text-align: justify;
}
.highlight {
background-color: hsla(60, 100%, 75%, 0.5);
padding: 5px;
font-weight: bold;
text-decoration: underline;
}
</style>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve transformed your page into a beautifully styled magazine-style article!
🧪 Try It Yourself!
- Change the body font to
'Verdana', sans-serif. - Make one of the paragraphs appear in all caps using
text-transform: uppercase; - Add
text-shadowto the heading to give it a glowing effect. - Use
text-align: righton one of the paragraphs.
🚀 Next Lecture Preview:
In Lecture 16, we’ll learn about semantic HTML tags like <header>, <footer>, <nav>, and <main> — so your website becomes more meaningful and easier to read by both humans and search engines!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
HTML5 and CSS3 Compleate Series
