Essential Question: How can I use CSS to format my web page?
Mastery Objectives:
SWBAT create pseudo-classes in CSS.
SWBAT create CSS ids and classes
Do Now: Take this quiz as many times as you want until you get the grade you want: https://www.quia.com/quiz/8554761.html
Using CSS selectors, you’ll give a recipe website some new style!
Start by making the image at the top of the page a little smaller. Navigate to style.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.
The font size of the recipe description should be larger. In style.css, write a CSS selector for the .description class.
Within its curly braces, add the following CSS:
font-size: 20px;
Next, let’s style the cooking time. The element 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;
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;
.ingredients li{
list-style: square;
}
Next let’s make the time for each preparation step appear purple. 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:
li p{
color: purple;
}
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, there is a p element 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-link class.
Then, add this code inside of the selector’s curly braces:
color: SeaGreen;
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: cursive;
<!DOCTYPE html>
<html>
<head>
<title>French Grandmother's Lemon Yogurt Cake</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="https://th.bing.com/th/id/OIP.iepeloLp21gporMrgckAMQHaE6?w=202&h=134&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="French Grandmother's Lemon Yogurt Cake"/>
<h1>French Grandmother's Lemon Yogurt Cake</h1>
<p class="description">Delicious cake that is easy to make and has a long history.</p>
<p id="cook-time">Total time: 40 minutes</p>
<h2>Ingredients</h2>
<h3>For the cake:</h3>
<ul class="ingredients">
<li>½ cup plain yogurt or Greek yogurt</li>
<li>1 cup granulated sugar</li>
<li>3 large eggs</li>
<li>1 ½ cups all-purpose flour</li>
<li>2 teaspoons baking powder</li>
<li>1/2 teaspoon salt</li>
<li>grated lemon zest, from 1 medium-size lemon</li>
<li>½ cup sunflower, grape seed or canola oil</li>
</ul>
<h3>For the glaze:</h3>
<ul class="ingredients">
<li>1/4 cup fresh lemon juice</li>
<li>3/4 cup of powdered sugar</li>
</ul>
<h2>Preparation</h2>
<ol>
<li<p>>Preheat the oven to 350˚F (175˚C). </li>
<li><p>Spray an 8-inch round cake pan with baking spray, rub inside surface of pan with a paper towel to cover evenly with the spray. Line bottom of pan with parchment paper and spray parchment paper lightly. Set aside.</li>
<li><p>In a large bowl, combine the yogurt, sugar, and eggs - stirring until well blended.</li>
<li><p>Add the flour, baking powder, salt and zest, mixing to just combine.</li>
<li><p>Add the oil and stir well. Don’t worry, at first it will seem to separate, but keep stirring till smooth.</li>
<li><p>Pour the batter into prepared pan.</li>
<li><p>Bake for 30-40 minutes or until the cake feels springy to the touch and a toothpick inserted into the center comes out clean (every oven is different, so check with the toothpick test rather than the time). Be careful not to overbake though.</li>
<li><p>Cool cake on a wire rack for 10 minutes; then turn it out of the pan onto the rack.</li>
<li><p>Combine the lemon juice and powdered sugar in a small bowl and stir until smooth. With a pastry brush, gently pat the glaze all over the cake. Just keep going over the cake till the glaze is gone. Some of it will drip off, but most of it will soak in. Allow cake to cool completely. Sprinkle with powdered sugar if desired and serve.</li>
</ol>
<p class="citation">Find this recipe and more <a href="https://thecafesucrefarine.com/french-grandmothers-lemon-yogurt-cake/ ">here</a>.</p>
</body>
</html>