Scribd
Upload
34 views3 pages

Lab Assignment 5

Uploaded by

clans2806
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
34 views3 pages

Lab Assignment 5

Uploaded by

clans2806
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

Affordable Excellence in Education

COSC 333 – Web Programming


Lab Assignment 5
Advanced CSS Selectors and Styling Practice
CSS and Javascript
Fall 2023

Dr. Roaa Soloh


CIS Department
Affordable Excellence in Education

Objective: To demonstrate proficiency in using various CSS


selectors, pseudo-classes, and nested styling within a complex
web page structure. Using both stylesheet as well QuerySelector
function in Javascript.
Instructions:
You will have the index.html file uploaded, you are not allowed to
change anything in it, except adding the links for needed files of styling
and script.
Using CSS selectors you have to do the following:

 Select the header element and give it a background color of your


choice, with full padding.
 Select all the navigation links and change their text color.
 Select the 'Services' link in the navigation and apply a background
color.
 Select the 'Article 1' heading and change its font style to italic.
 Select the 'Widget 2' and change its background color and border.
 Select the footer element and change its text color and font size.
 Select all article elements inside #main-content and apply a border
and padding.
 Select the last article and apply a unique background color.
 Select all p elements within articles and change their font color.
 Apply a hover effect to the navigation links by changing their
background color on hover.
 Bonus: Create a media query that adjusts the styling for smaller
screens (e.g., reduce font size and margins in the main content
area).
Affordable Excellence in Education

Using QuerySelector function you have to do the following:

 Apply a style to all even-numbered list items in the navigation


when clicked.
 Select the first widget in the aside and give it a border with purple
color.
 Select the "About" link in the navigation and make its text color
red when hovering over it.
 Select all paragraphs that are descendants of the main content area
and give them a margin of 10px when clicked.
 Select the widget elements in the aside and give them a shadow on
hover.
 Select the last-child of the article and give it a different font style
when clicked.
 Select the "Contact" link and underline it, but only when it's not
hovered over.
 Select the footer and change its background color to a pale color
when double-clicked.
 Add a border and padding to all list items in the navigation when
right-clicked.(contextmenu represents right click event)
 Style the header h1 with a background color and white text on
click.
 Bonus: Add a transition property to smooth out hover effects.

You might also like