63

I've got this html:

<p>
    <span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>
</p>

...and this css (added to the bottom of Site.css):

.fancify {
    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic;
}

So, I would expect the quote ("Parting is such sweet sorrow!") to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class "fancify" attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.

What rookie mistake am I making now?

UPDATE

I thought maybe the problem was that I had added the new class in Site.css following this section in that file:

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.

I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...

UPDATE 2

Here's how the HTML is coming down:

<p>
    <span>
        <label class="fancify">Parting is such sweet sorrow!</label>

...and here's my css rule in Site.css:

p span label .fancify {
        font-size: 1.5em;
        font-weight: 800;
        font-family: Consolas, "Segoe UI", Calibri, sans-serif;
        font-style: italic;
        display: inline;
    }

...but it's not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
  • are you saying, when you inspect element, you can see the css properties ? – karthikr May 13 '13 at 00:55
  • hit F12 in your browser and see what styles are being applied to the span - something may be overriding it – fnostro May 13 '13 at 00:59
  • 2
    Nothing with what you posted is wrong - can you post the rest of the relevant HTML/CSS? – Adrift May 13 '13 at 00:59
  • Yes, your setup is OK, so it's likely that some more specific rule is prevailing. – ralph.m May 13 '13 at 00:59
  • yes, try changing the css selector to span.fancify – box86rowh May 13 '13 at 01:10
  • @karthikr and fnostro: Selecting the text in question, I see under styles that what is being applied ("Matched CSS Rules") is from the bootstrap css file. Most things from Site.css (label, body, html, that might otherwise apply are crossed out). The odd thing is that the class I added at the end of Site.css doesn't even show up at all in that "Matched CSS Rules" list...??? – B. Clay Shannon-B. Crow Raven May 13 '13 at 01:43
  • you have other style sheets over writing your styles. we need to go deeper. – rlemon May 13 '13 at 01:46
  • @changed the class declaration, prepending span., but still no go. Google dev tools shows my class is being totally dissed by the DOMinator. – B. Clay Shannon-B. Crow Raven May 13 '13 at 01:50
  • 2
    The question effectively asks people to debug a large piece of HTML and CSS code, without actually disclosing the code or giving access to it. – Jukka K. Korpela May 13 '13 at 05:19
  • I'm not sure if its been said or not but there shouldn't be a space between your class and the `label` selector - it should be `p span label.fancify {}` – Adrift May 13 '13 at 12:28
  • 2
    @Jukka: It seems to me the pertinent parts are there. I don't see the need to direct the firehose at the world. – B. Clay Shannon-B. Crow Raven May 13 '13 at 14:14
  • @Adrift: Yes, that's what I have in my css: p span label.fancify {... – B. Clay Shannon-B. Crow Raven May 13 '13 at 14:16
  • In my case, I nested a class in my SASS file in the wrong place... – enhancedJack May 23 '19 at 20:03
  • In my case, I didn't apply any css property but css property is being applied by itself. here is link- https://video-chat-app-random.herokuapp.com screenshot - https://prnt.sc/213fp0b so I add opacity:1 in code and push it to heroku but its not updated. what to do? – vishal Nov 30 '21 at 10:51

18 Answers18

80

There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.

Andrew Koper
  • 6,481
  • 6
  • 42
  • 50
  • 6
    I had a stray semicolon – Nick Manning Oct 08 '14 at 20:48
  • 5
    @VenkatapathiRajuM this is some wisdom you normally have to feel some pain to learn. :-) – Andrew Koper Oct 09 '14 at 00:52
  • Nice tip.... I'm building a page which needs to be integrated into a WP theme. The page first loaded my CSS and everything worked nicely, then it loaded some more CSS from that crappy WP, the page looked ok, but when I was adding dynamic content, nothing worked... that .... WP had some errors in the CSS, now try to find that. Forcing my own CSS to be loaded at the very end of the document, solved the problem. (masked it, because there is still something wrong in the WP CSS, but cannot be bothered with it). Thanks for the tip. – Emil Borconi Apr 21 '16 at 16:44
  • I had a stray semicolon such that the CSS worked locally and failed remotely. – JoshNaro Jul 20 '16 at 16:13
  • I was missing a closing right parenthesis after the "url" function in my background-image value... thanks for confusing me, ASP.NET ResolveUrl function syntax...! :( I only noticed it after viewing source from the browser. – ALEXintlsos Sep 05 '17 at 21:32
  • Thanks a lot! accidentally removed bracket and didn't notice it until read your answer!) – Vitali Nov 28 '17 at 12:33
  • 1
    If you're looking for CSS errors, check out csslint.net –  Mar 07 '18 at 22:31
  • I had the php comment "//" in CSS. in the IDE (netbeans) showed as comment thus i did not suspect it wrong – Shaakir Feb 07 '20 at 17:48
  • saved my day! I added earlier a comment but I always forget that the comment in the css is /**/ – Sam Apr 27 '21 at 12:11
  • csslint.net found a missing closing bracket near the top of the CSS file. Had had no previous effect but when I copied in some CSS at the bottom which worked fine where I built it up, the effect did not carry across correctly. – zsalya Aug 21 '22 at 17:28
59

Posting, since it might be useful for someone in the future:

For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl + shift + R) to get the new styles applied, it seems the old ones got cached really "deep".

This question/answer might come in handy for someone. And hard refresh tips for different browsers for those who don't use Chrome.

trainoasis
  • 6,419
  • 12
  • 51
  • 82
  • 4
    Thanks, I have spent considerable amount of time validating my CSS, and trying to figure why my CSS was not getting picked at all in Chrome Inspector. Ctrl+Shift+R did the job! – Binita Bharati Jan 28 '19 at 05:34
  • 1
    OMG thank you, it was killing me ! I have tried many things but giving the correct path and clearing the cache solved it. – Kubra Altun Feb 18 '21 at 12:19
  • OMG! Really you're a life Savior.. I've spent a full day scratching my head, trying to find out why was it creating such a problem. Finally your answer helped me. Thanks a million ton! Small things really do have a big impact. It really worked as a miracle. Bless you for the worthy and helpful post! – Priya May 05 '22 at 06:19
54

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/

Lewis86
  • 511
  • 6
  • 15
hayonj
  • 1,429
  • 3
  • 21
  • 28
  • Yes, I have now. Based on what Google Dev Tools is showing me, it only wants to style that bit as a label. – B. Clay Shannon-B. Crow Raven May 13 '13 at 02:10
  • Technically just the regular class `.fancify` would work, unless you are over writing it somewhere else. Other wise you can always try to force the selector to really narrow down to the element you are trying to style. Look at this fiddle here : http://jsfiddle.net/MM6qQ/ – hayonj May 13 '13 at 02:16
  • 2
    I wouldn't use the !important flag as it is not recommended – hayonj May 13 '13 at 02:36
25

I was going out of my mind when a rule was being ignored while others weren't. Run your CSS through a validator and look for parsing errors.

I accidentally used // for a comment instead of /* */ causing odd behavior. My IDE said nothing about it. I hope it helps someone.

hipnosis
  • 618
  • 1
  • 8
  • 13
5

Maybe your span is inheriting a style that forces its text to be normal instead of italic as you would like it. If you just can't get it to work as you want it to you might try marking your font-style as important.

.fancify {
    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic !important;
}

However try not to overuse important because it's easy to fall into CSS-hell with it.

Cesar
  • 2,229
  • 1
  • 22
  • 20
4

For me, the problem was incorrect content type of the served .css file (if it included certain unicode characters).

Changing the content-type to text/css solved the problem.

Spikolynn
  • 4,067
  • 2
  • 37
  • 44
3

I know this is an old post but I thought I might add a thought for people who come across a similar problem. I'm assuming that you are using ASP.NET MVC since you mentioned site.css.

Check your Bundles.config file to see if you have BundleTable.EnableOptimizations = true; If you don't, then it can be your problem since this allows the program to be bundles and "minified". Depending on if you run in debug mode or not this could have an effect.

Lewis86
  • 511
  • 6
  • 15
CodySig
  • 174
  • 1
  • 4
  • 15
2

In addition to the solutions posted above, having gone through the exact same problem, make sure you check your HTML. More specifically whether you've properly labelled your elements, as well as class and id selectors. You can do this either manually or through a validator (https://validator.w3.org/).

For me, I missed the equal sign next to the class (<div class someDiv> vs <div class = "someDiv">, hence why no CSS property was applied.

the12
  • 2,395
  • 5
  • 19
  • 37
2

A key point, here, may be the way the CSS rules propagate. Some rules are more important than others, so CSS rules do not always "cascade" in the way you might imagine that they ought to. This precedence of CSS rules is known as specificity - see (for example) description at w3schools.com

So, if you have a P element inside a DIV, you can control the font color with, say,

DIV P.highlight { color: red; }

If you have a later CSS instruction, like

.highlight { color: green; }

then it will NOT override the earlier instruction. This has confused me greatly, especially when loading multiple CSS files and naively thinking that I could override the earlier CSS.

D.Gibson
  • 79
  • 6
  • so how do you get around overwriting it in this case? – knarf Oct 22 '21 at 18:43
  • 1
    Im not an EXPERT on Specificity but it is generally true that a "specific" CSS instruction will not be over-ridden by a vaguer one. So, in my above example, if the first CSS instruction has executed in a style sheet, then only way to over-ride it is by an equally, or more specific CSS instruction. For example, `#highlight { color: green; }` or an inline style, like `

    text

    `     – D.Gibson Oct 24 '21 at 09:56
1

I had a similar problem which was caused by a simple mistake in CSS comments.

I had written a comment using the JavaScript // way instead of /* */ which made the subsequent css-class to break but all other CSS work as expected.

Ses Tolpt
  • 11
  • 1
1

Reasoning for my CSS styles not being applied, even though they were being loaded:

The media attribute on the link tag which was loading the stylesheet had an incorrect value. I had inadvertently set it to 1 instead of all. This meant the browser was ignoring those styles in that linked stylesheet.

Broken:

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

Corrected:

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
user12893298320392
  • 385
  • 1
  • 4
  • 13
1

For me, it was the local overrides in Sources -> Overrides. A file gets saved locally whenever you change the styling of a page and chrome uses that file to override the server's css.

Shadof
  • 11
  • 2
1

Clear the cache and cookies and restart the browser .As the style is not suppose to change frequently for a website browser kinda store it .

Karthi
  • 11
  • 1
1

I also faced this issue. And this how it got resolved!

My css filename was gt.css. I was working on Visual Studio (eg.2017).

  • I went to solution explorer (press Ctrl+Alt+L) and searched gt.css (enter your css filename). Right click on your css filename and then on Bundler and Minifier (4th option curently) and then Re-Bundle file (or directly press Shift+Alt+F).
  • Save any unsaved file, then empty cache and hard reload your web browser.

You can learn more about Bundler and Minifier here.

Rahul Gole
  • 31
  • 1
  • 6
1

I had custom styling applied only on some elements (rows of table). I use Bootstrap. This was caused by having "table-striped" class. Once removed, all required rows had the custom class applied correctly.

michal
  • 327
  • 4
  • 15
1

I'm too used to setting the className attribute in JSX with React, but not too used to setting the class attribute in plain old HTML. So my mistake when spinning up a quick CodePen was setting a classname attribute, which sets no actual class whatsoever in plain HTML. The correction was, of course, to give the element a class instead.

Alexandre
  • 386
  • 7
  • 15
0

Hard reload your chorome Shift+F5

NAWF ABDULLAH
  • 1
  • Caging plays a major role but please explain why this solution is the right fix. – Niklas Nov 05 '21 at 10:48
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 05 '21 at 10:49
  • 1
    This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30264721) – Subhashis Pandey Nov 06 '21 at 14:59
0

Look at the spacing between selectors.

p span selects all span in p

span label selects all label in span

p span label selects all label in span in p

so label .fancify selects all .fancify in label

there is nothing of class fancify in label. label is on the same level, not above

so label.fancify

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
s123
  • 102
  • 9