Scribd
Upload
10 views

CSS Selectors and Visual Rules Project Instructions

The document outlines a series of tasks for styling a webpage using CSS selectors. Tasks include adjusting image size, modifying font sizes for descriptions, styling specific elements like cooking time and ingredient lists, changing link colors, and setting a uniform font family for various text elements. Each task provides specific CSS rules to implement in the corresponding stylesheet.

Uploaded by

seporeyt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS Selectors and Visual Rules Project Instructions

The document outlines a series of tasks for styling a webpage using CSS selectors. Tasks include adjusting image size, modifying font sizes for descriptions, styling specific elements like cooking time and ingredient lists, changing link colors, and setting a uniform font family for various text elements. Each task provides specific CSS rules to implement in the corresponding stylesheet.

Uploaded by

seporeyt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Selectors and Visual Rules Project

Tasks

1.
Before you begin, take a look at the site's structure in index.html.
Start by making the image at the top of the page a little smaller. Navigate
to cssselectors.css and write a CSS selector for the img tag.
Within its curly braces, write:
height: 150px;
Try experimenting with the 150 number and observing the results.

2.
The font size of the recipe description should be larger. In style.css, write a CSS selector for
the .descriptionclass.
Within its curly braces, add the following CSS:
font-size: 20px;

3.
Next, let’s style the cooking time. The element on line 15 of index.html has an id attribute
of cook‐time. Navigate to style.css and add a cook‐time ID selector.
Inside of its curly braces, write:
font-weight: bold;

4.
Now, let’s change the bullet points of the ingredient list to squares instead of circles. Start by
writing a selector for the li elements inside of the .ingredients element.
Then, write this inside of its curly braces:
list-style: square;

5.
Next let’s make the time for each preparation step appear gray. In style.css, write a selector
for p elements that also have a class of .time.
Then, inside of this selector’s curly braces, write:
color: gray;
6.
At the bottom of the page, there’s a link to the full recipe. Let’s make the link a different color.

Notice that in index.html, on line 42, there is a pelement with a class of citation, then
an a element inside of it with a class of external‐link. Navigate to style.css and write a
selector using external‐linkclass.
Then, add this code inside of the selector’s curly braces:
color: SeaGreen;

7.
Finally, let’s make the font Helvetica instead of the default Times New Roman. Instead of
writing multiple selectors to apply the font‐family property, write a selector that applies
a font‐family attribute to all text at once.
The selector should target the h1, h2, p, and li elements.
To change their font, include this line of code inside the curly braces:
font-family: Helvetica;

You might also like