If you want to build amazing webpages that engage your visitors and keep them on your website for more than fifteen seconds, you’ll need to use HTML and CSS. In this beginner’s guide, we’ll walk you through everything you need to know.
Monsterhost has lots of helpful beginner’s guides, and we like to start with the basics. So, let’s start with the most important thing you need to know before you learn how to link CSS to HTML:
Table of Contents
What’s HTML?
HTML (the Hypertext Markup Language) is the language that gives your webpages structure. You use HTML for things like these:
- Designing forms, like the ones your visitors will use to order your products or book your services
- Adding spreadsheets and videos to your webpage
- Arranging your information using tables, bullet points, pictures, headings, etc.
What is CSS?
HTML gives your webpages structure, but CSS (Cascading Style Sheets) gives your webpages style. This is the language that lets you do things like these:
- Changing the colors and fonts on your webpages
- Changing your layout
- Adapting your webpages to different screen sizes
Why do people separate HTML from CSS?
Style and structure work together to create beautiful webpages, but it’s easier to focus on only one of these elements at a time. This makes it easier to manage multiple websites, because you can create webpages with a similar structure, share them across websites, and then adjust the style of the webpage to suit whichever website you’re publishing on. But even if you’re using HTML separately from CSS, at some point, you’ll need to know how to link CSS to HTML.
Why link CSS to HTML
Usually, most people add CSS to HTML by embedding CSS rules to each HTML file. But this takes a lot of time and energy. Also, it inflates your code when you have to keep adding the same CSS rules over and over, and the changes you make to one file won’t carry over to your other files.
When you put the CSS styles into a single .css file and link it to your HTML files, you can use one CSS file to style many HTML pages.
Here are the pros and cons of linking CSS instead of embedding it:
Pros and cons of knowing how to link CSS to HTML
Let’s start with the pros:
1. It saves time
Because you need to create only one CSS file, knowing how to link CSS to HTML makes you much more efficient at creating webpages.
2. Your webpages will load more quickly
Source: Giphy
If you’ve ever noticed that your website runs a bit slowly, you could try linking CSS to your HTML files instead of embedding the style rules. When you do this, your website caches the CSS file, so it will load more quickly the next time your visitors come to your website. If your website is still running slowly after this, you could try switching to VPS hosting. This will not only make your website load more quickly, but it will be more secure, too.
3. You’ll get more visitors.
When you store your CSS styles in a separate file from your HTML file, search engines will have an easier time reading your HTML file. This will make them rank your website higher in search results, which increases your web traffic!
As for the cons:
To be honest, there are very few cons to linking CSS to HTML. But if your website doesn’t have enough styling conditions to justify having an external CSS, you might actually spend more time doing this than if you just embedded the style rules into your HTML.
Now that you know the pros and cons of linking CSS to HTML, here’s how you do it:
A 2-step guide on how to link CSS to HTML
1. Use the <link> tag that you put in the HTML’s <head> section.
The link looks like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
Here’s a crash course on all the attributes in the link:
- rel: This defines the relationship between the file that hosts this command and the file you’ll define when you get to the “href” attribute. The “stylesheet” just means that the standard value for the “rel” attribute is stylesheet.
- type: This defines the content of the file you’re linking. In this code, the attribute’s value is set to “text/css”.
- href: This defines the location of the CSS file you’re trying to link to the HTML file. If the CSS file is in the same directory as the HTML file, you can just enter the file name. But if your CSS file is in a separate place from your HTML file, you’ll have to include the folder name as well. For example: CSSFile/stylesheet.css.
- media: This defines the type of media the CSS rules are optimized for. “Screen” in this code means the rules are optimized for computer screens. If you wanted to optimize the rules for the printed page, you’d use the value “print” instead.
2. Save the changes to your HTML file.
Once you’ve modified the values in the code, all you’ll have to do is save the changes and enter your website’s URL in the browser. Your webpages should now adapt to match the style written in the CSS file.
And that’s it! Follow these two simple steps and you won’t need to write repetitive CSS rules in every single HTML file you create.
Wrapping up
There are lots of ways to link CSS to HTML, but the best way is to create a separate CSS file and use the HTML’s <link> tag whenever you want to include the stylesheet. This saves time, makes your website load more quickly, and improves your SEO!
