How to create a HTML box at the top of the page? - html

Question

I have recently started learning html and css but I cant seem to figure out which approach is the best to get a certain task done .
I want to create a box at the top of the page that covers the whole screen from left to right at a certain height. And inside the box I'd like to have a text which properties can be controlled separately from the box .
So if have created 2 div and assigned 2 ID , one for the text and one for the box . And used CSS to modify the properties of each .
Am I working right so far ?

Answer 1

You have to add any tag containing the text. This is the best solution.
Example:
<header>
<div class="content">
<p>some text</p>
</div>
</header>
And the CSS
header { width: 100%; padding: 20px 0; }
header .content { width: 1000px; margin: auto; }
header .content p { font-size: 22px; color: #000; }

Answer 2

You are correct.
But If you uses classes you will be able to re-use them multiple times on the same page without any conflicts.
When you come to style anything on a page, you will use the wrapping element and/or class/id to control how it is displayed.
.outer {
background: yellow;
padding: 3em 0;
}
.outer.red {
background: red;
height: 60px;
}
.inner {
background: green;
width: 500px;
margin: 0 auto;
color: #fff
}
.inner p {
border-bottom: 2px solid blue;
}
<div class="outer">
<div class="inner">
<p>Did he speak to you? Would you just answer? What things? What people? A month ago, Gus was trying to kill both of us. And now, he pulls you out of the lab and employs you as... what... a, an assistant gunman? A tough guy? Does that make any sense
to you? He says he sees something in you. What kind of game is he playing. Does he think you're that naïve? He can't truly think that you'd forget... let alone Gale, let alone Victor... and all the horror that goes along with all of that.</p>
<p>It's enough. This is still the best way. You go after him with a gun, you'll never get out of it alive. But with this... you slip it into his food or drink, there shouldn't be any taste or smell... thirty-six hours later... poof. A man his age, working
as hard as he does... no one will be surprised. Mike can have his suspicions, but that's all they'll be. Please, one homicidal maniac at a time.</p>
</div>
</div>
<div class="outer red">
</div>
<div class="inner">
<p>Did he speak to you? Would you just answer? What things? What people? A month ago, Gus was trying to kill both of us. And now, he pulls you out of the lab and employs you as... what... a, an assistant gunman? A tough guy? Does that make any sense to
you? He says he sees something in you. What kind of game is he playing. Does he think you're that naïve? He can't truly think that you'd forget... let alone Gale, let alone Victor... and all the horror that goes along with all of that.</p>
<p>It's enough. This is still the best way. You go after him with a gun, you'll never get out of it alive. But with this... you slip it into his food or drink, there shouldn't be any taste or smell... thirty-six hours later... poof. A man his age, working
as hard as he does... no one will be surprised. Mike can have his suspicions, but that's all they'll be. Please, one homicidal maniac at a time.</p>
</div>