Scribd
Upload
3 views

CSS Visual Rules Project Instruction

The document outlines a project to enhance a photography portfolio site using CSS. It includes specific tasks such as changing background colors, text alignment, font sizes, and adding transparency to elements. The final task encourages further personalization of the site's appearance.

Uploaded by

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

CSS Visual Rules Project Instruction

The document outlines a project to enhance a photography portfolio site using CSS. It includes specific tasks such as changing background colors, text alignment, font sizes, and adding transparency to elements. The final task encourages further personalization of the site's appearance.

Uploaded by

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

Olivia Woodruff Portfolio

In this project, you'll use your knowledge of CSS visual rules to create rule sets and improve the
appearance of a photography portfolio site!

Tasks
1.
Look over index.html to review the different HTML elements you have to work with, then
navigate to style.css.
Start by making the header section stand out a bit more. Select the .header element, and make
its background color CornflowerBlue by using the background‐colorproperty.

2.
Now change how the text is aligned in the top .headersection.
In your .header rule set, align the text in the center using the text‐align property.

3.
Next, use CSS to make the paragraph below Olivia’s name have a larger text size.

In style.css, select the .about‐me element, and set its font‐size property to 20px.

4.
The .about‐me paragraph looks a little dark against the light blue background, maybe it would
look nice if it blended more with the background.
Within the .about‐me selector, use the opacityproperty to make it 50% transparent.

5.
In the Projects section, make the section titles bold.
Select the .title elements, and add a font‐weightproperty to make their text bold.

6.
Change the main title color so that it matches the background color more nicely. Set
the color for h1elements to Azure.

7.
Instead of the page being in the default Times font, change the font of the entire page.
Select the body element and make the font‐family of the page Georgia.
8.
Finally, let’s make the background of the page more interesting.
Within the body selector, set the background‐imageproperty to this URL:
https://s3.amazonaws.com/codecademy‐content/courses/learn‐css‐selectors‐visual‐
rules/hypnotize_bg.png

9.
Great work! Feel free to keep coding and edit the visual rules to personalize the site's
appearance!

You might also like