• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How do I link my an external-CSS style-sheet to my HTML document?

Malcolm

Administrator
Administrator
Verified
I just created my HTML document: Brocoli.html, and I'm ready to start styling my page. But, I'm not quite sure how to link my .CSS file to my .HTML file..Please help!
 
Last edited by a moderator:
Solution
Hi @Malcolm, You great legend.

You can link an external CSS file to your HTML by HAHA wait. You thought it was that easy?? You got to do some learning. This isn't a free answers site. You must first understand what and how it does...

Malcolm

Administrator
Administrator
Verified
Hi @Malcolm, You great legend.

You can link an external CSS file to your HTML by HAHA wait. You thought it was that easy?? You got to do some learning. This isn't a free answers site. You must first understand what and how it does it. The <link> tag is used to connect your HTML document with an external resource, e.g. CSS file and is typically located at the top of your HTML document within the <head> tags- Not seeing this? Take a quick peek at our boilerplate post. The link tag comes as an empty element which means you'll have to add attributes for it to work.

An example: <link href="css/example.css" type="text/css" rel="stylesheet"/>, The attributes are bolded.
The href attribute specifies the path in which the CSS file is located. Next, type attribute specifies the type of document being linked and its value should be text/css. Rel attribute specifies the relationship between the HTML page and the file that it is linked to. If you have your CSS file located in your root file, then you will just need to change the value for href to "href="example.css".

Once you are finished your code it should look something like the example below :

HTML:
  <head>
    <link href="css/example.css" type="text/css" rel="stylesheet" />
    <title></title>
  </head>
 
Last edited:
Solution

NAAZANIQUA

New Coder
Save the file as "external.html" in the same folder of "styles.css". Notice that, the <link > tag is connecting this HTML file to the external css file "styles.css". After saving both file (html and css) in the same folder , open the "external.html" file in your web browser.
 

Ghost

Active Coder
The stylesheet (.css file) and the HTML file can be in separate folders as long as you include the folder path in your link href="" part of the include in your HTML file.
<link rel="stylesheet" type="text/css" href="foldername/folder2/style.css" />
 
Top Bottom