How to Link a CSS File to an HTML File

In this article, you will learn how to link a CSS file to an HTML file.

Last updated - July 18, 2024

 

Why Should I Link Files?

CSS is used to style HTML elements on your webpage. While it is possible to include CSS code in an HTML file, it is best practice to write CSS code in its own file and import it to an HTML file. CSS files can be linked to HTML files using the <link> tag. The <link> tag goes between the <head> and </head> tags at the top of an HTML page. The <link> tag will include the following attributes:

  • href - the name of the file
  • type - the type of file. This will be "text/css"
  • rel - relationship to the linked document. This will always be "stylesheet"

 

All together, the CSS link will look like this. 

link example

 

 

File Linking Tips

  • Make sure the link is placed between the opening and closing <head></head> tags in your HTML file.
  • Make sure the CSS file name in the link is spelled correctly.
  • Make sure the syntax used in your link is correct. Check for the correct placement of quotation marks " ", equal signs =,  and brackets < >