Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

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

Malcolm

Administrator
Administrator
Staff Team
Code+
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 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...
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 :

Code:
  <head>
    <link href="css/example.css" type="text/css" rel="stylesheet" />
    <title></title>
  </head>
 
Last edited:
Solution
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" />
 
Just for completion:

Beside an own CSS file its also able to load external files. That often happens when including content from external sources like webfonts.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

EDIT: At least since HTML5 the type-attribute is not necessary anymore. Many frontend developers writing that out of habit or because they learned it with much older HTML-Versions.

Many Greets
 
Last edited:
Back
Top Bottom