How to connect CSS to HTML

World of Dev
2 min readMar 2, 2022

--

How to connect CSS to HTML

As a beginner, I was intimidated to start with CSS as quickly as I did. I had only just started with HTML, and it felt like it was too soon to start my second language. But it’s never too early. The reality is that if you learn styling in HTML, the syntax is the same. The only difference is how you format the actual code, which is why you can learn two programming languages at the same time.

How to connect CSS to HTML is relatively simple. All you need to do is add a <link> tag in the head section of your HTML file and add the location of your CSS file with a rel attribute of “stylesheet”.

Table Of Contents

  1. Basic HTML Document Structure
  2. How to connect CSS to HTML
  3. Why use CSS and not inline HTML styling
  4. Conclusion

Basic HTML Document Structure

If you know your Basic HTML Document Structure, you know that your document contains a <head> tag, and various metadata should be included in the <head> tag. One of the items to include in your head tag is the connection to your CSS file.

The first thing you need to do is include a <link> tag in your <head> tag.

How to connect CSS to HTML

The <link> establishes the connection between the current HTML document and the resource it refers to.

Using the <link> tab to connect to your CSS style sheet is how you get your styling into your HTML document without doing it inline.

Get the full coding example of how to connect your CSS to HTML here.

--

--

World of Dev

Me documenting my journey to become a full-stack web developer in the hope that I can help other people who are on or thinking about taking this journey!