Approx. read time: 2.3 min.
Post: Using CSS classes and the class attribute
Using CSS Classes and the Class Attribute
Objective:
Using CSS classes and the class attribute: By the end of this lesson, you will be able to:
- Understand the purpose and syntax of CSS classes.
- Apply CSS classes to HTML elements to style them effectively.
Part 1: Getting Started with HTML
Open your text editor and create a new file named CSSclasses.html. Copy the following code into your file:
Save the file and open it in your browser. Observe the plain design.
Part 2: Adding CSS Styles
Now, let’s enhance the appearance using CSS classes.
- Add a
< style >tag in the< head >of your file:
Define a CSS class called header:
Apply the header class to the first < div >:
Part 3: Adding More CSS Classes
- Create another CSS class called
title:
Using CSS classes and the class attribute.
Apply the title class to the second < div >:
Using CSS classes and the class attribute
Create a third CSS class called body:
Apply the body class to the third < div >:
Part 4: Final HTML File
Here’s the complete code:
Assignment
Task:
- Modify the existing code to:
- Add a new CSS class
footerwith properties:background-color: graytext-align: centerpadding: 10px
- Add a
< div >at the bottom of the page and apply thefooterclass.
- Add a new CSS class
Expected Code:
Answer Key:
- A new
.footerCSS class was added to the< style >block. - A new
< div >with classfooterwas added at the end of the body.
Sample Output:
This lesson focuses on understanding and applying CSS classes to style HTML elements effectively. It begins by introducing the concept of CSS classes, which allow for reusable and flexible styling across multiple elements. The lesson guides learners through creating a basic HTML structure and then progressively adding CSS styles to enhance the visual design of different sections, such as a header, title, body, and footer.
By using the class attribute, each section is styled uniquely based on predefined CSS rules, showcasing the power and efficiency of CSS in organizing and maintaining web design. The lesson concludes with an assignment to reinforce these concepts by creating a new footer class and applying it to the webpage. This provides a hands-on experience in structuring and styling webpage’s using best practices in CSS and HTML integration.
Related Posts
About the Author: Bernard Aybout (Virii8)
