Odd interaction with the universal selector?

Hi! I’ve been using internal styling for the majority of this project and only now decided to move to external styling. I thought it would be as easy as copy-pasting my internal style sheet to another doc then putting a link in the element of my index file, but boy was I wrong.

When I use the internal style sheet, everything I designate with my universal selector gets styled, no problem. But when I use the external style sheet, NONE of it gets applied. Any clues as to why this might be?

Sample CSS:

* {
  box-sizing: border-box;
  margin: 0;
  text-decoration: none;
  font-family: sans-serif;
  line-height: 1.6;

Sample HTML

  <link rel="stylesheet" href="style2.css">
  <title>WIT Documentation</title>
  <div class="container">
      <nav id="navbar">
        <header>WIT Documentation</header>
        <a href="#Classes" class="nav-link">Classes</a>
        <a href="#Combat" class="nav-link">Combat</a>
        <a href="#Symbols" class="nav-link">Symbols</a>
        <a href="#Game_Modes" class="nav-link">Game Modes</a>
        <a href="#Walkthrough" class="nav-link">Walkthrough</a>
    <main id="main-doc" class="right">
      <section id="Welcome" class="main-section">
        <p>This is the WIT technical documentation page! Think you have the best
        Mind-Games? PROVE IT. Battle against your opponents to see who is the
        most capable of out-smarting the other. If you're interested in
        joining the fray, message one of the admins. The rules and classes are here
        for your reference.</p>

If I include this styling internally, we’re good to go. If I do it externally, it says no.

Should work just fine.

Is the style2.css file in the same directory as the HTML file? Are you sure the file name is correct?

Yeup, the directory is fine; the rest of the style sheet all applies (didn’t wanna past the whole thing here for brevity), it’s literally just the universal selector that’s “not there” per-say.

That’s weird. I’d frst check for syntax errors.Especially check for additional curly braces. An additional closing curly brace for example disables the next selector in the CSS.

Then I’d do the following - open the console, inspect one of your <a> elements and see what styles they have applied (scroll through the whole list if it’s long). Screenshot from a test file with only a <p> element - you can see that it’s blue, but also that there was a red color before, from the universal selector:

p {
* {


You can see that it was a valid CSS rule (no warning sign next to it). You can also see that the universal selector comes after the p selector in my stylesheet, yet it doesn’t override the p rule (the universal selector has a specificity of 0).

Do you have your * at the top or at the bottom of your file?
And is it trying to override styles that have been set elsewhere?
Do you have an additional CSS file (from a framework for example)?

this is what i was looking for, thanks!

Please stop reviving 4 month old threads.