Html Question posted in
Some basic documentation can be found here.

Html – Background color not being correctly applied to an element

I am learning css and I noticed that if I applied background color to all elements using the "*" attribute, although its being applied to the whole page and element ,the horizontal area next to the element is not showing background color. I have tried applying background color to element and body separately but still it doesn’t get fixed. Any suggestions on how to fix this will be great help.

Here is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="index.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Doc</title>
</head>
<body>
    <button>hi</button>
</body>
</html>

And here’s css code:

*{
    background-color: black;
}
Tags:

2

Answers


  1. 0

    It’s because you’re using bootsrap, it defines background color on body element:

    enter image description here

    You can increase specificity of body selector, for example add a class to body

    <body class="your-body">
    <button>hi</button>
</body>

    and then reference it by class in css:

    .your-body {
  background-color: black;
}
    Login or Signup to reply.
  2. 0

    When using Bootstrap, some default styles may override your custom styles. You can use more specific CSS selectors or add !important to your styles.

    for example:
    You can use !important rule to give the 1st priority.

    * {
    background-color: black !important;
}

    or you can edit the background color for body tag.

    body {
    background-color: black !important;
}

    for your reference. here you can see the background color overrides by bootstrap css.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search