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? Show
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 FileYou can link your CSS file to your HTML file by adding a
The The rel attributeThe first of the two indispensable attributes is the You'll write The project --- index.html css ---------- style.css0 attributeThe second indispensable attribute is the 0 attribute, which specifies the file to import.A common situation is that the CSS file and the HTML file are in the same folder. In such a case you can write 2.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:
In this case you would need to write a path like 3.The project --- index.html css ---------- style.css4 attribute
You use the 4 attribute to define the type of the content you're linking to. For a stylesheet, this would be 6. But since 7 is the only stylesheet language used on the web, it is not only optional, but it is even a best practice not to include it.The project --- index.html css ---------- style.css8 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 You can check out these articles (or other sources) on media queries to learn more about what you can write as an attribute value:
In this article, you learned how to add an external style sheet to your web page using the 0 and 2 attributes.You also learned that you can import multiple stylesheets and use the 8 attribute to determine when each one should be applied.Have fun creating web pages! ADVERTISEMENT ADVERTISEMENT ADVERTISEMENT 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 Why isn't my CSS linking to HTML?Make sure that your CSS file really has the file name “ mystyle. css “ and is located in the same folder as the HTML document. Also, you should add a closing </html> tag.
How do I link my CSS to my HTML?CSS can be added to HTML documents in 3 ways:. Inline - by using the style attribute inside HTML elements.. Internal - by using a <style> element in the <head> section.. External - by using a <link> element to link to an external CSS file.. |