CSS & JavaScript

The whole point of using Cascading Style Sheets and JavaScript is that we are able to create code that can be used in multiple parts of a page and across multiple pages. Most of the previous examples have applied styling with either an inline or same-page approach. But what if we want to split these properties from the pages they are applied to?

Luckily this isn't actually a difficult process at all. We can use a concept called "decoupling".

Decoupling refers to separating code in a way that makes it more modular (reusable across pages) but also reduces redundant (repeating) code.

Linking a CSS file to an HTML file so that we can manage all styling across multiple pages is as simple as adding the following to the header of each page.


<link rel="stylesheet" 
      type="text/css"
      href="my_file.css">

In this case the attributes of "rel" (or "relationship") and "type" are never changed. They will always have the same value (the part within the quotations) to show we are linking to CSS style files. But the "href" attribute will need to point to the name of the file that you the author has made.

Multiple "link" lines can be used to link to multiple css files. Just remember that later files can overwrite earlier files if they share a reference.

Here is an expanded example of what it will look like at the top of your page.


<html>
<!-- All of our links will be enclosed 
within a normal header. -->
<head>
<title> TITLE </title>

<!-- Here are the links to external CSS style sheets.
These are the files which can be referenced by 
multiple HTML files at once -->

<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="code_window.css" />

<style type="text/css">
/* Any CSS specific to THIS PAGE ONLY would go
inside here as normal. */
</style>

</head>
<body>
<!-- Normal content will go within body tags -->
</body>
</html>

As you might have noticed CSS files actually have a file extension of ".css". If you were linking to JavaScript files they would have an extension of ".js". Both are just plaintext (ASCII) documents. Meaning you can save your code as a text document and just rename the extension.

There is one key difference between the two however.

  • CSS links should always be placed within the header.
  • JavaScript links can actually be placed throughout the document, just remember the link will be read within the HTML as it comes, *in the order the come*.

Finally, the actual structure of the CSS file is simple, it needs to only contain the style information. You do not need to use "<style>" within the .css file itself. Ther should be no HTML within a .css file whatsoever.

Loading order

Depending on the browser, a page may not completely load until all the script has been run through. In that case, if you know the JS won't affect styling, then you may even place it at the bottom of the page to let the user see the page as soon as possible and let any advance functionality load a second later.

To be concise, a page should load...

“blank page > visuals > interaction”

...and not...

“blank page > interaction > visuals”

Do CSS & JavaScript conflict?

Easily. It’s ok if you are the sole author, but a project with multiple coders can produce conflicts without careful coordination.

Since both CSS and JavaScript can read the HTML, it may be better to use compound classes such as…


<div class='class_style class_function'></div>

…if a class name is there for the sake of JS functionality specifically. Also consider adding an identifier to the name. For instance "js_button_01" would only be referenced in the author's code by JS and not by CSS. Alternately, "ui_button_01" can be for use of the styling, but is kind of redundant if you're already using "js_".

Folder structures

We won't be making anything this complex just yet.

Good practices

Man it would be helpful it I would put something here...