Exercise 8 Demo: Part B
Developing Your Styles for These Elements
Working with the Header:
The Animals at my House
Variety is the spice of life and home.
The HTML coding used to create this header (I wrote this code first):
<header>
<img src="images/AnimalFarmLogo225.png" alt="Animal Farm Logo">
<h1>
The Animals at my House </h1>
<h3>
Variety is the spice of life and home.
</h3>
</header>
The CSS Document Styles used to create this header (in head of document):
<style type="text/css">
header {
border: 2px solid #523209; width: 100%; background-color: #f2ebcd; height: 180px;
}
header h1 {
font-family: 'Lobster Two', cursive; margin-top: 38px; font-size: 40px;}
header h3 {
font-family: serif; font-style: italic; font-weight: normal; font-size: 28px; margin: -15px 0 0 10px;
}
header img {
float: left; margin: -3px 10px 0 0;}
<style>
I also added a Link to a Google Font above my styles in the head of my document:
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
Go to Part C of Demo 8.
Go back to the Exercise 8 page.
© Claudia Faulk. Updated 7.20.