I’m facing a strange problem with CSS overriding of ‘font-weight’ property. Given below is

Question

0

Asked: May 30, 20262026-05-30T00:12:40+00:00 2026-05-30T00:12:40+00:00

I’m facing a strange problem with CSS overriding of ‘font-weight’ property. Given below is

0

I’m facing a strange problem with CSS overriding of ‘font-weight’ property. Given below is the code showing the issue:-

‘font-weight’ for element ‘p’ is set to small (in the same way color set to purple). But font is still rendering as bold on FF/Chrome, while color overrides to purple.

Any idea why this is happening?

p {
  font-weight: small;
  color: purple;
}

#speciality_test {
  font-weight: bold;
  color: red;
}

.class_speciality_test {
  font-weight: bold;
  color: red;
}

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

<head>
  <meta charset="utf-8" />

</head>

<body>
  <div id="speciality_test">
    <p>
      Inside identifier... HTML CSS test pages.
    </p>
  </div>
  <div class="class_speciality_test">
    <p>
      Inside class... HTML CSS test pages.
    </p>
  </div>
</body>

</html>