Creating a webpage

HTML-CSS
1

I am creating a website. If i create two files, index.html and style.css files. How do i ensure that the external style.css file works on the webpage of the index.html please? And is it same process if i want to use external js.file in the webpage?

2
3

Hello,

Basically to link the stylesheet document (the .css file) to the html document, you need to add a <link> element inside the <head> section of your HTML document and add the location of the css there, here is an example:

<link href="style.css" rel="stylesheet">

and here is how the actual code may look like:

<head>
    <title>Website Title</title>
    <link href="style.css" rel="stylesheet">
</head>

for JavaScript it is a bit different, you have to use the <script> element instead of <link>, it is recommended to add the external JavaScript file in the bottom <body>, before the closing </body> tag so that the actual HTML webpage loads before the JS file. (so do not add the JavaScript file in your section like you did with css)

heres and example of how to link a JavaScript file:

<body>
<p>Other Content</p>
<script src="scripts.js"></script>
</body>

Keep in mind that using only the name of the files as source only works when the html file is in the same folder as the css or js file. if they are in a subfolder called folder (as an example) you add it like this:

<link href="folder/style.css" rel="stylesheet">

Note: This applies to only the file in the same folder or the same webpage, if you want to use a CSS or JavaScript file hosted in an external website, you have to add the full url to the file(with the https:// in the beginning and all), example with dummy url:

<head>
    <title>Website Title</title>
    <link href="https://freecodecamp.org/folder/style.css" rel="stylesheet">
</head>
1 Like
4

Thanks alot. It worked just fine.

1 Like