style and script tag sequence

Question

Normally HTML page contains following tags

<script>
<link>
<style>

I found number of times that changing the sequence of those tags, mess up with page layout.

So what would be the reason and what are the points to avoid this situation?

EDIT

After looking the answer of @Anurag, I'm actually assuming that we don't have a case where we have two definition of the same css class, in different style or link tag.

My major concern is css and script sequence. Whether we should have all the css class before we write any JavaScript or it doesn't matter at all (that I don't think).

For example jqtouch floaty extension. In that if I define the .floaty class before the JavaScript tag, then it don't work. Hope you get my point.

Answer 1

Order is important for all of these tags.

<script> tags are executed sequentially unless using the async or defer attributes, so a script tag that appears later in the page can override the functions/variables/.. that were previously declared.

Likewise stylesheets are applied sequentially and have specificity rules about how to handle conflicts etc. For instance, the style attribute takes precedence over everything and if a style appears later, then it overrides the previous style. For instance,

<style>
    .page {
        background-color: #CCC;
    }
</style>

<style>
    .page {
        background-color: #222;
    }
</style>

The color of the page will be #222.

Answer 2

I can't tell you specifically without seeing more of your HTML. However, if I may make a recommendation, I would suggest not inlining any of the style or scripts into your HTML. There are a number of reasons why you don't want to do this, but other articles and websites do a much better job of explaining why you don't want to.

And, by not inlining, it may fix the problems you are currently experiencing.

Answer 3

The order of the <link> and <style> tags is most important in this case.

The <link> tag(s) will hold the reference to your style sheets, where you defined most of your page layout. The <style> tag will define exceptions or additions on the definitions made in your style sheets.

So, you first need to know what's the default, before you can add something or make an exception on it. That's why the <link> tag(s) should appear before the <style> tag(s). The style definitions (sheets and inline) are applied in sequence. The last definition overrides previous definitions.

Then we also have the <script> tag(s). These have nothing to do with messing up your layout. As a rule of thumb, I always declare them after my <link> tags. Why? First show your visitor a nice looking page, the scripts should be used to support additional functionality.