Website

How to Link a Stylesheet (CSS) File to Your HTML File

Introduction

Every modern website should have a stylesheet file on which all the classes of HTML objects are defined. This tutorial explains how to connect a stylesheet (CSS) file to an HTML document. This is the most popular method of attaching CSS rules to an HTML document. Using this method all the styles are placed in one file which has (.CSS) extension and you do not need to write all the styles in an HTML document. CSS file is saved on the server and you only need to create a link to it in your HTML document. This tutorial explains how it’s done.

What you’ll need

Before you begin this guide you’ll need the following:

  • Access to your server
  • HTML document (.html or .htm file extension)
  • CSS file (file with .css extension)
  • Basic knowledge of HTML and CSS coding

Step 1 — Checking CSS file path and inserting the line into an HTML document

The link is just a simple line of HTML that you put between the <head> and </head> tags of your HTML document, it looks like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

This is how it should look on the HTML code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
</head>
<body>
</body>
</html>

Make sure you include the correct path to your CSS file in the href. It’s recommended to place CSS file in the same directory as your HTML file or create a subdirectory called CSS for those files to store (if files are placed in the directory called CSS href should be changed to href="CSS/stylesheet.css" in the example provided above).

Explanation of link attributes:

rel – This attribute defines what relationship between the file in which this command is written and the file which is defined in the href path is. Usually, it will simply be a stylesheet if we connect a CSS(stylesheet) file.

type – Type attribute defines the content of the file to which it’s linked. The value of the attribute should be a MIME type such as text/html, text/css and similar. This tutorial explains the usage of a stylesheet so it should be text/css.

href – Href attribute specifies the location of the file which you need to create a link with. As you are trying to link a CSS file, the path should be a subdirectory of the CSS (if it’s not in the same directory as an HTML file) and the name of CSS file. If the file is in the same directory you only need to enter the file name.

An example of href syntax when a stylesheet file is in a subdirectory:

  • Condition 1: Let’s say HTML file is located in the public_html directory.
  • Condition 2: Stylesheet file (Let’s say its name is stylesheet.css) is located in the subdirectory named CSS of the public_html directory.

Correct syntax: href definition in your HTML file should be CSS/stylesheet.css

media – This attribute defines the media. Its value must be a media query. Sometimes external stylesheets are used and this attribute is useful when a proper stylesheet is needed to select according to the device visitor is using.

The media attribute specifies when the CSS rules are to be used. “screen” indicates usage on the computer screen.
If print is specified then the rules will only be applied when the page is being printed.
You can also include multiple CSS files if required.

Step 2 — Saving HTML file and checking changes

Save the changes made in the HTML file and enter your website URL in the browser. Styles which are written in the CSS file should now appear on your website.

Conclusion

This is a very simple way to connect a CSS file to your HTML document. You can connect as many stylesheets as you wish using this syntax. Every CSS file should have its own attribute.
Here are several advantages of this method:

  • This method allows you to save time because if the same class is used in several pages you only need to define that class in the CSS file and not on every page it’s used.
  • CSS makes your website faster because CSS file is loaded and cached in the browser of the visitor. Next time he visits the same website some information about the website is already in his browser history.
  • Your website should be ranked better by search engines. As stylesheet code is defined in the CSS file your page will have almost the plain text content and search engines will not struggle reading it. Clear content is the main factor talking about success in the ranking of search engines.

About the author

Merkys M.

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.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

[href]
[href]
More in Website
Improving Website Performance – Minifying CSS, HTML and JavaScript

Close