Skip to content
Sign upLog in
← Back to Community

How would I add a banner to the top of my page and then change the colour of it? (HTMl)

Profile icon
CharlotteJoanJo

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

Voters
Profile icon
MartinaIllodo
Profile icon
VaishaviKottama
Profile icon
CharlotteJoanJo
Comments
hotnewtop
Profile icon
Coder100

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>
Profile icon
Whacko

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.

Profile icon
Coder100

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

@JavaMaster1

Profile icon
Whacko

@Coder100
Why does it matter?

Profile icon
Coder100

@JavaMaster1
convention is to put it in <head>

Profile icon
Whacko

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

Profile icon
Coder100

¯\_(ツ)_/¯ ok then

@JavaMaster1

Profile icon
Whacko

ლಠ益ಠ)ლ

@Coder100

Profile icon
Coder100