Why do style declarations inside the body selector not override Bootstrap styles?-CodePudding

I'm learning Bootstrap, and I can't understand why using body selector does not override default Bootstrap styles. Meanwhile, my own styles apply when using a universal selector (*). Here is the HTML (you see that I'm linking Bootstrap before my style sheet):

body {
  font-family: 'Oxygen', sans-serif;
  font-size: 24px;
  font-weight: normal;
}

<!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>David Chu's China Bistro</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>Hello, World!</h1>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>

I want to set my own font styles, and it's not working. However, it changes with a universal selector (*). What's the problem?

CodePudding user response：

What's happening here is that your CSS rules for body are being overridden by the bootstrap properties for other more specific elements, like h1. Your rules will only apply to plain text within the body element.

CSS behaves by the rules of specificity. When specificity is equivalent, the CSS precedence goes from:

HTML elements with a style attribute
<style> tag inside of an HTML document
External CSS documents, with last loaded taking precedence

It's worth noting that any CSS property with the !important declaration raises the item in the precedence stack, but that can be overridden if a competing CSS property elsewhere in the chain also has an !important declaration.