access_time
June 15, 2020
hourglass_empty
2min Read
person_outline
Merkys M.
How to Link a Style Sheet (CSS) File to Your HTML File
Embedding CSS rules to HTML can be time-consuming and energy-wasting. Luckily for you, there is another way to do it. Here, we’ll uncover how to link CSS to HTML file. By using the following method, you’ll get to combine both CSS and HTML in the most efficient way.
Practice your CSS and HTML with shared hosting and save up to 90%
Reasons to Use CSS External Style Sheet File for HTML Programming
Cascading Style Sheet (CSS) is a style sheet language that manages the website’s visual representation. Commonly used with markup languages like HTML, CSS allows you to style each HTML element and give your overall site a more appealing look.
While there are many ways to add CSS to HTML, the simplest method of doing it is by adding all the CSS rules to the HTML directly. Despite so, this CSS method carries many disadvantages. Aside from bloating your code with repetitive CSS rules, its editing process is time-consuming as changes made in one file won’t apply to the others.
To avoid these hassles, you can put the CSS styles into a .css file and link it to the HTML files. That way, one CSS file can be used to style many HTML pages.
Here are the advantages of linking a CSS file to HTML:
- Time-effective — you only need to create a single CSS file to style all HTML files.
- Faster load time — the site will cache the CSS file for your visitors’ next visit.
- Improve SEO — storing CSS styles in another file makes the HTML file more concise and readable by search engines.
How to Connect a CSS External Style Sheet to HTML File
To link CSS to an HTML file, we use the <link> tag that you put in the HTML’s <head> section. The link will look like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
Here’s a breakdown of the attributes contained within the link:
- rel — defines the relationship between the file that hosts this command and the file defined in the href attribute. The standard value for this attribute is stylesheet.
- type — defines the content of the linked file. In this tutorial, we set this attribute’s value to text/css. However, you can skip it altogether if you’re using HTML5.
- href — specifies the location of the CSS file you want to link to the HTML. If the CSS file is in the same directory as the HTML file, you only need to enter the file name. Otherwise, you need to include the folder name in which you store the CSS file (example: CSS/stylesheet.css).
- media — specifies the type of media the CSS rules are optimized for. In this tutorial, we use the screen value to imply its use for computer screens. If you want to apply the CSS rules to printed pages, you can set the value to print.
Once you’ve included the above link in your HTML file, save the changes and enter your website’s URL in the browser. Styles written in the CSS file should change the look of your website.
Conclusion
While there are many ways to link CSS to HTML, the best method to do it is to use the HTML’s <link> tag. By using this method, you’ll get to save time and code more efficiently without affecting your website’s visual representation
What do you think of this tutorial? Let us know in the comments section below!
The Author
Merkys M. / @merkys
Merkys is a server administrator and Linux expert at Hostinger. He keeps everything up & running while tackling advanced server management issues. Besides that, he’s a big fan of blockchain technology, web development, and bodybuilding.
Featured tutorials
Andrew
September 21 2020
is there away to let the user switch to a new style sheet will in the webpage
Prakul
September 30 2020
How to specify screen size ?
Tomislav T.
Replied on November 18 2020
Hey there Andrew. You can just change the stylesheet that your website uses in the code.