Scribd
Upload
18 views3 pages

Class Exercise - CSS Selectors (1)

This document provides instructions for a class exercise on styling a luxury car comparison website using CSS selectors. It includes setup instructions for linking a CSS file, pre-styled navigation, and specific styling requirements for car review articles, images, quick facts, and rating stars. Students are required to implement these styles to enhance the visual presentation of the website.

Uploaded by

ayandiswasthembelendlovu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views3 pages

Class Exercise - CSS Selectors (1)

This document provides instructions for a class exercise on styling a luxury car comparison website using CSS selectors. It includes setup instructions for linking a CSS file, pre-styled navigation, and specific styling requirements for car review articles, images, quick facts, and rating stars. Students are required to implement these styles to enhance the visual presentation of the website.

Uploaded by

ayandiswasthembelendlovu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Faculty of Information Technology

Intro to WebTech

Class Exercise – CSS Selectors

CSS Selectors Practice: Luxury Car Reviews

You are given the HTML for a luxury car comparison website (provided by your
lecturer). Your task is to style it using CSS selectors.

Instructions
1. Set Up Your Files

 Create a new CSS file called styles.css

 Link it to the HTML by adding this inside the <head> section:


<link rel="stylesheet" href="styles.css">

2. Pre-Styled Navigation (Copy This First!)

Add this to styles.css to style the navbar (already done for you):

/* ----- NAVIGATION (Provided) ----- */


#main-nav {

background-color: #2c3e50;

padding: 1rem 0;
font-family: Arial, sans-serif;

.nav-list {

list-style: none;

display: flex;

justify-content: center;
gap: 2rem;
margin: 0;

padding: 0;

.nav-item a {

color: white;

text-decoration: none;

font-weight: bold;
font-size: 1.1rem;

padding: 0.5rem 1rem;

border-radius: 4px;

transition: background-color 0.3s;

.nav-item a:hover {

background-color: #34495e;

Your Tasks: Style the Car Reviews

Basic Requirements (Must Do)

1. Style each car review article (product-review class):

o Background: #f9f9f9

o Border: 1px solid #e0e0e0


o Border radius: 8px

o Padding: 1.5rem

o Margin bottom: 1.5rem


2. Add Car Images

 Download 9 car images (3 for each brand)


 Save them in an /images folder
 Update the HTML with correct paths (e.g., src="images/bmw3.jpg")

3. Style car images (car-image class):

o Width: 300px

o Auto height (to keep proportions)

o Rounded corners: 8px

o Add a slight shadow: box-shadow: 0 2px 5px rgba(0,0,0,0.1)


4. Style the "Quick Facts" section (quick-facts class):

o Background: #f0f0f0

o Padding: 1rem

o Border-left: 4px solid #3498db

o Italic text
5. Style the rating stars (rating class):

o Color: gold

o Font weight: bold

You might also like