Using the class attribute

Lesson: Using the class Attribute in HTML and Applying CSS Classes

---

Introduction

The class attribute is a fundamental feature in HTML that allows us to apply CSS styles to specific elements easily. By assigning a class name to an element, we can define its appearance using CSS rules. This makes it possible to create reusable and maintainable styles across multiple elements.

---

How to Use the class Attribute

1. HTML Structure
   • To apply a class to an element, use the class attribute within the opening tag of the HTML element.
   • Assign a class name to the class attribute, ensuring it is descriptive and meaningful.
2. CSS Rules
   • Define the class in your CSS using a period (.) followed by the class name.
   • Add the desired CSS properties and values.

---

Example

HTML Code:

---

Output

• The first < h1 > element will appear in blue, centered, and larger in size.
• The paragraphs with the highlight class will have a yellow background and black text, with padding applied.

---

Key Points

• Class Naming: Choose descriptive class names for better readability and maintainability.
• Dot Notation in CSS: Use a period . before the class name in CSS to define its styles (e.g., .highlight).
• Reusability: A class can be applied to multiple elements, making it a powerful tool for consistent styling.

---

Assignment: Applying the class Attribute

Part 1: Understanding the Basics

1. Create an HTML file with the following:
   • A heading with a class of main-title.
   • Two paragraphs: one with a class of important and another with no class.
2. Create a CSS file with styles for:
   • main-title: Set the font color to green and align the text to the center.
   • important: Add a light gray background and italicize the text.

Part 2: Experimentation

Modify your CSS to:

• Add padding and a border to the important class.
• Change the font size of the main-title.

---

Answer Key

HTML Code:

CSS Code:

Output:

• The < h1 > will appear green, centered, and larger in font size.
• The important paragraph will have a light gray background, italic text, padding, and a black border.

---

Reflection Questions

1. What happens if you apply multiple classes to the same element? Try it!
2. How can you override styles defined by a class in your CSS?

---

By completing this lesson, you should now feel confident applying CSS classes using the class attribute and understand how they can improve your web development workflow.