Why do my CSS don't apply on my html code?

Question

I tried to solve this but I'm still blocked on an error like this lol. I don't understand why my CSS does not apply to my HTML elements.

a{
 text-decoration: none;
}

.test{
 text-decoration: none;
}

<a href="#" class="test">
         <div id="blue-card" class="card h-150">
           <div class="card-body">
            <p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
            <p class="sub-info-card">Utilisateurs actifs</p>
           </div>
         </div>
        </a>

I first tried with only the balise in CSS and after it doesn't work I tried with the "test" class. But it still doesn't work.

The other CSS of my page work. It is only on my balise ..

if anyone have an idea on how to solve my problem pls!

Thanks,

Answer 1

So, the behavior you experience is that defining CSS rules separately, based on the tag name or class name are not applied, yet, if you specify your CSS as an attribute value, then it's applied. Let's think together:

Rule by tagname

a{
    text-decoration: none;
}

You reasonably expect this rule to be applied on the anchor, but it's not the case. This evidently means that some other CSS rule (or Javascript) overrides it. Browser Dev Tools can aid you, just right-click anywhere on your page and click on Inspect (or a similar choice). Inside the Dev Tools panel you should see an Elements tab, which shows the HTML and clicking on elements you should see CSS rules on the right-hand side, like on the picture below:

So, I advise you to click on the anchor where you expect your rule to be applied and see what CSS applies there. The rule that you intend to specify here will appear striked through, because something with higher priority overrides it (another case is that a rule with similar prio level is evaluated later and overrides this one). You should be able to see which text-decoration rule is applied and you can gently hover on that rule and click on its checkbox to disable it for now. This will enable the rule applying on this attribute with the second priority level in the hierarchy and so on. This process is not yet a solution, it's exploring the problem. After this exploration you will know what the problem is.

Rule by class

.test{ text-decoration: none; }

The situation is either similar with the one described in the previous section (rule override due to higher priority or similar priority but later in the code), or, it's possible that for some reason the test class is removed from the tag. So, in the Elements tab of the browser console you will see whether that element still has the class. If not, then experiment by editing the tag and writing that class into it and see whether your rule applies or not. If the tag has the class, but the rule does not apply, then we have a similar issue as the one described in the previous section.

Solution

The best solution is to find out what the problem is, why are there other rules applied on this element and act accordingly. For now, you can apply a rule like

a.test#test {
    text-decoration: none;
}

and of course add test as an id to your tag, as below:

<a href="#" class="test" id="test">

and if this still doesn't work, then there is a high chance that the other rule which causes you trouble has !important. If that's the case, then try removing the other rule. If that's not an option, then look at what the selector of the other rule is and make sure that the selector of your tag contradicts it.

Answer 2

It wasn't immediately clear from your initial post exactly what display problem was occurring. But in your comments you indicated an undesired text decoration is showing up, presumably in one of the html elements. Your initial post appears to show your initial efforts to correct the undesired decoration by re-defining the a element's css in your style.css sheet, which is intended to override the bootstrap css.

But your problem really appears to be related to which css is most specific to the element being displayed. The closer a style is to an element, the more precedence it has.

Each of the html elements within your a element have classes applied to them "card h-150","card-body","info-card","sub-info-card". That's a lot of classes to sort through.

<a href="#" class="test">
            <div id="blue-card" class="card h-150">
              <div class="card-body">
                <p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
                <p class="sub-info-card">Utilisateurs actifs</p>
              </div>
            </div>
        </a>

How those classes interact will take precedence over your a definition because they are more specific, in other words, closer to the element.

Trying to correct the problem by redefining the a element with an override like text-decoration: none!important will certainly work, but it is not good practice (see first answer here). You should look closely at what the invoked classes in your html elements do. If those classes aren't what you need, use a different class, or this could be a good opportunity for you to write your own custom class in the style.css. However, writing your own class if you're just beginning to get familiar with css may prove challenging. Probably better to find the class you really want from within bootstrap. That's the value of bootstrap.

To answer your original question which is basically why doesn't your css apply to your html elements, it's because a class is applied on the element and that takes precedence. CSS is tricky with specificity and it's hard to learn at first. See some of the answers in this post, and also this link mentioned in that same post.

Answer 3

Try accessing the 'link' attribute of the anchor tag as below and setting the value as none, also add !important to it, this worked for me.

a:link {
text-decoration: none!important;
}