CSS not working in stylesheet

Question

I have a set of Styles that were first created inside the style attribute on a page.

I want to move it from being on the page itself into a stylesheet.

howe

Answer 1

I had this problem as well, and the reason was that the path had to be updated for some url() references since the css file was in another folder than the html file it previously was called from.

So basically

background-image: url('patterns/debut_dark.png');

had to be changed to

background-image: url('../patterns/debut_dark.png');

Answer 2

I had the same problem, but the cause was not some mistake in the code but the fact that the .css file was loaded with some delay after making the modifications in it. The server needed 5 - 10 minutes to update the changes.

Answer 3

Don't include <style type="text/css"></style> in your .css file.

Answer 4

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!

Answer 5

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.

Answer 6

Ran across same problem. Found there were lines in my css file that should have been commented out (a block of colour palette information that I had cut and paste to the top of the file for quick reference).