Html - Why background is not purple, instead it is showing as a border. Since id has more preference than a class, so the background should be purple

Jaybee365
July 18, 2023
125 views
0 votes
2 Answers

I am just learning CSS, so as per the cascading system id should have preference over class. the class "box" has a blue background when I applied purple background to the id "outer-box" it should replace the box background, but it appearing as a purple border.

.box {
  background-color: blue;
  padding: 10px;
}
#outer-box {
  background-color: purple;
}

.inner-box {
  background-color: red;
}

p {
  color: yellow;
  margin: 0;
  padding: 0;
}

.white-text {
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Cascade</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="box" id="outer-box">
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
  </div>
</body>

</html>

enter image description here

Tags: css html

Answers

- CodeBird
- July 18, 2023 at 4:12 am
- 0 votes
0
It’s not the border that you are seeing. It’s actually the background applied to the outer box, which contains other divs that have other blue blackground, so you get to see only a little of the outer div.

Try adding some divs just under the outer-box with no styling and you can see that the background is applied.

Something like this
```
<div class="box" id="outer-box">
<div>Div with no styling </div>
<div>Another div </div>
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
```
Login or Signup to reply.

- cSharp
- July 18, 2023 at 4:12 am
- 0 votes
0
#outer-box is correctly being applied. You just have another box inside that just has a class box.
```
<div class="box" id="outer-box"> <---- purple
  <div class="box"> <---- blue
    <p>Yellow Text</p>
    <div class="box inner-box"> <---- red
      <p class="white-text">White Text</p>
    </div>
  </div>
</div>
```
You see a "border" of purple and blue because you set padding: 10px in box class. You’re seeing that padding, not a border.
Login or Signup to reply.