Web Lab 2: CSS Types, Tables & Lists
Part A – CSS Types
Task 1: Inline CSS
Create a simple HTML page with a heading (<h1>) and a paragraph (<p>). Use inline CSS to:
- Make the heading red
- Make the paragraph text blue and italic
Task 2: Internal & External CSS
Create an HTML page with:
- One heading (<h2>)
- A paragraph (<p>)
Use internal CSS to center the heading and give it a background color.
Create a separate external CSS file to style the paragraph:
- Set font-size to 18px
- Set color to green
- Use a different font family (e.g., Arial)
Part B – Tables
Task 3: Student Record Table
Create a table with the following columns:
- Student ID, Name, Class, Marks
Add at least 3 rows of data.
Apply the following styles:
- Table border
- Alternate row colors (zebra striping)
- Header row background color
Task 4: Timetable
Create a table showing a weekly class timetable (Mon–Fri).
Columns: Days, 1st Period, 2nd Period, 3rd Period.
Add at least 3 subjects in the timetable.
Style:
- Borders for all cells
- Different background color for header row
- Center-align all text
Part C – Lists
Task 5: Ordered & Unordered List
Create an unordered list of 5 fruits.
Create an ordered list of 5 countries.
Apply styles:
- Use square bullets for unordered list
- Use Roman numerals for ordered list
- Change list items’ font color and size
Task 6: Nested List (Menu Example)
Create a nested list to represent a website menu:
- Home
- Services
- Web Design
- Web Development
- SEO
- Contact
Style:
- Remove default list bullets
- Use custom icons (or list-style-type: none;)
- Add hover effect to list items (e.g., change color when hovered)
