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.