Styling Sections Using Internal CSS

Previous Next

Using Internal CSS with IDs and Classes

In this chapter, students improve the webpage created in earlier chapters by moving from inline CSS to internal CSS using the <style> tag. This makes the code cleaner, reusable, and easier to manage.

Chapter Goal

Write CSS inside the <head> section
Use IDs and classes for styling
Apply reusable styles
Keep HTML clean and readable

Why Internal CSS?

So far, we used inline CSS like this:


<div style="background-color:dodgerblue; padding:50px;">

Run Code

Problems with inline CSS:

Code becomes messy
Styles cannot be reused
Hard to manage large pages

Internal CSS solves this by separating design from structure.

Step 1: Add Basic HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Run Code

Step 2: Add Internal CSS

Add a <style> tag inside the <head> section.


<style>
    body{
        margin:0px;
    }

    #hero{
        background-color:dodgerblue;
        color:white;
        padding:50px;
    }

    .sec-title{
        text-align:center;
    }

    #about-box{
        display:flex;
        padding:0px 50px;
        gap:30px;
    }

    #about-text-box{
        width:50%;
    }

    #about-image-box{
        width:50%;
    }

    #about-image{
        width:100%;
    }
</style>

Run Code

# is used for ID selectors
. is used for class selectors
Styles are written once and reused

Step 3: Update HTML Using IDs and Classes


<div id="hero">
    <h1>Welcome to ABC Interiors</h1>
    <p>Let's create your perfect home</p>
</div>

<div>
    <h1 class="sec-title">About Us</h1>
</div>

<div id="about-box">

    <div id="about-text-box">
        <p>This program is free software; you can redistribute it and/or 
        modify it under the terms of the GNU General Public License.</p>
        <p>This program is free software; you can redistribute it and/or 
        modify it under the terms of the GNU General Public License.</p>
    </div>

    <div id="about-image-box">
        <img src="about-pic.webp" id="about-image">
    </div>

</div>

Run Code

Final Output Code

This is the complete code combining Chapters 1, 2, and 3.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            margin:0px;
        }
        #hero{
            background-color:dodgerblue;
            color:white;
            padding:50px;
        }
        .sec-title{
            text-align:center;
        }
        #about-box{
            display:flex;
            padding:0px 50px;
            gap:30px;
        }
        #about-text-box{
            width:50%;
        }
        #about-image-box{
            width:50%;
        }
        #about-image{
            width:100%;
        }
    </style>
</head>
<body>

    <div id="hero">
        <h1>Welcome to ABC Interiors</h1>
        <p>Let's create your perfect home</p>
    </div>

    <div>
        <h1 class="sec-title">About Us</h1>
    </div>

    <div id="about-box">
        <div id="about-text-box">
            <p>This program is free software; you can redistribute it and/or 
            modify it under the terms of the GNU General Public License.</p>
            <p>This program is free software; you can redistribute it and/or 
            modify it under the terms of the GNU General Public License.</p>
        </div>
        <div id="about-image-box">
            <img src="about-pic.webp" id="about-image">
        </div>
    </div>

</body>
</html>

Run Code

Practice Task

Change the hero background color
Center the About Us content vertically
Add a new section title using the same class

Chapter Summary

Learned what internal CSS is
Used IDs and classes
Removed inline styles
Built a cleaner webpage structure

Watch video

Previous Next