CSS not working in stylesheet

This is just a shot in the dark as (at the time of this post) you haven't provided source code.

Make sure you're linking to your stylesheet using a link tag in the head of the HTML document.

If you had:

<style type="text/css">
/* <![CDATA[ */
#someid
{
  margin: 0;
  padding: 3px 12px;
}
/* ]]> */
</style>

You'll need to have

#someid
{
  margin: 0;
  padding: 3px 12px;
}

in your CSS file with:

<link rel="stylesheet" type="text/css" href="path/to/style.css" />

to link to the stylesheet.

Some common newbie mistakes include:

  • <style type="text/css" src="path/to/style.css">: because it's a similar syntax to the <script> tag, which would make sense, but is invalid
  • <link rel="stylesheet" src="path/to/style.css">: but link elements use href not src
  • placing link elements within the body: although browsers will tend to manage link elements in the body, there are likely going to be some errors, and it's not a defined behavior
  • not specifying a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.

You should make sure the stylesheet is properly imported. Sometimes the @import doesn't work well if not used accordingly, so always reference your stylesheet:

<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />

Always remember to close the <link> tag as it's a self-close tag. I think @zzzzBov forgot to mention that.

Finally, if that doesn't work, try to override some of the styles by physically writing (above the </head> section) something like:

<style type="text/css">
    body { background: blue; }
    * { color: red; }
</style>

and see if that gives you a blue background and red colored text. It should. After that, try to implement the referencing method and make sure you reference the stylesheet file to the right directory.

Good luck!

Tags:

Css