CODEWITHSUNDEEP
htmlcssbulma
patrickjm
patrickjm

Reputation: 177

CSS selector isn't applying to an inner element in Bulma Hero

So I'm trying to customize the Hero component from Bulma. When I try to target a CSS selector at an element inside of it, it doesn't seem to be applying. When testing, I can set the font-size to 100pt and color: red with no effect. Here's my work:

index.css

#headline-container {
    border-bottom: 2px solid #00aff4;
    background: radial-gradient(ellipse at center, rgb(60, 197, 255) 0%, rgb(0, 181, 255) 100%);
};

#titley {
    font-size: 28pt;
    font-weight: 300;
    color: red;
    font-family: "Roboto Condensed", Arial Narrow, Arial, sans-serif;
    text-align: right;
    vertical-align: middle;
}

index.html

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" integrity="sha256-zKA1Bf41O96+gJSlkn/Bh2HATW/OhwkApPlYTp3B5O8=" crossorigin="anonymous" />
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="hero is-large is-info" id="headline-container">
    <div class="hero-body">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div id="titley">Here's my big fancy headline.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

The #titley tag on the inner div has no effect, but that's not just with an ID. I've tried many different selectors, so at this point I'm wondering if there's some glaring/obvious mistake I've been making.

Chrome developer tools doesn't show any information about my #titley style when I select the element.

Any tips would be appreciated.

Upvotes: 0

Views: 345

Answers (2)

aldi
aldi

Reputation: 788

You have a semicolon when closing #headline-container.
Try this CSS:

#headline-container {
  border-bottom: 2px solid #00aff4;
  background: radial-gradient(ellipse at center, rgb(60, 197, 255) 0%, rgb(0, 181, 255) 100%);
}

#titley {
  font-size: 28pt;
  font-weight: 300;
  color: red;
  font-family: "Roboto Condensed", Arial Narrow, Arial, sans-serif;
  text-align: right;
  vertical-align: middle;
}

Also, I suggest using a container class instead of a level class. A level class goes best with a nav element, not a div element.

Upvotes: 1

Jacob-Jan Mosselman
Jacob-Jan Mosselman

Reputation: 813

There's a semicolon behind the curly brackets, can't yet find anything else what's wrong. But as Google isn't displaying it, that should be it.

Upvotes: 0

Related Questions