Search code examples
htmlcss

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.

*{
    background-color: black;
}
<!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>

Solution

  • 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