Complete list of reasons why a css file might not be working

Question

This problem is making me feel like an absolute noob    Here is the head of my  html file    lt html xmlns  http   www w3 org 1999 xhtml   gt   lt head gt   lt link href  http   fakedomain com smilemachine html css  rel  stylesheet   gt   lt title gt Common Questions lt  title gt   lt script language  javascript  gt   function show name      document getElementById name  style display    block      lt  script gt   lt  head gt    And my html css file is indeed where it should be  But I m getting absolutely no styling whatsoever  Help   And please don t down vote just because the answer is obvious and I can t see it        EDIT 1  Okay  so now I m just trying to fix the problem locally on my machine  Here is the head    lt html xmlns  http   www w3 org 1999 xhtml   gt   lt head gt   lt link href  cover css  rel  stylesheet  type  text css   gt   lt title gt Common Questions lt  title gt   lt script language  javascript  gt  function show name      document getElementById name  style display    block      lt  script gt   lt  head gt    and now the css   BODY       font-size  18pt       color  000fff        font-family  Helvetica       margin  0 9 9 9     table       font-size  8pt       color  525252        font-family  Helvetica       margin  0px      border-collapse  separate     th       font-size  10pt       text-align  left      color  550055        font-family  Helvetica       border-color   999      border-width  0 0 1px 0      border-style  dotted     td       font-size  10pt       text-align  left      color  550055        font-family  Helvetica       border-color   999      border-width  0 0 1px 0      border-style  dotted      left       display inline-block      font-size  10pt       color  990055        font-family  Helvetica       margin  0 0 5 0      right       display inline-block      font-size  18pt       font-weight  bold      float  right      color  525252        font-family  Helvetica       margin  0px      question       display inline-block      font-size  18pt       font-weight  bold      float  right      color  B452CD        font-family  Helvetica       margin  0px          EDIT 2  Okay I ve made some progress  The firebug suggestion was really good  I saw that the link to the CSS file was being read as Chinese characters  This was UTF encoding problem so I just opened my files in a text editor and then saved them as UTF-16   But now it is reading the wrong data from the css file  I have uploaded the css file below  but in firebug it is showing a two liner   I find this baffling

User · Answer

I had the same problem  chinese characters were appearing in firefox when uploaded to web server  but not on localhost  I copied the contents of the css file to a new text file  All working now  Must have been a unicode encoding error of some sort

User · Answer

If your URL is working and loads the file correctly  and you ve said that adding the correct    lt link rel  stylesheet  type  text css  href  yourlink css  gt    code doesn t fix it  then the only other problem is that s it s an error in the actual  css file  And to advise you on that  we d need to see the file    What you can do though is write one basic  lt div gt  tag into your HTML  add in a basic CSS rule into your existing file  then see if you can influence this tag with your new CSS rule

User · Answer

I don t think the problem lies in the sample you posted - we d need to see the CSS  or verify its location etc    But why not try stripping it down to one CSS rule - put it in the HEAD section  then if it works  move that rule to the external file  Then re-introduce the other rules to make sure there s nothing missing or taking precedence over your CSS

User · Answer

I had the same problem  and I used the UTF-8 coding for both of my files as follows   add  charset  UTF-8   in CSS file and  lt meta charset  UTF-8  gt  under  lt head gt  tag in HTML file  and it worked for me   it makes the same encoding for both the files i e HTML and CSS   You can also do the same for  UTF-16  encoding  If it is still not working check for the  lt link type  text css  rel  stylesheet  href  style css   gt  under  lt head gt  tag in HTML File where you should mention type  text css

User · Answer

I had the same problem - I changed my text encoding to UTF-16 on my index file and my css file would show up blank when I d try to load the page in the browser  I figured out by much trial and error that your html and css files have to have the same encoding  I don t know if this would work for you but it did for me

User · Answer

The URL http   fakedomain com smilemachine html css in your  lt link gt  Tag is wrong  File not Found

User · Answer

Copy the css file s url and paste it into your browser  If it doesn t load the file than you know the problem is in the url

User · Answer

In my case  the problem was with the media option    lt link rel  stylesheet  type  text css  href  css style css  media  screen    gt    I solved by removing it    lt link rel  stylesheet  type  text css  href  css style css   gt

User · Answer

I have another one   I named my css file  default css   It wouldn t load   When I tried to view it in the browser it showed an empty page   I changed the name to default css css and it started working

User · Answer

Firefox can reject a stylesheet if it is not served with a content type of  text css    This is separate from the  type  text css   declaration in the HTML

User · Answer

I m using Wordpress and the stylesheet was set to enqueue to the footer  wp enqueue style           editor-css            stylesheet directory uri     assets css editor css             wp-edit-blocks            null          true       in footer            This resulted in a media  1  attribute getting added to the  lt link gt  tag and resulted in the stylesheet being loaded but not applied   Changed the parameter to false and its working now

User · Answer

I stylesheet may not get loaded for several reasons  But the main approach to solve such a problem is as follows   1  After loading the page  press F12 to open the Developers Console  Check the console for any logged errors   2  Then you should check the Stylesheet tab and see the list of stylesheets the browser loaded   3  The URL you re using inside your HTML link tag may be unaccessable  so manually try to visit the stylesheet with a browser and see if everything renders correctly   4  Any typo inside your HTML or CSS stylesheet may cause the stylesheet from loading   5  Check for any occurrences of fatal errors before your  lt link gt  tag  A fatal error may stop the running code and suspend the page  thus not including your stylesheet   Hope that helps

User · Answer

I don t know if some people are loading first RESET CSS   x000D   x000D  html  body  div  span  applet  object  iframe  h1  h2  h3  h4  h5  h6  p  blockquote  pre  a  abbr  acronym  address  big  cite  code  del  dfn  em  img  ins  kbd  q  s  samp  small  strike  strong  sub  sup  tt  var  b  u  i  center  dl  dt  dd  ol  ul  li  fieldset  form  label  legend  table  caption  tbody  tfoot  thead  tr  th  td  article  aside  canvas  details  embed   figure  figcaption  footer  header  hgroup   menu  nav  output  ruby  section  summary  time  mark  audio  video       margin  0      padding  0      border  0      font-size  100       font  inherit      vertical-align  baseline       HTML5 display-role reset for older browsers    article  aside  details  figcaption  figure   footer  header  hgroup  menu  nav  section       display  block    body       line-height  1    ol  ul       list-style  none    blockquote  q       quotes  none    blockquote before  blockquote after  q before  q after       content          content  none    table       border-collapse  collapse      border-spacing  0     a       color  inherit      text-decoration  none    x000D   x000D   x000D

User · Answer

Could it be that you have an error in your CSS file  A parenthesis left unclosed  a missing semicolon etc

User · Answer

I had a problem like this  I was able to fix it following  Step 1  from Abraar Arique post  I went into the console   Went under Style Editor and found Firefox wasn t loading the updated copy of my css file    I cleared all history and reload the page then my problem was fixed

User · Answer

Are you sure the stylesheet is loaded  You can see it using the  Net  tab of Firebug on firefox  or on  Network  tab of the Console of your browser   If 1 works  can you have a simple sample style and see whether this is getting applied  and visible in the console

User · Answer

Try    lt link type  text css  rel  stylesheet  href  http   fakedomain com smilemachine html css    gt    If that doesn t work either  then make sure the URL is accessible  and the content is what you are looking for

User · Answer

My simple think you missed type  text css

User · Answer

New one for you Guys    During my Gulp minification process   lt  -- build css  css project-mini css -- gt       lt link rel  stylesheet  href  css main css   gt       lt link rel  stylesheet  href  css splash css   gt       lt link rel  stylesheet  href  css header css   gt       lt link rel  stylesheet  href  css print css  media  print   gt   lt  -- endbuild -- gt    Last CSS file was for print and the generated output gave me        lt link rel  stylesheet  href  css project-mini css  media  print   gt    So because of media  print  all CSS rules were skipped

User · Answer

I was facing the same problem  but the reason was the styling in the css is wrapped in an ID that is not exist   navi ul      color  red      the  navi selector is nowhere in the HTML because i forgot to add it before writing the CSS   in my case I worked with Less file so I nested it like this   navi      ul         color red           I hope this help to re-check when things doesn t work

[html] Complete list of reasons why a css file might not be working

Examples related to html

Examples related to css