How to select all elements with CSS?-CodePudding

I have this html code:

<html>
    <head>
        <link rel="stylesheet" href=".\bulma\css\bulma.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body style="background:#1C1D1F">
    <section >
  <h1 >Large section</h1>
  <h2 >
    A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
  </h2>
</section>
    </body>
</html>

and this css code:

@font-face {
    src: url(fonts/Lato-Regular.ttf);
    font-family: lato;
 }
 .paragraph {
    font-family: lato;
 }

 @font-face {
    src: url(fonts/AthleticOutfit.ttf);
    font-family: athletic;
 }
 .title {
    font-family: athletic;
    font-size: 100px;
 }
 
* {
   color: white;
 }

The fonts are actually working, meaning that my css file is found. However, my * { color: white; } does not work. I cannot figure why... I think this might have something to do with bulma, which works too.

Any idea of how to make this * {} thing work? I expect all my text to be in white color, but it actually shows as grey...

CodePudding user response：

Option 1:

color: white !important

Option 2: add a class "something" to your <body> then you can utilize precedance.

body.something * {
    color: white !important;
}

CodePudding user response：

The code works just fine. I tested it myself a couple of times and it works perfectly. Try checking for typos, maybe add a <!DOCTYPE> at the beginning just in case, make sure that nothing in the other style sheet contradicts, or if nothing works, try adding the !important tag after the style for coloring it white, like "color: white !important".