Change the font-size of a <p> element inside Jumbotron

Question

I have a jumbotron, which has a placeholder on top to handle errors on the page. The error has a <p> tag with its own class, and I want to modify the size of the element. However, the in-built paragraph styles of the jumbotron (Bootstrap) seem to override whatever I've set. I don't want to change the global <p> size, just of this particular element.

HTML:

    <div class='jumbotron'>

         <div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
          <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
          <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'>  </span>
<p class = "error-message"> Sign-Up Error </p>

        </div>

CSS:

#landing-page-error {
 width: 100%;
 position: absolute;
 top: 0; /* this and the position: absolute has the error message pop up right below the header nav bar in landing page */
 height: 10%;
}

.error-message {
  font-size: 10px;
}

It's a Rails app, and here's a screenshot of the CSS inside the browser -

Please help me set the size of the <p> tag specifically for the error element. Thank you in advance.

Answer 1

.jumbotron .error-message {
    font-size: 14px;

}

if this doesn't work, then try this:

.jumbotron p.error-message {
        font-size: 14px;
}

it will effect all the error-messages inside jumbotron without affecting other <p> tags inside your page.

Answer 2

Nothing Problem just close the Div class before P tag

     <div class='alert alert-danger alert-dismissible' role='alert' id=    "landing-page-error">
      <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
      <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'>  </span> </div>
 <p class = "error-message"> Sign-Up Error </p>