external css not working while internal does

Question

So i'm using the jquery-ui accordion widget and I wanted to adjust the width. When I internally style the for it, it works. but when i do it externally it doesn't. If someone could help me understand why it doesnt work externally, that would be nice. Also, if someone could help me vertically center the widget, it'd be the best christmas ever. code is below:

HTML (with internal CSS that works):

<body>
<div class="container">
    <div id="accordion" style="width: 500px; margin: 0px auto;">
             ..headers and divs for panels and content
    </div>
</div>
</body>

external CSS that doesn't work:

#accordion {
   width: 500px;
   margin: 0px auto;
}

Thanks in advance for all the help!

should work fine, please create a demo in jsfiddle.net that replicates problem — charlietfl, Dec 24 '13 at 23:16
As for your Christmas present on vertically aligning
, refer to this http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — Prashanth Thurairatnam, Dec 24 '13 at 23:19
@charlietfl I just made one but it seemed be working fine there but not on my computer. — tellmewhy, Dec 24 '13 at 23:32
Check the paths to the external CSS file. If things work inline, but not as externals, the path or file name is usually incorrect. — Scott, Dec 24 '13 at 23:36
inspect the rules that apply to element in browser console...can see all rules for any element and order they apply and source of each rule — charlietfl, Dec 24 '13 at 23:43
@MunkeyD913 see my updated answer. It might help you find the source of the rule. — Itay Gal, Dec 25 '13 at 00:59

Itay Gal · Answer 1 · 2013-12-25T00:58:48.440

Internal (inline) CSS rules have a higher priority than external ones.

There are probably some rules that overriding your external CSS, while the internal gets the max priority and overrides them.

You can check which rule takes place with the "Inspect element" (On chrome - this tool also exist on Firefox, IE etc - just click F12 to open it). When you're inspecting an element you can see which rule is selected and where it appears in the code (file and line number) and also see the whole inheritance tree.

enter image description here

score 0 · Answer 2 · answered Dec 24 '13 at 23:14

0

The order of the includes (link elements) plays a role in priorities.

Code lower in the includes or included files has a higher priority. Inline styles in turn have a higher priority than in CSS defined rules.

Then there's the !important keyword you can append to make something higher priority.

Priorities are as follows:

Inline style with !important
Stylesheet style with !important
Inline style without !important
Stylesheet style without !important

answered Dec 24 '13 at 23:14

Aidiakapi

6,034
4
33
62

i just tried @mofasa suggestion without any inline style and added !important to the external and it still didn't work. Good to know the priority list though. thanks. – tellmewhy Dec 24 '13 at 23:42

score 0 · Answer 3 · answered Dec 24 '13 at 23:29

0

Jquery-UI has some default CSS that is overriding your external css. You can gain higher priority than the default CSS by being more exact when specifying elements:

body .container #accordion {
   width: 500px;
   margin: 0px auto;
}

answered Dec 24 '13 at 23:29

mufasa

1,271
13
18

score 0 · Answer 4 · answered Dec 26 '13 at 02:47

0

Alright guys. Rookie mistake.

I had two copies of the css file I was using and the html was linked to the one I wasn't editing. Thanks for all the responses though. Got some good tips and info.

answered Dec 26 '13 at 02:47

tellmewhy

23
2
5

external css not working while internal does

4 Answers4