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> 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
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
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.
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.
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.