How to link css to html

External CSS Stylesheets – How to Link CSS to HTML and Import into Head

It is considered a best practice to have your CSS stylesheets in an external file. So how can you link that CSS to your HTML file?

Linking to an external CSS file is an important part of any HTML page boilerplate. And in this article, we’ll learn how to do it.

How to Link a CSS File to an HTML File

You can link your CSS file to your HTML file by adding a link element inside the head element of your HTML file, like so:

The link element has many uses, and it is important to specify the right attributes so that you can use it to import an external CSS stylesheet. We’ll look at some important attributes now.

The rel attribute

The first of the two indispensable attributes is the rel attribute. You will use this attribute to tell the browser what the relationship is with the imported file.

You’ll write rel=»stylesheet» to tell the browser that you are importing a stylesheet.

The href attribute

The second indispensable attribute is the href attribute, which specifies the file to import.

If the CSS file and the HTML file are in different folders, you need to write the correct path that needs to go from the HTML file to the CSS file.

For example, a common situation is that the CSS file is in a folder that is a sibling to the HTML file, like so:

The type attribute

The media attribute

The media attribute is not visible in the example. It’s an optional attribute that you can use to specify when to import a certain stylesheet. Its value must be a media type / media query.

This can be useful in case you want to separate the styles for different devices and screen sizes in different files. You would need to import each CSS file with its own link element.

You can check out these articles (or other sources) on media queries to learn more about what you can write as an attribute value:

Conclusion

In this article, you learned how to add an external style sheet to your web page using the link element and the href and src attributes.

You also learned that you can import multiple stylesheets and use the media attribute to determine when each one should be applied.

Have fun creating web pages!

Moderator and staff author for freeCodeCamp.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

How to Link CSS to HTML – Stylesheet File Linking

HTML is the markup language that helps you define the structure of a web page. CSS is the stylesheet language you use to make the structure presentable and nicely laid out.

To make the stylings you implement with CSS reflect in the HTML, you have to find a way to link the CSS to the HTML.

You can do the linking by writing inline CSS, internal CSS, or external CSS.

It is a best practice to keep your CSS separate from your HTML, so this article focuses on how you can link that external CSS to your HTML.

How to Link CSS to HTML

To link your CSS to your HTML, you have to use the link tag with some relevant attributes.

The link tag is a self-closing tag you should put at the head section of your HTML.

To link CSS to HTML with it, this is how you do it:

Place the link tag at the head section of your HTML as shown below:

Attributes of the Link Tag

The rel Attribute

The type Attribute

The href Attribute

href stands for “hypertext reference”. You use it to specify the location of the CSS file and the file name. It is a clickable link, so you can also hold CTRL and click it to view the CSS file.

For example, href=»styles.css» if the CSS file is located in the same folder as the HTML file. Or href=»folder/styles.css» if the CSS file is located on another folder.

Final Thoughts

This article showed you how to properly link an external CSS file to HTML with the link tag and the necessary attributes.

We also took a look at what each of the attributes means, so you don’t just use them without knowing how they work.

Web developer and technical writer focusing on frontend technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Linking CSS to HTML: a guide with examples

When it comes to websites, it’s not just the content that counts, but also its presentation. The style sheet language CSS is commonly used to format HTML appropriately. In this way, attributes such as layout, color, and shape of the individual HTML elements are defined. The CSS design instructions exist independently of HTML and must also be integrated into an electronic document.

Web hosting with a personal consultant

Fast and scalable, including a free domain for the first year and email address, trust web hosting from IONOS!

How to add CSS in HTML: which methods exist?

Linking CSS to HTML is possible with internal or external style sheets. With internal style sheets, the CSS instructions are located inside the HTML document. You can then integrate CSS at the beginning of the HTML file or place it in the source code. With this method, a good basic understanding of HTML and its syntax is an advantage. The most common and cleanest way to develop websites is to use external CSS style sheets. The CSS is integrated by linking the HTML document with an external CSS file. The following is an overview of the three methods:

The IONOS MyWebsite Website Builder includes a wide range of design templates so you can create a professional-looking website.

Include CSS: inline style

With this method, the design instructions are integrated directly into the source code using a style tag. The desired properties are only assigned to one element, so that deviating designs are possible throughout the HTML document. In the example below, the heading h1 is to be displayed in blue and font size 14:

With this type of integration, many of the advantages of CSS are lost. This includes the option to define a single command that then applies, for example, to all h1 elements in the HTML document. In some circumstances, there’s also a greater maintenance effort, because direct intervention in the HTML code is required.

Add CSS at the beginning of HTML

Here, you include CSS in the header of your HTML document. The style tag thus becomes part of the head element and applies to the entire file. The design instructions are contained in the document but are separated from the HTML code. In the example below, the same command applies as in the previous example. This time, however, all h1 headings in the file should be formatted according to the information.

Integrate CSS with an external file

This is possibly the best method to link CSS to HTML. A website often consists of many pages, so it makes sense to save design instructions in a separate file. This enables a clean separation between content and design and eases maintenance. The exported file is simply linked to the HTML document. You save the external stylesheet with the extension .css and then use a link tag to include it in your HTML file. In the following example, the CSS file is named stylesheet.css.

The rel attribute defines the logical relationship type; and href refers to the CSS file to be embedded. Note that the link element can take on other attributes. With media = «print» you specify, for example, that the stylesheet is only used in the print view. The external stylesheet does not contain any HTML tags, just the respective selector and curly brackets with the declarations as in the following example:

Discover the best CSS tricks to optimize the design of your web project or trust our MyWebsite Design Service for professional results.

How to link css to html on TextEdit [closed]

Take a look at my code. Tell me what I am doing wrong.

Is my HTML link wrong?

This is the updated HTML File

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

It’s either : background-color:yellow; or background-color:#FFE51E; but not background-color:#yellow;

Plus you are using the wrong quotation marks : ” instead of » and you have to put link tags in head tags.

Which gives us this : jsfiddle

the # symbol us used for the hexadecimal color like #fff if you wanna one of the colors by name you just use the name without any symbol:

CSS:

HTML:

I actually fixed it by taking out the path for the link. I had copied it on by accident and that was why it wasn’t working. Here is the working code.

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.

Related

Hot Network Questions

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Linking to a CSS stylesheet

I’m kind of a newbie to html and definitely to CSS. I’m learning from the book Foundation Website Creation with CSS, XHTML, and JavaScript, which I understand is old at the time of this question, but still hoping I can help many. Here is my markup:

Why isn’t my stylesheet linking? Am I allowed to make this link? What should I do? I believe it’s working in Chrome, but not in IE or Firefox, perhaps you could help me understand this also.

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

This should work if the file is in the same directory (folder) as your html-file:

To explain what a relative URL path is, imagine you’ve got a folder structure like this:

You can use file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css Source. But ONLY if the css-file is located on the computer that you are loading the page on!

So. if the CSS-file is in the same directory as the file including it (probably index.html ), your code would be:

And the other, with the file:/// URI and the file is located on the computer loading the html-page, would look like

Standard CSS link declaration goes something like this:

There is probably something wrong with the path you entered. In the future, consider having both the HTML doc that you’re editing. and the CSS document on desktop(or just in the same folder). that way you don’t have to type in the full path every time (assuming you’re just using a simple Notepad-like editor)

Before the your local URL type file:///

You shouldn’t link to a local file because on your live website this won’t work. Even if your filesystem is set up the same way, the HTTP server probably won’t serve it. It also depends on how your HTML is being served locally (by a server or just with files).

Anyway, you should link to the CSS file relative to the html file or preferably the document root (the folder that is serving your website files). If you can figure out your document root, you could use:

. assuming that your document root is at something like

Make sure that you understand the document root and relative/absolute paths.

As your file is stored locally, make sure you use the file:/// URI scheme:

Still not working?

Some (or most?) browsers block access to your local file system, even when the webpage itself runs locally. This is a security measure to prevent webpages from accessing and modifying your local files.