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

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?

htmlcsstwitter-bootstrap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions