Ton Duc Thang University
Faculty of Information Technology
WEB PROGRAMMING AND APPLICATIONS
(503073)
Lab 2
by Mai Van Manh
Objective:
This week, you will enhance your understanding of CSS by styling a set of provided HTML
files. The given HTML files contain only structural markup and lack any styling. Your task
is to create and apply CSS rules to improve the visual appearance of these pages, aligning
them with the provided illustrative examples.
Key Requirements:
- CSS Styling: Write CSS code to style the pages according to the reference images.
- Non-Intrusive HTML Editing: You are not permitted to modify the HTML code
directly, except for updating class attribute values as necessary.
- Separate Stylesheet: Place your CSS code in a standalone file (e.g., style.css) and
link it to the HTML files using the <link> tag in the <head> section.
Before beginning the exercises, ensure you have reviewed the tutorial videos
corresponding to this lab for guidance on best practices and techniques.
Exercise 1: Customizing a Button
Create a .black-button class to style a button as shown in the images. The button should
have a black background, white text, and slightly rounded corners. On hover, its
background color should transition smoothly to gray (#808080) over 0.5 seconds and
revert when the mouse leaves. Use the :hover pseudo-class and the transition property to
implement the effect.
Default state of the button Button state on hover
Web Programming and Applications - Lab 02 – Page 1
Ton Duc Thang University
Faculty of Information Technology
Exercise 2: Styling a Table
You are provided with an HTML file containing a bare table that lists Apple products. Your
task is to write CSS to style and decorate the table.
The table should span the full width of the container, with borders collapsed for a clean
layout. Apply padding and center-align the text in each cell, and make sure the header
row has a distinct background color with bold text. Use alternating row colors to improve
readability and apply a hover effect that highlights rows when the mouse is over them.
Table before styling
Table after applying CSS styling
Web Programming and Applications - Lab 02 – Page 2
Ton Duc Thang University
Faculty of Information Technology
Exercise 3: Registration Form
Figure 1. HTML Form without CSS
Figure 2. HTML Form with CSS
Exercise 4: Responsive Website
Figure 1. Plain HTML page
Web Programming and Applications - Lab 02 – Page 3
Ton Duc Thang University
Faculty of Information Technology
Figure 2. HTML page with CSS applied when running on PC
Figure 3. HTML page with CSS applied when running on tablet devices
Web Programming and Applications - Lab 02 – Page 4
Ton Duc Thang University
Faculty of Information Technology
Figure 4. HTML with CSS applied when running on mobile devices
Exercise 5: Chat Conversation
Figure 1. HTML only
Figure 2. HTML with CSS applied
Web Programming and Applications - Lab 02 – Page 5
Ton Duc Thang University
Faculty of Information Technology
Exercise 6: Simple ListView (using flexbox)
Exercise 7: Full-Height Grid Layout
In this exercise, you are tasked with creating a full-width, full-height container that uses
CSS Grid to display a grid with 3 rows and 4 columns. Each grid cell should contain
centered text. The container should take up the entire viewport, and each cell should have
a background color with centered text. Add appropriate spacing between the cells using
grid gaps.
Before using CSS Grid After using CSS Grid
Web Programming and Applications - Lab 02 – Page 6
Ton Duc Thang University
Faculty of Information Technology
Exercise 8: Student Schedule Table
Figure 1. Plain HTML Table
Figure 2.. HTML Table with CSS applied
Web Programming and Applications - Lab 02 – Page 7
