Search code examples
htmlcssbulma

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.

Solution

  • 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.