What Is The Order of Loading The CSS Files in a HTML Page

What is the order of loading the CSS files in a HTML page?

Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.

Read all about it @ http://www.w3.org/TR/CSS2/cascade.html

Should the order of CSS files in a HTML page matter?

Short answer: Yes.

This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:

Bootstrap first to establish the framework
Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
Next is your custom stylesheet. This is to override all of the above.
Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.

Doing this type of architecture will reduce the amount of (important!) drastically.

In what order does the browser process css?

The specific order in which the browser processes CSS is:

1: Inline -then-

2: Style Tags -then-

3: 1st CSS File defined in HTML (From top to bottom) -then-

4: 2nd CSS File defined in HTML -And so on-

So if you had a tag in all four the one applied would be the Inline style

Yet all this can be overridden by using !important when defining the property

What is best order for linking font , css and JavaScript files

CSS and JavaScript files operate completely independently from one another; loading a CSS file or a JavaScript file first makes absolutely no difference whatsoever in terms of performance.

Still, there are a few points worth noting:

External CSS files like Google's Fonts and Font Awesome should be loaded before your own CSS file(s), as the order in which you load CSS files affects their specificity. You're going to want to override the framework fonts with your own CSS - not the other way around.
JavaScript files that depend on other files must be loaded after their dependencies. I assume that several of your plugins depend on jQuery, so you'll want to load jQuery before those plugins.
Placing <script> tags at the bottom of the <body> element improves the display speed (as opposed to referencing them in <head>), because script interpretation slows down the display.

So, in short, I would recommend the following:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <!-- Content -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/modal.js"></script>
  <script src="js/responsive-nav.js"></script>
  <script src="js/fastclick.js"></script>
  <script src="js/scroll.js"></script>
  <script src="js/fixed-responsive-nav.js"></script>
</body>

Can one CSS file take priority over another CSS file?

It depends on how you set them in your header. So something like this will work:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

The last one will be picked up.

And an helpful link about stylesheets here:
http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

See also: Precedence in CSS if the above doesn't work for you.

Hope it is clear.

What determines the order CSS is specified between two elements when loaded from different files?

If the selectors are identical, it comes down to order... order within the CSS and the DOM. So, the question is, where did you place the dynamically generated <link> (or <style>) in relation to the original <link> (or <style>)? The order within the DOM matters.

If you'd like to make sure that your dynamically created CSS gets evaluated first, add it to the top of the <head>:

document.head.insertBefore(myLink, document.head.firstChild);

If you'd like it to be evaluated last, append it to the <body>:

document.body.appendChild(myLink);

Whichever rule is evaluated last will be the one applied (barring use of !important)

Here's an example:

<!DOCTYPE html><html>  <head>    <style>      p {        color: green;      }    </style>  </head>  <body>    <p>test</p>      <script>      (function() {
        var red = document.createElement("style");        red.textContent = "p { color: red }";        // We'll add this to the top of head. You'll never even notice because it will        // be overridden by the existing green style.        document.head.insertBefore(red, document.head.firstChild);
        var blue = document.createElement("style");        blue.textContent = "p { color: blue }";        // We'll add this to the end of the body after a three second delay. It will         // override the other styles.        setTimeout(function() {          document.body.appendChild(blue);        }, 3000);
      })();    </script>  </body></html>

how to arrange the sequence of js and css files in webpage?

There is no better way. As long as they are all in the header there is no difference in their order unless they depend on each other.

EDIT: The above is true in most simple cases.

Ideally, you should put all of your CSS styles in the HEAD element and all of your SCRIPT elements in the order of dependence at the end of the BODY element (directly before the ending </body>).

Different orders can make some difference in newer desktop browsers. In mobile browsers, speculative parsing is not available, so the browser waits for requests of scripts before any other loading is performed.

tl;dr - It doesn't really matter as the differences are trivial, especially if your frontend has heavy JavaScript dependence.

What Is The Order of Loading The CSS Files in a HTML Page