Web development heavily relies on three main languages, namely HTML, CSS, and Javascript. HTML describes the structure of websites, that is, what elements are on the webpage.

Cascading Style Sheets(CSS), on the other hand, describes how HTML elements are presented visually, while Javascript is used to add interactivity and dynamic behavior to web pages.

CSS is particularly important when it comes to creating aesthetically pleasing user interfaces with excellent user experience. CSS is responsible for the presentation and styling of web content, and it is used to control the layout, appearance, and style of web pages.

For instance, using CSS, you can change how content is displayed on your web page and modify things such as fonts, colors, borders, margins, spacing, and backgrounds, among others.

Additionally, CSS is crucial in creating responsive websites that adapt to different screen sizes and devices. It also allows for consistent and uniform styles across different pages on a website and helps in making websites accessible to users with disabilities.

In case you want to align your website to your brand and use your brand colors in your website well, CSS is what will allow you to do this.

Without CSS, websites would probably look very similar, with very bland designs with no styles, color, hover effects, or backgrounds. Websites would also not be responsive and would have very little customization to align a website to a brand.

Therefore, CSS is a very important tool for web developers. To use CSS on your website, you need to link it with the HTML of the page. Remember, HTML describes the elements and content of a website.

Therefore, you need to link your HTML with CSS in order to use CSS to style the elements and content of your website. This article will teach you how to do this. However, before we look at how to link CSS to HTML, let us look at the different ways you can write CSS and use it to style your HTML elements.

Different Ways of Including CSS in Your HTML

There are three main ways of including CSS in your HTML files. This includes:

#1. Inline Styles

This involves writing your CSS styles directly on each HTML element, as shown below:

  
Geekflare
  
Geekflare is an online publication that produces high-quality articles on
    Technology, Business, and Fintech to help
    businesses and people grow.

As much as this method allows you to easily add CSS to your HTML pages, it is not a good way to add CSS to your HTML. This is because it is very time-consuming, makes code hard to read and maintain, particularly for large-scale styling, and can affect the loading times of web pages.

#2. Internal CSS

This involves writing the styles for a webpage inside a element that is placed in the section of the HTML page. An example of this is shown below:

  
  
    body {
      background-color: yellow;
    }

    h1 {
      color: orangered;
      font-size: 40px;
    }

    p {
      color: blue;
      font-size: 16px;
    }
  


  
Geekflare
  
Geekflare is an online publication that produces high-quality articles on
    Technology, Business, and Fintech to help
    businesses and people grow.

This method, though easy to do, is also not recommended as it makes it difficult to share styles between different HTML documents.

#3. External CSS Style Sheet

This involves creating a separate CSS file to hold all your styling for your HTML pages. This CSS file is then linked to an HTML document to style the elements on the web page. An example of an external CSS file is shown below:

body {
  background-color: yellow;
}

h1 {
  color: orangered;
  font-size: 40px;
}

p {
  color: blue;
  font-size: 16px;
}

This is the recommended approach of adding CSS to your HTML documents to style your web pages. Not only does it make it easy to share styles between different files, but it also separates your HTML from your CSS, making your code modular, easy to read, and easy to maintain.

How To Link CSS to HTML

To learn how to link CSS to HTML, create a folder, and inside it, create an HTML file called index.html and a CSS file called style.css. You can use any name for the two files, but the extensions should be .html and .css respectively.

Open the two files in your code editor. In the HTML file, paste the following code:

  



  
Geekflare
  
Geekflare is an online publication that produces high-quality articles on
    Technology, Business, and Fintech to help
    businesses and people grow.
  
Some of the topics covered by Geekflare include:
  

    
Programming
    
Cyber Security
    
Digital Forensics
    
Productivity
    
Gaming
  

You can open this HTML file in a browser by opening a browser navigating to the folder where the HTML file is located, and then dragging it into your browser.

Alternatively, you can right-click the HTML file and select any browser from the drop-down list. Double-clicking the file also opens it with the default browser on your computer.

Currently, our web page is as shown below:

To describe how the elements in the above HTML file are to be displayed, we need a CSS file with all the styles for the elements. In the CSS file you created, paste the following code:

body {
  background: rgb(245,235,224);
  background: linear-gradient(90deg, rgba(245,235,224,1) 0%, rgba(227,213,202,1) 35%, rgba(212,163,115,1) 100%);
}

h1 {
  color: #fb5607;
  font-size: 40px;
}

p {
  color: #0f4c5c;
  font-size: 16px;
  font-weight: 700;
}

li {
  color: #00b4d8;
  font-weight: 400;
}

With our CSS file ready, the next step is linking it with our HTML. To link the index.html file with the style.css file, add the following line in the head section of the HTML file:

In the line above:

• : is an HTML element that is used to specify relationships between the current HTML document and an external resource, in our case a CSS file. This is the element we use to link CSS files to HTML files.
• rel=”stylesheet” – rel stands for relationship. This is an attribute added to the link element to specify the relationship between the HTML document and the item that is being linked to the HTML. In this case, it is set to “stylesheet” to specify that the linked file is a CSS file.
• href=”style.css”: is used to specify the path to the CSS file we want to our HTML file. The path is passed into href as a string. Since our CSS file is in the same folder as our HTML file, the path is simply the name of the CSS file we want to link to our HTML.

The entire HTML is shown below:

  
  



  
Geekflare
  
Geekflare is an online publication that produces high-quality articles on
    Technology, Business, and Fintech to help
    businesses and people grow.
  
Some of the topics covered by Geekflare include:
  

    
Programming
    
Cyber Security
    
Digital Forensics
    
Productivity
    
Gaming
  

Our HTML file in our browser after linking it to a CSS file is as shown below:

Best Practices for Linking CSS to HTML

Some best practices to adhere to when linking CSS to HTML include:

• Use an external stylesheet. When linking HTML to CSS as much as there are a variety of ways you can do it, the best and recommended way is by adding an external CSS file and linking it to your HTML. This way, your code will be modular,  easy to read, easy to debug, and also easy to maintain.
• Place the element in the head section of the HTML document. A common mistake is to put the element in the body of the HTML. This leads to errors and your styles won’t show on your HTML document.
• Use Relative Paths – When linking CSS to HTML, you also need to specify the location of the CSS file. For this, use relative paths instead of absolute paths to ensure your project is portable.
• Combine CSS files when used on the same page – to ensure faster loading speeds and better-performing websites, combine multiple CSS files into one file particularly if they contain styles for a single page.
• Ensure correct spelling when linking CSS to HTML. A common beginner error when linking CSS to HTML is misspelling rel=”stylesheet” and using the plural form “stylesheets”. In case you link your CSS to your HTML and notice that your styles are not showing, check and ensure your spelling is correct.

In addition to linking your CSS to your HTML correctly, ensure your CSS files have descriptive names, excellent code organization with comments, and wisely use class names and IDs. This will result in a more enjoyable development experience.

Conclusion

CSS is a crucial tool in creating aesthetic websites that are a joy to interact with and use. As a developer, knowledge of CSS will help you create better user interfaces and user experiences for your users. To use CSS in your HTML, create an external CSS file and follow the guidelines in the article to link the two files correctly.

You may also explore how to use SVG in HTML for designing stunning graphics.