Welcome!

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.


    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
Staff Team
Code Plus
Company Plus
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...
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 lang="html" highlight="2"] <head>
<link href="css/example.css" type="text/css" rel="stylesheet" />
<title></title>
</head>[/CODE]
 
Last edited:
Solution
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.
 
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:
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!
There are three ways of inserting a style sheet:

1. External CSS
2. Internal CSS
3. Inline CSS


1. External CSS
Through External CSS, you can change the frontend part of a website by changing only one document. Every HTML page should incorporate a reference to the external style sheet file inside the <link> component, inside the head area.

2. Internal CSS
An internal CSS might be utilized on the off chance that one single HTML page has a one-of-a-kind style. The internal style is characterized inside the <style> component, inside the head area.

3. Inline CSS
An inline style might be utilized to apply a special style for a single component.To utilize inline styles, add the style characteristic to the applicable component. The style trait can contain any CSS property.
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!
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom