CODEWITHSUNDEEP
htmlcsscss-selectors
procyon11
procyon11

Reputation: 13

CSS class selector won't work

I'm new in coding and I'm having some noob issues...

Whenever I style my elements inside my HTML file (style="...") everything works fine, but when I do it the correct way, i.e. I give them a class and style them in the CSS file, it won't work at all.

This is my HTML:

<div class="4u 12u(mobile)">
    <section class="highlight">
        <a href="football.html">
            <span class="image fit"><img src="images/pic02.jpg" alt=""></span>
            <header>
                <h2>Football</h2>
                <p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
            </header>
        </a>
    </section>
</div>

And this is my CSS, where I try to give them a 6px margin all around:

.miniflag {
        margin: 6px 6px 6px 6px;       
    }

Can you help me find the problem? Thank you very much!

Edit: Yes, both my HTML and CSS file are linked within the head section (it is a running website), so the problem must be elsewhere...

Upvotes: 1

Views: 23712

Answers (4)

Praxis Ashelin
Praxis Ashelin

Reputation: 5227

As an answer to your own solution: Most likely you had another piece of CSS that was overwriting your .miniflag CSS.

Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

You are correct, a specific class attribute will overwrite a generic class attribute. But I think you're confused about which is which:

  • .miniflag : generic class attribute, the lowest level
  • .highlight p .miniflag : a more specific class attribute, with 3 levels

The more specific one will be applied.

Furthermore, the position of your css rules matters as well:

.miniflag {
    color: red;
}

.miniflag {
    color: blue;
}

This will set the color to blue, since the last rule is applied and overwrites the previous rule.

Upvotes: 1

procyon11
procyon11

Reputation: 13

Solved! In my CSS, before the .miniclass I also specified the parent class, so now it looks like this 

        .highlight p .miniflag {
        padding: 2px;
        background-color: white;
        width: 35px;
    }

And it works perfectly. Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

you can do this: 

<head>
      <link rel="stylesheet" type="text/css" href="foldername/style.css">
    </head>

Upvotes: 0

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

Your CSS code and HTML is looks fine to me, may be you should check head section into your HTML file, and if you have not included your CSS file into your HTML file, then following code will help you to do that.

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Tip: make sure you specify the location of style.css properly as follows

href="location/style.css"

Upvotes: 1

Related Questions