
Alana Warson
5,296 PointsSet header element and set it's value to 25% of viewpoint height.
I wrote .header { height=25%vh; }
I keep getting an error message: "Are you using the 'vh' unit to give the header below
/* Complete the challenge by writing CSS below */
.header {
height= .25vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Developer Diane's blog</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
Developer Diane’s Blog
</header>
<article>
<section class="intro">
<h1>The verdict is in. CSS Layout is great!</h1>
<p>I’ve been working with CSS for a while now, and I have to say, it’s pretty awesome. I love being able to separate content from presentation, and to keep all my styles in an external stylesheet.</p>
<p>I’ve had a pretty good grasp on the basics for a while now, but I needed to learn more about how to control layout with my CSS. Understanding CSS layout meant first exploring the parts of the CSS box model.</p>
</section>
<section class="featured">
<h2>The CSS Box Model</h2>
<p>There are lots of great resources online to help you learn the CSS Box Model. I like the CSS Tricks article <a href="https://css-tricks.com/the-css-box-model/" target="_blank">The CSS Box Model</a> by Chris Coyier. To quote the author:</p>
<blockquote>At the risk of over-repeating myself: <strong>every element in web design is a rectangular box.</strong></blockquote>
<p>That’s right! Every HTML element is considered by the browser to be a rectangular box.</p>
<p>The CSS Box Model consists of four properties: content, padding, border, and margin. I've included a graphic from Coyier’s article to illustrate this principle.</p>
<p class="clear">It’s pretty easy to understand the Content portion of the box model. The content is whatever your HTML consists of. It could be a paragraph full of text, or a bulleted list, or an image.</p>
<p>Beginning developers may have some trouble keeping the other parts of the box model straight, so let’s examine them one by one.</p>
</section>
<footer>©2020 Developer Diane.</footer>
</body>
</html>
3 Answers

Mel Rumsey
Treehouse StaffHi Alana Warson, With CSS you want to use a colon rather than an equal sign when setting values.
.header {
height= .25vh;
}
will need to be:
.header {
height: 25vh;
}
Hope this helps! Happy coding :D

Alana Warson
5,296 PointsI still get an error message saying, "Are you using the 'vh' unit to give the header element the correct height?

Mel Rumsey
Treehouse StaffAhhh I see, you are using .header
as if you are trying to change an element with a `class
name of "header". Try using just header to target the header element specifically. Also, viewheight is measured in percentages. If you want it to be 25% it will need to be 25vh.
header {
height: 25vh;
}