Welcome to the wonderful world of coding! In this blog post, we’ll be discussing how to connect your CSS file to your HTML file. This is an important step in creating a web page, and if you’re just starting out, it’s a good idea to get comfortable with this process. So let’s get started!
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”.
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.
Ways to connect CSS to HTML
There are a few ways to connect a CSS stylesheet to an HTML document. This article will show you the most common methods and explain how I suggest beginners connect CSS to HTML files.
The first way to connect CSS to HTML is by using the <link> element, which is placed in the <head> section of your HTML document. This method is most commonly used when you want to load an external CSS file. This is the method that we will give code examples for below, as it is one of the easiest ways for beginners to connect CSS to HTML.
The second way to connect CSS to HTML is by using the <style> element, which is placed in the <head> section of your HTML document. This method is most commonly used when you want to include a small amount of CSS code in line with your HTML code. I don’t recommend this method as this is effectively mixing content with design. I have written a detailed article on the 6 reasons you shouldn’t style inline in your HTML that you can read if you are interested in understanding why this is not recommended in more detail
The third way to connect CSS to HTML is by using the <script> element, which is placed in the <head> or <body> section of your HTML document. This method is most commonly used when you want to include a CSS file as a JavaScript resource.
Each of these methods has its advantages and disadvantages, so you’ll need to decide which one is best for your project.
As mentioned above, I recommend the first method for beginners who are learning how to connect CSS to HTML files.
Let us dive into the more technical elements and go through some code examples on how to connect a CSS stylesheet to HTML.
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.
Here is an example of the <link> tag being used to connect a CSS document that is in the same folder as the HTML file.
<!DOCTYPE html>
<head>
<title>How to use the head tag in HTML and what to include</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
The above code connects the current HTML document to the styles.css file.
The <link> tag has various attributes that can be added to it, but the href and rel attributes are the two you will use most as a beginner
The href attribute identifies the location of the linked resource. If your CSS file is in the same folder location as your HTML file, you only need to include the file name. If your CSS file is in a different folder, you need to include the path to the file and the file name.
The rel attribute identifies the relationship between the current document and the linked resource.
So in the above code, the href tells the browser that the file is in the same folder and named “styles.css”, while the rel attribute tells the browser that “styles.css” is a stylesheet.
Why use CSS and not inline HTML styling
I have already written a full article on the 6 reasons you shouldn’t style inline in your HTML document, but here are the top three reasons we don’t recommend it.
Inline styles can make your page slower
Inline styles increase the size of your pages, which ultimately makes your site slower. If you want each paragraph on your site to look the same, you can do it once in the stylesheet, costing you maybe 10 lines of code. However, if you use inline styles, you’ll have to include them in every paragraph. So if your site is going to have more than 10 paragraphs, inline styling would result in more lines of code, which will result in a slower site.
Maintenance is more complex
While it can be tough to figure out where a style is when dealing with stylesheets, there are even more places to look for with a combination of inline and external styles. Inline styles create a nightmare for projects with a team and can even have you running circles around yourself trying to figure out where you hide the style on a website you coded months ago.
Once you find it more than just finding the style, you’ll have to alter the style on every element on every page where it’s been put after you’ve found it and changed it. This dramatically increases the cost of website maintenance.
Inline CSS cant be reused
You can apply a specific styling with stylesheets based on a selector name. That is not the case with inline styling, as it is often wrapped around unique content, making it difficult to copy and paste.
Conclusion
While it may seem easier in the short term to make a “quick inline fix”, these quick fixes can add up, and when they do, you will regret not taking the time to create a separate stylesheet to make your life as a developer much easier. After all, it is only one additional line of code in your HTML file.
Click Here to signup for our Discord – we can’t wait to meet you!
