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.

however, when I move it to a .css file, the page breaks, move the code back to the html doc and it works fine again.

This makes absolutely no sense, moving styles from a style to a css file shouldnt break the code should it?

Am I missing something? I am not changing any of the code, its simply a copy and paste.

Answer 1

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 2

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 3

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.