Jump to content

cascade and external stylesheets - a small puzzle


red

Recommended Posts

If I put a couple of properties in the style section of my html page, they work fine. If I take those same two rules and put them at the beginning or end of an external stylesheet (which is otherwise working fine) they do not work. Some conflict somewhere -- and no, putting "!important" or the display property on them doesn't help either. Identical css, just placed in different locations. ( If I put it on both the html and the external css, it also works -- as I expected it would). Here's the snippet: its to permit visible box borders in selected text..story.box{ /* limit to selected story */ margin:0; padding:.5em; border:1px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; index:100; }.text.box { margin:0; padding:2em; border:1px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; index:100; }

 

and the markup to invoke it is simply: <div class="story box">

Edited by red
Link to comment
Share on other sites

You can use the browser's developer tools to see what rule is overriding it.

 

Press F12 to open developer tools, go to the DOM Inspector and click on the element you expected to be styled. On the right panel there will be a list of all the selectors and styles that are being applied to it. There is no "index" property in CSS.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...