HTML Classes & IDs

HTML CODES & EXAMPLES

HTML Classes & IDs

Learn how to identify, group and target HTML elements using class and id attributes with practical examples.

What are Class and ID?

HTML element identifiers

The class and id attributes are used to identify HTML elements. They are commonly used with CSS for styling and JavaScript for selecting and manipulating elements.

Remember:A class can normally be reused on multiple elements, while an id should identify one unique element within a page.

Basic Class

Assign a class to an element

class-basic.html

<p class="course-title">

  Computer Courses

</p>

Class with CSS

Style elements using a class selector

class-css.html

<p class="course-title">
  Computer Courses
</p>

<style>

.course-title{

  font-size:28px;

  font-weight:bold;

  text-align:center;

}

</style>

Reusable Class

Use one class on multiple elements

reusable-class.html

<div class="course-card">
  Course 1
</div>

<div class="course-card">
  Course 2
</div>

<div class="course-card">
  Course 3
</div>

<style>

.course-card{

  padding:20px;

  margin:10px;

  border:1px solid #ddd;

  border-radius:10px;

}

</style>

Basic ID

Identify a unique element

id-basic.html

<h1 id="page-title">

  HTML Classes & IDs

</h1>

ID with CSS

Style an element using an ID selector

id-css.html

<h1 id="page-title">
  Welcome to SNCEC
</h1>

<style>

#page-title{

  text-align:center;

  font-size:32px;

}

</style>

Class vs ID

Understand the difference

class

Can be reused
Can be applied to many elements
CSS selector uses .
Useful for groups of elements
Multiple classes can be used

id

Should be unique on the page
Identifies one specific element
CSS selector uses #
Useful for unique sections
Can be targeted by JavaScript

Multiple Classes

Apply several classes to one element

multiple-classes.html

<div class="card featured">

  <h2>
    Featured Course
  </h2>

</div>

<style>

.card{

  padding:25px;

  border-radius:15px;

}

.featured{

  border:2px solid #1769d5;

}

</style>

Class + ID Together

Use both attributes on one element

class-id.html

<div
  id="main-course"
  class="course-card featured">

  <h2>
    Diploma in Computer Application
  </h2>

</div>

ID Anchor Link

Jump to a specific section

anchor-id.html

<a href="#courses">

  View Courses

</a>


<section id="courses">

  <h2>
    Our Courses
  </h2>

</section>

Back to Top

Use an ID for page navigation

back-to-top.html

<body id="top">

  ...

  <a href="#top">
    Back to Top
  </a>

</body>

JavaScript with ID

Select an element using getElementById()

javascript-id.html

<h2 id="message">
  Hello Student
</h2>

<button onclick="changeText()">
  Change Text
</button>

<script>

function changeText(){

  document.getElementById(
    "message"
  ).textContent =
    "Welcome to HTML!";

}

</script>

JavaScript with Class

Select class elements

javascript-class.html

<p class="course">
  HTML
</p>

<p class="course">
  CSS
</p>

<script>

const courses =
  document.querySelectorAll(
    ".course"
  );

courses.forEach(function(item){

  item.style.fontWeight =
    "bold";

});

</script>

Practical Course Cards

Real-world class usage

course-cards.html

<div class="course-grid">


  <div class="course-card">

    <span class="badge">
      CERTIFICATE
    </span>

    <h2>
      Certificate in Computer Application
    </h2>

    <p>
      Computer fundamentals and
      office productivity.
    </p>

  </div>


  <div class="course-card featured">

    <span class="badge">
      POPULAR
    </span>

    <h2>
      Diploma in Computer Application
    </h2>

    <p>
      Practical computer application
      skills.
    </p>

  </div>


</div>