CODEWITHSUNDEEP
cssstyles
Rodrigo Zambon
Rodrigo Zambon

Reputation: 21

Do I put this inline style in head or external stylesheet?

I have an a.nav-link.active element

I tried this way but it didn't work

a.nav-link.active {
  background-color: rgb(0, 0, 0);
}
<a href="#" class="nav-link active" style="background-color:rgb(0, 0, 0);">

Upvotes: 0

Views: 65

Answers (3)

Tspring
Tspring

Reputation: 141

Are you leaving the inline styling in? The style attribute in your tag will take priority over the one in your tags, but even so I made a small test HTML file with the same and it appears to work fine however no color will be displayed. You can see it in the developer tools of your browser if testing there. You need to add this to visually see it:

a.nav-link.active {
  background-color: rgb(0, 0, 100);
  <br>height: 50px;
  <br>width: 50px;
  <br>display: block;
  <br>
}
<a href="#" class="nav-link active" style="background-color:rgb(0, 0, 0);">

This will give it a block level element display attributes, which the <a> tag is not.

You can also wrap it in a div and apply these to the div tag. However, as the above comment said, I'd recommend sharing more. My guess is either you are expecting the a tag (an inline element) which doesn't have a size to show up as a color or your are overriding it due to precedence.
https://www.w3schools.com/html/html_blocks.asp

Upvotes: 0

Chizaram Igolo
Chizaram Igolo

Reputation: 1143

The problem is this:

Your link tag <a> has no content. Link tags are inline elements by default, meaning they take just the width and height required to display them. So, no content means the element is widthless and heightless. To fix this, you need to define the link element as an inline-block element or a block element (if you don't want it to sit next to other elements horizontally) and set width and height for it.

Solution:

Define <a> as an inline-block element:

a.nav-link.active {
    display: block;
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);
}

Also, ensure you close your <a> tag:

<a href="consulta_relatorio.html" 
   class="nav-link active" 
   aria-current="page" 
   style="background-color:rgb(0, 0, 0);">
</a>

Lastly, keep in mind that inline styles (style="...") will override styles applied through classes.

Upvotes: 0

noname
noname

Reputation: 321

Question 1: Why is it not working?

The issue is that there is no content inside of the <a>, and there is not a closing tag.

Fixed snippet:

a.nav-link.active {
  background-color: rgb(0, 0, 0);
}
<a href="#" class="nav-link active" style="background-color:rgb(0, 0, 0);">Link</a>

Question 2: Should it be inside of a file or head?

That's really up to you. Both ways work the same.

Upvotes: 1

Related Questions