CSS does not work in stylesheet

Question

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

I want to move it from the page itself to the stylesheet.

however, when I transfer it to a .css file, the page breaks, translates the code back into the html document, and it works fine.

It makes no sense; shouldn't moving styles from style to css file break code if that is the case?

Am I missing something? I do not change the code, it is simple to copy and paste it.

Answer 1

This is just a shot in the dark, because (during this post) you did not provide the source code.

Make sure you bind to the stylesheet using the link tag in the head HTML document.

If you have:

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

You will need

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

in your CSS file with:

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

for reference to the stylesheet.

Some common beginner mistakes include:

• <style type="text/css" src="path/to/style.css"> : because this is a similar <script> tag syntax that makes sense but is not valid
• <link rel="stylesheet" src="path/to/style.css"> : but link elements use href not src
• placing link elements inside the body: although browsers will tend to control link elements in the body, there will most likely be some errors, and this is not a specific behavior.
• not indicating a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.

Answer 2

You must make sure that the stylesheet is correctly imported. Sometimes @import does not work correctly if it is not used accordingly, so always refer to the stylesheet:

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

Always remember to close the <link> tag as a self-closing tag. I think @zzzzBov forgot to mention this.

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

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

and see if it gives a blue background and red text. Must. After that, try to implement the link method and make sure that you are linking to the stylesheet file in the correct directory.

Good luck

Answer 3

I also had this problem, and the reason was that the path had to be updated for some url () links, since the css file was in a different folder than from the html file from which it had previously been called.

So basically

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

needed to be changed to

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

Answer 4

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

Answer 5

Do not include <style type="text/css"></style> in your .css file.