Ask coding questions

← Back to all posts
How would I add a banner to the top of my page and then change the colour of it? (HTMl)
CharlotteJoanJo (0)

I would like to have the top portion of the page a different color than the rest of it

Comments
hotnewtop
Coder100 (18118)

Sure:

<body>
  <div class="banner">Hello, world!</div>
</body>

And then, in your style.css:

.banner {
  background: orange;
  font-size: 150%;
}

Ideally, your code should now be:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <!-- ... -->
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="banner">Hello, world!</div>
</body>
</html>
Whacko (324)

This is what you need:

<div class="header">
  <h1>Our Site</h1>
</div>
<div class="footer">
  <p>We do stuff.</p>
</div>
<style>
.header {
  background: lightblue solid; /* Change the color to whatever you want. */
}
.footer {
  background: blue solid; /* Change the color to whatever you want */
  border-radius: 8px; /* To make the corners a little round. */
}
</style>

Tell me if you need anymore.

Coder100 (18118)

reee why do you keep on putting the style.css in the bottom of the page?!!? @JavaMaster1

Coder100 (18118)

@JavaMaster1 convention is to put it in <head>

Whacko (324)

@Coder100 Well, that's not how I do it. He can just take the code and put it wherever he wants.