Rules Specificity

Question

body {
  font-size: 12px;
}
.brown {
  color: brown;
  font-weight: 200;
}
.large {
   font-size: 28px;
}
.normal {
   font-size: 18px;
   color: blue;
   font-weight: 700;
}

<html>

<head>
  <title>CSS Specificity</title>
  <link rel="stylesheet" href="index.css" type="text/css">
</head>

<body>
  <div>

    <p class='normal'>Normal and blue text!</p>
    <p class='normal large brown'>Large and brown text!</p>

  </div>
  <script src="script.js"></script>
</body>

</html>

The output should be "Normal and blue text!" in blue and "Large and brown text" in large enter image description herebrown I have tried so many combination and still ca't get it right - please help and thanks.

I do appreciate the help here. Just trying to learn how to code and following some instruction. I finished HTM basics and now trying to finish CCS basics. later moving forward to JavaScript. Thanks again — Raphael Lanz, Feb 15 '22 at 19:56

score 0 · Answer 1 · answered Feb 15 '22 at 19:56

0

The rule for normal is last in the CSS, so it overwrites the color in brown if both classes are applied

answered Feb 15 '22 at 19:56

Johannes

64,305
18
73
130

Rules Specificity

1 Answers1