Skip to content

Styling Text with CSS | Lecture 15

Styling Text with CSS

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:
  • Arial
  • Times New Roman
  • Verdana
  • Georgia
  • Courier New
  • Tahoma
  • Lucida 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 size
  • em – relative to the parent element
  • rem – relative to the root element
🖌️ Text Style Properties
PropertyDescriptionExample
font-weightMakes text bold or normalfont-weight: bold;
font-styleMakes text italicfont-style: italic;
text-decorationAdds underline, line-throughtext-decoration: underline;
text-alignAligns text left, center, righttext-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!

Styling Text with CSS
A kid typing into a computer screen choosing from a menu labeled

🧪 Try It Yourself!

  1. Change the body font to 'Verdana', sans-serif.
  2. Make one of the paragraphs appear in all caps using text-transform: uppercase;
  3. Add text-shadow to the heading to give it a glowing effect.
  4. Use text-align: right on 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

Tags: