Find CSS not applied rules
Firefox, add extension Dust-Me Selectors. It does just that
Some CSS rules are not applied from external link
Try putting just the code that is not running on the bottom of your CSS file. Sometimes, the code does get applied but then overwritten after your browser runs the rest of the CSS file. So your CSS file should look like this:
.input-span {
display: inline-block;
border: none;
padding: 1px;
outline: none;
text-align: center;
min-width: 100px;
font-style: italic;
border-bottom: 1px solid grey;
}
.input-span:focus {
border-color: blue;
}
table.table {
border-collapse: collapse;
}
table.table,
table.table th,
table.table td {
border: 2px solid black;
}
.footer {
margin-bottom: 50px;
}
@media print {
.footer {
page-break-before: always;
}
}
*:not(small) {
box-sizing: border-box;
font-family: 'Palatino Linotype';
font-size: 30px;
}
Is there a way to check which CSS styles are being used or not used on a web page?
Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.
Why is my CSS style not being applied?
Have you tried forcing the selectors to be in the front of the class?
p span label.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:
<div id="first">
<p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>
You would style it like this:
div#first p#myParagraph {
color : #ff0000;
}
Just to make a complete example using a class:
div#first p#myParagraph span.bolder{
font-weight:900;
}
For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html
CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/
Is there a way to find out where a css rule is coming from?
You may use web inspector in Chrome.
Right click on failing element and select inspect element.
You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.
Next you need to expand "Computed Style" tab and look for offending style.
When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.
CSS rules are simply not applied in Internet Explorer. Where should I look for more info?
- Just on a lark, try removing all the imports then putting them back in one by one.
- Run your CSS through the W3C CSS Validator.
- Attach a new CSS file, test that it works, then slowly migrate across to the new file until it breaks. Try to track down where it breaks.
CSS rule not being applied
whack an !important
after the style you want to enforce.
Example:
p.my-style {
color:#000;
text-decoration:none !important;
}
Related Topics
Use of "Text-Decoration-Color" Is Not Working
Can Grid-Row-Gap/Grip-Column-Gap Be Overridden for a Single Gutter
How to Style <Input Type="Text"> in IE6 CSS
Assigining Different Font-Size Per Each Font in One Font-Family
Rails Images and Assets Not Being Loaded Properly
CSS and Printing:Keep Block of Text Together
How to Float Paragraph Next to Image Without Wrapping the Image
How to Create a Style Element and Append to Head in React
Safari: Vh Units Applied to Parent Element Doesn't Allow 100% Height in Child
How to Detect Lack of Position:Fixed in a Generic Way
Django Forms Template Design Classes
Antialiased Text in Firefox After CSS Rotation
Border-Radius on Two Overlapping Elements; Background Shines Through
Understanding Nth-Child(An + B): Selector with Formula in CSS3
Dropdown Menu - Make the <Ul> Submenu 100% Width
Can One Pixelate Images with an Svg Filter
Is the Mobile Viewport Size Based on Browser or the Screen Resolution