can't link external css when bootstrap is linked-CodePudding

css i'm trying to link my external css file but it's not running when i'm linking bootstrap. it gets linked when i comment out the bootstrap link.

body {
  background-color: black;
  font-size: 200px;
}

html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  it's not working.

</body>

</html>

CodePudding user response：

you should link bootstrap above your own css files

css is cascading so the lower file is more important and can rewrite the upper ones

use !important if replacing your link tags didn't work

CodePudding user response：

Some items require !important to be placed with them in order to over-ride Bootstrap commands.

I can't honestly remember you whether the background or font-size commands on your body element requires it or not but I've used it below as an example.

Add the same thing to any of your custom CSS commands that don't seem to be working.

body {
  background-color: black !important;
  font-size: 200px !important;
}