Odd interaction with the universal selector?

HTML-CSS
#1

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

<html>
<head>
  <link rel="stylesheet" href="style2.css">
  <title>WIT Documentation</title>
</head>
<body>
  <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>
      </nav>
    <main id="main-doc" class="right">
      <section id="Welcome" class="main-section">
        <header>Welcome</header>
        <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>
      </section>
    </main>
  </body>
</html>

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

#2

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?

#3

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.

#4

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 {
    color:blue;
}
* {
    color:red;
}

fcc

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)?

#5

this is what i was looking for, thanks!

#6

Please stop reviving 4 month old threads.

#7