-1

I am a bit new to programming, and I know this is probably a fairly newb question to be asking, but I guess I need someone to help point me the way a bit? I researched, but am still confused.

When making a website, and adding say, a menu that points to different pages, the html pages link to each other like....

<ul>
<li><a href="index.html">home</a></li>
<li> <a href="about.html">about</a></li>
</ul>

(for example) ... say that the html for home is the main page, titled index.html in the editor. Then say I want to add a second page, for about, I would have it link then to "about.html" Correct?

... So my question is, how do I apply this with CSS and JS as well? Because it already links to the html file, how do I have it link to a 2nd CSS and JS file as well? So that I can have CSS and JS on the multiple pages?

I am sure the answer is somewhat simple, but I am a beginner and very confused. Help? Thank you <3

Kaitlin Danson
  • 113
  • 1
  • 13

7 Answers7

1

Unless you are using server-side scripting languages or template engines, you will have to include the required JS and CSS in every HTML page.

Such HTML pages are often reffered to as static HTML

0

In each html page you would be including the required css and javascript. Hence if you wanted different css/javascript for each page, just include the necessary files in corresponding html, provided each page is a separate html.

eg: Inside your index.html you would have

<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>

and inside your about.html you would have:

<link rel="stylesheet" href="css/about.css">
<script src="js/about.js"></script>
Arathi Sreekumar
  • 2,544
  • 1
  • 17
  • 28
0

Link a javascript file:

How do I link a JavaScript file to a HTML file? (Second answer is simplest)

<script type="text/javascript" src="myscript.js"></script>

Link a css stylesheet:

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

*put both these links in the header of the html you want to use them

Community
  • 1
  • 1
FreshWaterTaffy
  • 270
  • 1
  • 2
  • 18
0

Sample HTML:

<html>
  <head>

  </head>
  <body>

  </body>
</html>

HTML executes TOP to BOTTOM, so it is suggest include you javascript file in head tag as it comes before body, so javascript will be available when you html loads.

Keep all your css in text file and give extension as .css lets suppose(myFile.css) and include in head tag as

<head>
    <link href="[pathToFile]/myFile.css" rel="stylesheet" type="text/css">
</head>

if CSS file in same path then

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

Do the same to javascript and save as .js file (suppose myFile.js)

<head>
    <script src="myFile.js" type="text/javascript"></script>
</head>

Go to following link for further reading javascript | CSS

Ajay Narain Mathur
  • 5,326
  • 2
  • 20
  • 32
0

You can put scripts (Javascript) and styling (CSS) in external files, and each html file would include the javascript and css files in their head and body. For Javascript, use a script tag at the bottom of the page (so that the rest of the page is downloaded first and can start being displayed) like so:

<script src="js/all.min.js"></script>

where js/all.min.js is replaced with the relative or absolute path to the script file, just like including an image. You can have multiple javascript includes:

<script src="js/script1.js"></script>
<script src="js/script2.js"></script>

Stylesheets are included in the head of the html document, near the , and look like this:

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

Again, you can include multiple stylesheets.

See this W3 article for more information on stylesheets and this stackoverflow post on including javascript.

As an aside, it is often recommended that you extract styles and scripts into separate files so they can be used and reused by multiple pages.

Community
  • 1
  • 1
whiterook6
  • 3,270
  • 3
  • 34
  • 77
  • Thank you so much! I got it now... So basically... if I wanted to create a seperate CSS file for about.html, say about.css, I would just link that at the top of the html file? – Kaitlin Danson Jun 17 '15 at 16:15
  • Yep, in the header section. This is very common and you'll find plenty of examples on how to do this. – whiterook6 Jun 17 '15 at 16:18
0

One pretty common way to do this is to add a link tag to the <head> section of each HTML page you'd like to apply the CSS to like so:

<!DOCTYPE html>
<html>
<head>
    <!-- add the following -->
    <link href='./css/main.css' rel='stylesheet'>
</head>
<body>
    <header>
        <h1> My Great Page </h1>
    </header>
</body>
</html>

It works similarly for JavaScript files except you use script tags:

<!DOCTYPE html>
<html>
<head>

    <script src='./js/script.js'></script>
</head>
<body>
    <header>
        <h1> My Great Page </h1>
    </header>
</body>
</html>

Note: you'll have to replace the href="..." and the src="..." above with the correct path to your CSS and JS files

dillondrenzek
  • 73
  • 1
  • 5
0

CSS and JS files should be included in each separate .html page you have. The cleanest way is to have your css and js code in separate files, not inside the html, so that you can reuse it.

To include a CSS file you have to add this line to the <head> section of the page

<head>
    <link rel="stylesheet" type="text/css" href="path-to-your-css-file.css">
</head>

Then, for incluiding the JS file , the best way is to include it at the end of the <body> tag, just before </body> with this line:

    <script src="path-to-your-js-file.js"></script>
</body>

You should add these in every page you want the CSS and JS to be loaded. That is, in index.html and in about.html

pablito.aven
  • 1,135
  • 1
  • 11
  • 29