To link an external Css file to an html document is very simple and straightforward.
In this tutorial, we will use two examples to explain how to link an our Css file to our Html document.
How To Generally link an external Css to Html Document
Generally, to link your Css file to your html document, you need to specify the name of the Css file within the “href” quotes.
Example
- First I created a new project folder and named it “external Css”
- Secondly, I open the folder in my code editor
That’s the new folder without any file
3. Thirdly, I created an html file with the name “index.html” and a basic html structure
4. I created a cascading style sheet (Css) with a name of “style.css” and added a black background color to the body and white font color to the text.
5. I link my Css file (style.css) to my html document at the head of the document.
Next, i added a heading text to my html document.
To link the Css file, we use
<link rel=”stylesheet” href=”/style.css” />
You can also use
<link rel=”stylesheet” href=”style.css” />
Or
<link rel=”stylesheet” href=”./style.css” />
It will work.
I open the html document on my google chrome browser.
I link my Css to my Html document successfully
This is just how simple it is to link your external Css to you html document.
How To Link External Css Inside A Folder To Html File
We will continue with the previous example
First thing, I will create a folder and name it “CSS_FOLDER”
Next, I will create a new Css file inside that folder and name it “custom.css”, add background color and padding to the h1 text
I will now link my new external css which is inside a folder to my html as shown below
<link rel="stylesheet" href="./CSS_FOLDER/custom.css" />
I first enter the folder name followed by a forward slash and then the name of the Css file
Notice that the result is different from the previous one.
This means that my external css inside a folder has been successfully linked to my html file.
This is how you can link your Css file to your Html document. Hopefully you understand
Don’t forget you can also learn how to host your html, Css and JavaScript website free online by clicking here