CSS

May 12, 2022

Jordana A.

4min Read

How to Link CSS to HTML Files in Web Development

How to Link CSS to HTML Files in Web Development

HTML (HyperText Markup Language) and CSS (Cascading Style Sheet) are the fundamental web development languages. HTML defines a website’s content and structure, while CSS specifies the design and presentation. Together, both languages allow to create a website that is well-structured and functional.

CSS defines style declarations and applies them to HTML documents. There are three different ways to link CSS to HTML based on three different types of CSS styles:

  • Inline – uses the style attribute inside an HTML element
  • Internal – written in the <head> section of an HTML file
  • External – links an HTML document to an external CSS file

This article will focus on external CSS to an HTML file linking as it changes the appearance of your entire website with just one file. We’ll also include a more detailed explanation of CSS and its benefits.

Download Complete CSS cheat sheet

How to Link CSS to HTML File – Video Tutorial

Looking for visual guide? Check out this video.

Subscribe For more educational videos! Hostinger Academy

Connecting a CSS External Style Sheet to an HTML File

While there are multiple approaches linking CSS to an HTML file, the most efficient way is to link an external style sheet to an HTML document. It requires a separate document with a .css extension which solely contains all CSS rules without HTML tags.

Unlike internal and inline styles, this method changes many HTML pages by editing one CSS file. It saves time – there is no need to change each CSS property on every website’s HTML page. 

Start linking style sheets to HTML files by creating an external CSS document using an HTML text editor and adding CSS rules. For instance, here are the style rules of example.css:

body {
  background-color: yellow;
}

h1 {
  color: blue;
  margin-right: 30px;
}

Make sure not to add a space between the property value. For example, instead of margin-right: 30px write margin-right: 30 px.

Then, use the <link> tag in the <head> section of your HTML page to link a CSS file to an HTML document. Next, specify the name of your external CSS file. In this case, it’s example.css so the code will look as follows:

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

For better understanding, here’s a breakdown of the attributes contained within the <link> tag:

  • rel – defines the relationship between the linked document and the current one. Use the rel attribute only when the href attribute is present.
  • type – determines the content of the linked file or document between the <style> and </style> tags. It has a text or css as the default value.
  • href – 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.
  • media – describes the type of media the CSS styles are optimized for. In this example, we put screen as the attribute value to imply its use for computer screens. To apply the CSS rules to printed pages, set the value to print.

Once you’ve included the <link> element in your HTML file, save the changes and enter your website’s URL in your web browser. Styles written in the CSS file should change the look of the website.

Although external CSS helps make the web development process easier, there are a few things to 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’s loading time.

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.

Reasons to Use CSS

CSS is a style sheet language that manages the website’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.

Whenever a browser finds a style sheet, it’ll convert the HTML file according to the provided style information. Hence, it’s important to link CSS to an HTML file to give your site a more engaging look across devices. 

Other benefits from linking a CSS file to an HTML document are:

  • Consistent design. Maintains formatting and design consistency throughout the website. A single adjustment on CSS rules can be applied universally to multiple areas of a website.
  • Faster loading time. 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’ next visit.
  • Improve SEO. 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.

On the other hand, CSS has several disadvantages, such as:

  • Comes in multiple levels. The CSS style sheet has three levels. Such different frameworks can be confusing, especially for beginners.
  • Compatibility issues. 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.
  • Vulnerable to attacks. 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.

All in all, CSS plays an important role when designing a website. 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. 

Conclusion

Embedding CSS rules to HTML elements can be time-consuming and energy-wasting. Luckily, external style sheets make the process more efficient.

CSS external style sheets are documents containing a list of style rules. Link them to an HTML document, and you’ll be able to change multiple pages at once, avoiding code bloat and keeping your HTML structure clean.

We hope that knowing how to link CSS to HTML easily will save you time when creating a website to focus more on growing the traffic.

If you’re interested to learn more about coding, head to our guide on learning to code.

Was this tutorial helpful?

Author
The author

Jordana Alexandrea

Jordana is a Digital Content Writer at Hostinger. With her Information System and website development knowledge, she aims to help aspiring developers and enterpreneurs build their technical skills. During her free time, she travels and dabbles in freestyle writing.

More from Jordana Alexandrea