Complete the style rules above by providing your Google Fonts as values to the font- family property. Be sure to include a web safe font as a fallback if the browser fails to load the Google Font. Apply the primary font class to the Level One Section Heading. Then apply the secondary font class to the Level Two Section Heading. Finally, create a style rule that applies the third Google Font to any paragraph element that immediate follows an element with the secondary font class.
Question
what I have so far
<!DOCTYPE html>
<html lang="en">
<style>
body{
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #556271;
color: white;
}
h1{
color: #fe6a67;
text-align: center;
font-weight: normal;
text-transform: uppercase;
border-top: 1px dotted #d4dccd;
margin-top: 30px;
}
h2{
font-size: 1em;
text-align: center;
}
body{
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1{
width: 2px;
border-top: 1px dotted;
border-top-color: #506D84;
}
h2{
text-align: center;
}
</style>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.first>h2, .second>h2, .third>h2 {
margin-top: 10px;
margin-bottom: 10px;
}
.image {
width: 200px;
}
</style>
</head>
<body>
<div class="first">
<h1>Cursus Eget</h1>
<p>Cursus EgetPurus sit amet volutpat consequat mauris nunc congue nisi vitae. Suscipit tellus mauris a diam
maecenas sed enim ut sem viverra aliquet eget sit.</p>
</div>
<div class="second">
<h2>Diam</h2>
<p>Urna condimentum mattis pellentesque id nibh tortor. Id aliquet lectus proin nibh nisl condimentum id
venenatis. A condimentum vitae sapien pellentesque habitant.</p>
</div>
<div class="third">
<h2>Aliquam Sem Fringilla</h2>
<p>Pellentesque, NecEst velit egestas dui id ornareEst ultricies integer quis auctor elit</p>
</div>
<img src="21.png" alt="picture" class="image">
</body>
</html>
To applying google font to the external CSS style sheet we just have to select google fonts by + symbol and then it will show the right side menu with the title "Selected Families" and in that, you can find the "Use on the web" option, and in that option, there is two more option <link> and @import choose @import option and copy inner part of <style>.
Now paste that code into your external CSS style sheet. That you can see in Step 3.
Then we have to create CSS style rules and apply those CSS style rules as a class to Level One Section Heading and Level Two Section Heading as a primary-font class and secondary-font class respectively.
|
.primary-font { .secondary-font { |
Now, we have to create a third rule for the paragraph element that immediately follows an element with a secondary-font class.
So for that, we have to use sibling selector
Sibling selector is using for the make rule for elements that immediately follow a particular element, id, or class. And element, id, or class must have the same parent element, which makes them siblings.
Syntax:
|
element_name/class_name/id + element_name/class_name/id { // style rule } |
Example:
|
h1 + p { background-color: pink; } |
The above example's style rule will apply to all paragraph elements which immediately follow the h1 tag.
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 1 images
