put a single border around a header and paragraph and add a continuous background color-CodePudding

I read the previous question about putting a single border around a header and paragraph but it's not working. I'm thinking there is some assumed HTML code that also goes with the answer that I am not aware of.

Also, I'd like the whole "box" around the header and paragraph one background color instead of whitespace between the header and the paragraph.

I'd like to center the header and left justify the paragraph.

I'd like the background to be lightyellow and the text darkgreen.

Here is the code I have but the div part isn't workingenter image description here:

div {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}

<div>
<h5 style="background-color:lightyellow; color: darkgreen; text-align: center;">HOLIDAY PRICING</h5>
<p style="background-color:lightyellow; color: darkgreen; "><i>Major holidays (and major holiday weekends) are very busy times for us and incur extra expenses for labor and transportation).  So anything booked during those times will have a surcharge added to the bill.</i></p>
</div>

Can someone tell me the exact code I need to use from start to end to get this to work?

Thank you in advance for your help!

CodePudding user response：

I think your problem lies on your style, you need to put div inside style tag like this one below

<style>
div {
  font-family: consolas;
  background-color: lightyellow;
  border: 2px solid #73AD21;
  border-radius: 25px;
}
</style>

<div>
<h5 style="background-color:lightyellow; color: darkgreen; text-align: center;">HOLIDAY PRICING</h5>
<p style="background-color:lightyellow; color: darkgreen; "><i>Major holidays (and major holiday weekends) are very busy times for us and incur extra expenses for labor and transportation).  So anything booked during those times will have a surcharge added to the bill.</i></p>
</div>

i hope this will solve your problem

CodePudding user response：

The code:

<div style = "font-family: consolas;
              border: 2px solid #73AD21;
              border-radius: 25px;
              background-color:lightyellow;
">
<h5 style=" color: darkgreen; 
            text-align: center;">HOLIDAY PRICING</h5>
<p style=" color: darkgreen; "><i>Major holidays (and major holiday weekends) are very busy times for us and incur extra expenses for labor and transportation).  So anything booked during those times will have a surcharge added to the bill.</i></p>
  </div>

The explanation will be separated into sections.

Highlighting

So first, if you want to remove the whitespace and cover the whole box that color, first to explain, every element has margin and padding that separates them from being connected. But this is not the simplest way to do it. The other way is to move the background-color part from both but enter this in the div:

<div style = "background-color: lightyellow;">
...
</div>

This is because the <div> covers the whole heading and paragraph and will highlight everything inside the div that color.

The Stuff in the `div{}`

The answer they put is actually CSS code, so delete the div{}(but not the stuff inside it). Then do the same thing again.

<div style = "
          background-color: lightyellow; 
          font-family: consolas;
          border: 2px solid #73AD21;
          border-radius: 25px;
          background-color:lightyellow
">
...
</div>

Now you should see the problem fixed.

Highlighting

The Stuff in the div{}

The Stuff in the `div{}`