{"id":616,"date":"2019-11-05T03:08:09","date_gmt":"2019-11-05T03:08:09","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/websitehow-to-link-a-stylesheet-css-file-to-your-html-file\/"},"modified":"2026-03-10T09:36:59","modified_gmt":"2026-03-10T09:36:59","slug":"linking-css-to-html","status":"publish","type":"post","link":"\/ph\/tutorials\/website\/how-to-link-a-stylesheet-css-file-to-your-html-file","title":{"rendered":"How to Link CSS to HTML Files in Web Development"},"content":{"rendered":"<p>In web development, linking CSS to HTML files is a crucial step in defining the visual presentation of web pages. There are three ways to link CSS to HTML based on different types of CSS styles &#8210; inline, internal, and external.<\/p><p>The external method involves linking an HTML document to an external CSS file, using the <strong>&lt;link&gt;<\/strong> tag placed in the <strong>&lt;head&gt;<\/strong> section of the HTML document.<\/p><p>Key attributes of this tag include <strong>rel=&rdquo;stylesheet&rdquo;<\/strong>, which defines the relationship between the HTML document and the linked CSS file, and <strong>type=&rdquo;text\/css&rdquo;<\/strong>, specifying the stylesheet type.<\/p><p>The <strong>href <\/strong>attribute provides the path to the external CSS file, facilitating a streamlined approach to applying consistent styles across multiple web pages.<\/p><p>Keep reading as we&rsquo;ll break down the steps and provide you with a comprehensive explanation of CSS and why you should use it.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/CSS-3-Cheatsheet.pdf\" target=\"_blank\" rel=\"noopener\">Download complete CSS cheat sheet<\/a><\/p><p>\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-link-css-to-html-file-video-tutorial\">How to Link CSS to HTML File &ndash; Video Tutorial<\/h2><p>Looking for a visual guide? Check out this video.<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Link CSS to HTML\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/b3_n5UPYvMo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-academy.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Subscribe For more educational videos!<\/span>\n          <span class=\"channel-name\">Hostinger Academy<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n          <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCbNIC-svDbtUOH2qsLnPQPg?sub_confirmation=1\">\n            <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n            <span>Subscribe<\/span>\n          <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-link-css-to-html-file-externally\">How to Link CSS to HTML File Externally<\/h2><p><span style=\"font-weight: 400\">While there are multiple approaches linking CSS to an <a href=\"\/ph\/tutorials\/what-is-html\">HTML<\/a> file, the most efficient way is to link an external style sheet to an HTML document. It requires a separate document with a <\/span><b>.css<\/b><span style=\"font-weight: 400\"> extension, which solely contains all <a href=\"\/ph\/tutorials\/what-is-css\">CSS<\/a> rules without HTML tags.<\/span><\/p><p><span style=\"font-weight: 400\">Unlike internal and inline styles, this method changes many HTML pages by editing one CSS file. It saves time <\/span><span style=\"font-weight: 400\">&ndash; there is no need to <\/span><span style=\"font-weight: 400\">change each CSS property on every website&rsquo;s HTML page.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Start linking style sheets to HTML files <\/span><span style=\"font-weight: 400\">by<\/span><span style=\"font-weight: 400\"> creating an external CSS document using an <\/span><a href=\"\/ph\/tutorials\/best-html-editors\"><span style=\"font-weight: 400\">HTML text editor<\/span><\/a><span style=\"font-weight: 400\"> and adding CSS rules. For instance, here are the style rules of <\/span><b>example.css<\/b><span style=\"font-weight: 400\">:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n  background-color: yellow;\n}\n\nh1 {\n  color: blue;\n  margin-right: 30px;\n}<\/pre><p><span style=\"font-weight: 400\">Make sure not to add a space between the property values. For example, instead of <\/span><b>margin-right: 30px<\/b><span style=\"font-weight: 400\">, write <\/span><b>margin-right: 30 px<\/b><span style=\"font-weight: 400\">.<\/span><\/p><p><span style=\"font-weight: 400\">Then, use the <\/span><b>&lt;link&gt; <\/b><span style=\"font-weight: 400\">tag in the <\/span><b>&lt;head&gt; <\/b><span style=\"font-weight: 400\">section of your HTML page to link a CSS file to an HTML document. Next, specify the name of your external CSS file. I<\/span><span style=\"font-weight: 400\">n this case, it&rsquo;s <\/span><b>example.css<\/b><span style=\"font-weight: 400\"> so the code will look as follows:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;head&gt;\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"example.css\" media=&rdquo;screen&rdquo; \/&gt;\n&lt;\/head&gt;<\/pre><p><span style=\"font-weight: 400\">For better understanding, here&rsquo;s a breakdown of the attributes contained within the <\/span><b>&lt;link&gt;<\/b><span style=\"font-weight: 400\"> tag:<\/span><\/p><ul class=\"wp-block-list\">\n<li><strong>rel<\/strong> &ndash; defines the relationship between the linked document and the current one. Use the rel attribute only when the <strong>href<\/strong> attribute is present.<\/li>\n\n\n\n<li><strong>type <\/strong>&ndash; determines the content of the linked file or document between the <strong>&lt;style&gt; <\/strong>and <strong>&lt;\/style&gt;<\/strong> tags. It has a <strong>text<\/strong> or <strong>css<\/strong> as the default value.<\/li>\n\n\n\n<li><strong>href <\/strong>&ndash; specifies the location of the CSS file you want to link to the HTML. If both HTML and CSS files are in the same folder, enter only the file name. Otherwise, include the folder name in which you store the CSS file.<\/li>\n\n\n\n<li><strong>media <\/strong>&ndash; describes the type of media the CSS styles are optimized for. In this example, we put <strong>screen<\/strong> as the attribute value to imply its use for computer screens. To apply the CSS rules to printed pages, set the value to <strong>print<\/strong>.<\/li>\n<\/ul><p><span style=\"font-weight: 400\">Once you&rsquo;ve included the <\/span><b>&lt;link&gt;<\/b><span style=\"font-weight: 400\"> element in your HTML file, save the changes and enter your website&rsquo;s URL in your web browser. Styles written in the CSS file should change the look of the website.<\/span><\/p><p><span style=\"font-weight: 400\">Although external CSS helps make the web development process easier, keep in mind that HTML pages might not be rendered properly before the external style sheet is loaded. Furthermore, linking to several CSS documents can increase your website&rsquo;s loading time.<\/span><\/p><p><span style=\"font-weight: 400\">On that note, if you want to edit a specific HTML element, it might be better to use the inline style method. Meanwhile, the internal or embedded style might be ideal for applying CSS rules to a single page.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-reasons-to-use-css\">Reasons to Use CSS<\/h2><p><span style=\"font-weight: 400\">CSS is a s<\/span><span style=\"font-weight: 400\">tyle sheet language that manages the website&rsquo;s visual representation. It consists of a list of formatting rules to style elements written in markup languages like HTML. In addition, CSS defines the display of HTML elements on various media types, such as projected presentations or television-type devices.<\/span><\/p><p><span style=\"font-weight: 400\">Whenever a browser finds a style sheet, it&rsquo;ll convert the HTML file according to the provided style information. Hence, it&rsquo;s important to link CSS to an HTML file to give your site a more engaging look across devices.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Other benefits from linking a CSS file to an HTML document are:<\/span><\/p><ul class=\"wp-block-list\">\n<li><strong>Consistent design.<\/strong> Maintains formatting and design consistency throughout the website. A single adjustment on CSS rules can be applied universally to multiple areas of a website.<\/li>\n\n\n\n<li><strong>Faster loading time.<\/strong> It only requires a single CSS file to style all HTML files. With fewer strings of code, a website can load faster. The site will also cache the CSS file for your visitors&rsquo; next visit.<\/li>\n\n\n\n<li><strong>Improve SEO<\/strong>. Storing CSS styles in another file makes the HTML file more concise and organized. As a result, the website will have a cleaner and more lightweight code, which results in better crawlability by search engines.<\/li>\n<\/ul><p><span style=\"font-weight: 400\">On the other hand, CSS has several disadvantages, such as<\/span>:<\/p><ul class=\"wp-block-list\">\n<li><strong>Comes in multiple levels. <\/strong>The CSS style sheet has three levels. Such different frameworks can be confusing, especially for beginners.<\/li>\n\n\n\n<li><strong>Compatibility issues. <\/strong>Some style sheets might not work on certain browsers as different browsers read CSS differently. Use CSS and HTML code validators to avoid these issues.<\/li>\n\n\n\n<li><strong>Vulnerable to attacks. <\/strong>The open-source nature of CSS can increase the risk of cyberattacks. For example, a person with access to the CSS file might write malicious code or steal private data. However, proper security practices can prevent this issue.<\/li>\n<\/ul><p><span style=\"font-weight: 400\">All in all, CSS plays an important role when <\/span><a href=\"\/ph\/tutorials\/how-to-design-a-website\"><span style=\"font-weight: 400\">designing a website<\/span><\/a><span style=\"font-weight: 400\">. It controls the formatting of various elements on a web page, such as fonts, background colors, and object positions. With the right application of CSS and HTML, a website can give an optimized user experience.&nbsp;<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p><span style=\"font-weight: 400\">Embedding CSS rules to HTML elements can be time-consuming and energy-wasting. Luckily, external style sheets make the process more efficient.<\/span><\/p><p><span style=\"font-weight: 400\">CSS external style sheets are documents containing a list of style rules. Link them to an HTML document, and you&rsquo;ll be able to change multiple pages at once, avoiding code bloat and keeping your HTML structure clean.<\/span><\/p><p><span style=\"font-weight: 400\">We hope that knowing <a href=\"\/ph\/tutorials\/how-to-make-a-website\">how to set up your website<\/a> by linking CSS to HTML easily will save you time to focus more on <\/span><a href=\"\/ph\/tutorials\/drive-traffic-to-your-website\"><span style=\"font-weight: 400\">growing the traffic<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p><p>If you&rsquo;re interested to learn more about coding, head to our <a href=\"\/ph\/tutorials\/learn-coding-online-for-free\">guide on learning to code<\/a>.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-full\"><a href=\"\/ph\/web-hosting\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\" srcset=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/11\/Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/11\/Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/11\/Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/11\/Web-hosting_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-to-link-css-to-html-faq\">How to link CSS to HTML FAQ<\/h2><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1662547406385\"><h3 class=\"schema-faq-question\">How Do I Link HTML to CSS in HTML?<\/h3> <p class=\"schema-faq-answer\">In order to link HTML to CSS in your HTML file, you need to use link tags with the right attributes. Remember that, as a self-closing tag, the link tag should be included in the head section of your HTML file.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1662547424371\"><h3 class=\"schema-faq-question\">Why Is My CSS Not Linking to HTML?<\/h3> <p class=\"schema-faq-answer\">Check that your files are in the same folder if you have trouble linking your CSS to HTML. Check that the file path is correct if the CSS file is in a different folder.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>In web development, linking CSS to HTML files is a crucial step in defining the visual presentation of web pages. There are three ways to link CSS to HTML based on different types of CSS styles &#8210; inline, internal, and external. The external method involves linking an HTML document to an external CSS file, using [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ph\/tutorials\/website\/how-to-link-a-stylesheet-css-file-to-your-html-file\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":115,"featured_media":84478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Link CSS to HTML Files: An All-You-Need-to-Know Guide","rank_math_description":"In this detailed guide, you'll learn how to link a CSS style sheet to HTML and the many reasons why you would want to do so.","rank_math_focus_keyword":"how to link css to html","footnotes":""},"categories":[1],"tags":[],"class_list":["post-616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/comments?post=616"}],"version-history":[{"count":30,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/616\/revisions"}],"predecessor-version":[{"id":104128,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/616\/revisions\/104128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media\/84478"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media?parent=616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/categories?post=616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/tags?post=616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}