Web Programming Lab - Class 04 Documentation

Date: October 21, 2025
Department: Computer Science & Engineering
Institution: Green University of Bangladesh

📚 Class Overview

Class 04 focused on advanced CSS styling techniques, including CSS pseudo-classes, element positioning, color systems, and table styling. Students learned how to create interactive web elements and implement professional styling approaches.

🎯 Learning Objectives

Understanding and implementing CSS pseudo-classes (:hover, :active, :link)
Mastering element centering techniques using margin and auto values
Working with HSL and RGB color systems
Creating responsive table layouts
Implementing background images with proper positioning
Understanding border styles and box model properties

💻 Topics Covered

1. CSS Pseudo-Classes

Example Implementation:

.A:hover {
    color: red;
}
.A:active {
    color: green;
}   
.A:link {
    color: orange;
}

Purpose: These pseudo-classes provide interactive feedback to users when they interact with links.

2. Element Centering Techniques

Centering Method Used:

.d {
text-align: center;
margin: 20px auto;
width: 80%;
}

Explanation:

margin: 20px auto; - Centers the element horizontally
width: 80%; - Provides specific width for auto margins to work
text-align: center; - Centers content within the element

3. Color Systems

HSL Color System Implementation:

.aa { color: hsl(0, 80%, 50%); }    /* Red */
.bb { color: hsl(240, 80%, 50%); }  /* Blue */
.cc { color: hsl(120, 80%, 50%); }  /* Green */
.dd { color: hsl(60, 80%, 50%); }   /* Yellow */

HSL Benefits: More intuitive than RGB for color manipulation and theming.

4. Background Image Styling

body {
    background-image: url("image_03.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
}

5. Table Styling and Structure

Professional Table Styling:

table, th, td {
    text-align: center;
    border: 1px solid purple;
    border-collapse: collapse;
    padding: 10px;
}

th {
    background-color: blueviolet;
}

👥 Class Participants

Student Name	Student ID	Course
Majharul Islam	232002256	CSE
Amar	232002257	CSE
Rafiq Ahmed	232002258	CSE

🔧 Technical Skills Developed

Skill	Implementation	Application
CSS Pseudo-classes	:hover, :active, :link	Interactive user interface elements
Element Positioning	margin: auto, text-align: center	Responsive layout design
Color Systems	HSL, RGB values	Consistent color theming
Background Styling	background properties	Professional page backgrounds
Table Design	border-collapse, padding	Data presentation

📝 Key Takeaways

Centering Elements: Use margin: auto with a defined width for horizontal centering
Interactive Design: Pseudo-classes enhance user experience through visual feedback
Color Consistency: HSL provides better control over color variations
Professional Tables: Proper spacing and borders improve data readability
Background Images: Fixed attachment creates engaging layouts

🚀 Next Steps

Practice implementing more complex pseudo-class combinations
Explore CSS Grid and Flexbox for advanced layouts
Learn responsive design principles
Study CSS animations and transitions
Implement JavaScript for dynamic interactions

📁 Files Created/Modified

class_04.html - Main HTML structure with student table
class_04.css - Complete styling with pseudo-classes and centering
class_04_documentation.html - This comprehensive documentation

Documentation Created: October 21, 2025
Instructor: Web Programming Lab
Department: CSE, Green University of Bangladesh