CSS IDs in HTML

CSS IDs are used to identify unique elements. One ID must only be used once per page.

Defining an ID

<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>

CSS ID

#header {
    background: #1e40af;
    color: white;
    padding: 1rem;
}

#content {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

#footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

Differences Between ID and Class

Case Study: Dashboard Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <style>
        #dashboard {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: 60px 1fr;
            height: 100vh;
        }

        #dashboard-header {
            grid-column: 1 / -1;
            background: #1f2937;
            color: white;
            display: flex;
            align-items: center;
            padding: 0 1rem;
        }

        #dashboard-sidebar {
            background: #111827;
            color: white;
            padding: 1rem;
        }

        #dashboard-main {
            background: #f3f4f6;
            padding: 1rem;
            overflow-y: auto;
        }

        #sidebar-menu {
            list-style: none;
        }

        #sidebar-menu li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #374151;
        }

        #sidebar-menu a {
            color: white;
            text-decoration: none;
        }

        #sidebar-menu a:hover {
            color: #60a5fa;
        }

        #main-content {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
        }

        #page-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div id="dashboard">
        <header id="dashboard-header">
            <h1>Dashboard Admin</h1>
        </header>

        <aside id="dashboard-sidebar">
            <ul id="sidebar-menu">
                <li><a href="dashboard.html">Dashboard</a></li>
                <li><a href="students.html">Students</a></li>
                <li><a href="lecturers.html">Lecturers</a></li>
                <li><a href="schedule.html">Schedule</a></li>
                <li><a href="settings.html">Settings</a></li>
            </ul>
        </aside>

        <main id="dashboard-main">
            <div id="main-content">
                <h2 id="page-title">Dashboard</h2>
                <p>Welcome to the admin dashboard.</p>
            </div>
        </main>
    </div>
</body>
</html>

Everyday Case Study

Case: A developer needs to identify unique sections.

<section id="announcement">
    <h2>Announcement</h2>
    <p>The final exam schedule is now available.</p>
</section>

<section id="schedule">
    <h2>Course Schedule</h2>
    <p>The even semester starts on January 15.</p>
</section>

<section id="news">
    <h2>Latest News</h2>
    <p>Odd semester 2024 graduation.</p>
</section>

JavaScript and IDs

// Select by ID
const element = document.getElementById('myId');

// Change content
element.innerHTML = '<p>New content</p>';

// Change style
element.style.color = 'red';
element.style.display = 'none';

Best Practices

1. Use them for unique elements: One ID per page
2. Avoid them for CSS: Use classes for styling
3. Use them for JavaScript: For DOM manipulation
4. IDs must be unique: Don't duplicate IDs
5. Specificity: Understand the priority order

Summary

CSS IDs identify unique elements. Use them for JavaScript manipulation, not for CSS styling.