Why does inline CSS work but not a stylesheet?

Question

I have created a web page with uses a stylesheet which has the following class –

.div2 {
 border:1px solid black;
 width:75%;
 margin:auto;
}

I have applied it to a div tag on the web page like this –

<div class="div2"></div>

When I view the web page in my browser, the class has no effect at all. Now, when I use inline CSS like this instead –

<div style="border:1px solid black;width:75%;margin:auto"></div>

and view the web page in my browser, the class is applied and works perfectly!

I am glad that it works but I would like to know why it works one way and not the other! Should both methods not result in the same thing happening? I have other classes on the stylesheet which all work so I have not had to use inline CSS anywhere else. Are there any circumstances where inline CSS needs to be used instead of a style sheet? Hope this makes sense!

You probably have a rule in your stylesheet that supersedes your .div2 rule. Firebug would tell you if this is the case. — John Conde
– John Conde, Commented Mar 25, 2014 at 20:07
It is because of specificity conflicts. If you use Chrome, use Inspect element to see the CSS conflict. — user3111737
– user3111737, Commented Mar 25, 2014 at 20:09
Per @SakhalTurkaystan suggestion, look for border: 1px solid black; crossed out. If you see that then look for a border: ... rule that is not crossed out to find the CSS rule that is overriding what you want. Get more specific than that rule. — Jeremy Cook
– Jeremy Cook, Commented Mar 25, 2014 at 20:10

adrian.krzysztofek · Accepted Answer · 2014-03-25 20:22:02Z

2

You can also force CSS rules to be most important

.div2 {
 border:1px solid black !important;
 width:75% !important;
 margin:auto !important;
}

Use it only temporarily to verify if the class name is typed correctly and if the CSS file is being linked properly.

answered Mar 25, 2014 at 20:22

adrian.krzysztofek

9698 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarcoZen Over a year ago

Yeppp - adding !important; to the rule in the external css ensures its NOT overwritten elsewhere.

Aakanksha Dahima · Accepted Answer · 2018-08-31 08:08:41Z

This is because of interfering with more than one stylesheets. Do check in your header.php or inside head tag, all the stylesheets that you've mentioned. Make sure no two or more stylesheet present with a similar aim. You can keep minimum stylesheets that are sufficient for your particular project. Just go to Inspect Element in Chrome and see what styles are applying to your elements.

Even these two stylesheets interfere.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

I had the same problem and I've removed <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> this stylesheet and kept only above one. (Don't forget to save and refresh) External CSS worked fine.

Collectives™ on Stack Overflow

Why does inline CSS work but not a stylesheet?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related