This post will show you how to connect your stylesheet to an HTML file. Also, you’ll learn different approaches to writing CSS. For example, inline, embed & external CSS.
It means there are three ways to write CSS for your HTML documents. Here you’ll learn all of them.
Let’s get started.
Linking external stylesheet or CSS to your HTML file
<link rel="stylesheet" type="text/css" href="style.css">The above line will work if your HTML file and the stylesheet live in the same directory. Assuming that the name of your stylesheet or the CSS file is “style.css” See the screenshot below:
And the above line of HTML (<link> tag) will go inside anywhere in between the <head> tag.
If your style.css lives inside a folder named “assets,” then the path will be as follows:
<link rel="stylesheet" type="text/css" href="./assets/style.css">Writing CSS in HTML file (embed)
You can also write CSS within the <style> tag (in your HTML file). See the example below:
<style>
section {
text-align: center;
padding: 90px 15px;
}
img {
border: 10px solid #DEE1E6;
}
a {
color: blue;
}
</style>Writing inline CSS inside HTML tag
In any HTML tag, you can write inline CSS. See the syntax and example below:
<section style="padding: 60px 15px; background: #C7CBD1; color: #222222;">
<h2 style="text-transform: uppercase; font-weight: 700;">This is an example heading</h2>
<p style="font-style: italic;">Lorem ipsum consectetur adipisicing eliteiusmod tempor.</p>
</section>Now you may think about which approach is the best among these three. In most cases and especially for large projects, external CSS files are the best option. It helps to better organize your CSS files.
But if you are working on AMP projects, then you must have to write either inline CSS or within a (<amp-custom>) tag. Or you can use both but you can’t use/link external CSS files.
Aside from the AMP project, you can link any/all your external CSS files or stylesheets in your HTML file. And at the same time, you can also use two other methods (inline & <style> tag).
| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
Build HTML CSS projects
Conclusion
Now you know how to connect a stylesheet to an HTML file. You also learned two other ways to write CSS.
Writing CSS to an external file is the best way. However, you should know all three methods because they have different use cases based on situations.
