Essential Question: How can I edit a CSS file to format text?
Mastery Objectives:
SWBAT create and edit a CSS style sheet to format text.
SWBAT use attributes in CSS to format text and background images.
Directions: Copy and paste the code for index.html and create the file. Create a style.css document.
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-color property.
Now change how the text is aligned in the top .header section.
In your .header rule set, align the text in the center using the text-align property.
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.
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 opacity property to make it 50% transparent.
In the Projects section, make the section titles bold.
Select the .title elements, and add a font-weight property to make their text bold.
Change the main title color so that it matches the background color more nicely. Set the color for h1 elements to Azure.
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.
Finally, let’s make the background of the page more interesting.
Within the body selector, set the background-image property to this URL:
https://content.codecademy.com/courses/learn-css-selectors-visual-rules/hypnotize_bg.png
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/travel.jpeg" />
<h1>Olivia Woodruff</h1>
<p class="about-me">I am a developer specializing in HTML and CSS. I like to run, bike, and make coffee using an Aeropress.</p>
</div>
<h2>Projects</h2>
<p class="title">Web Development projects</p>
<ul>
<li>Coffee Bruër</li>
<li>Taco Finder</li>
<li>CSS Selector Finder</li>
<li>HTML Formatter</li>
</ul>
<p class="title">Design projects</p>
<ul>
<li>Yum Yum Fudge Inc.</li>
<li>University of Marimont Dance Marathon</li>
</ul>
<h2>Contact</h2>
<p>Find me on Twitter, Dribbble, and GitHub.</p>
<h6>© Copyright. All Rights Reserved.</h6>
</body>
</html>