When we create a web page with lots of content and design, our code becomes long and it gets hard to find the source code of individual sections. So, it will be helpful if you split the HTML and CSS code into different files.
Also sometimes if our web page doesn’t have much content it will become extra work to add CSS into another file and import it. In that case, we can add CSS styles at the beginning of our page or if we don’t have to apply many CSS styles to HTML tags we can also add CSS code with HTML elements.
So, How many ways can we add CSS to HTML?
Three. internal, external, and inline style. This means importing CSS stylesheet files or adding CSS code at the beginning of the HTML or with HTML elements.
Let me show you these methods with examples.
If for some reason you don't understand any part of this post you can read the completed code in my <a href="https://github.com/MejanH/three-ways-css-to-html">Github Repository</a>.
<h2>How to Include CSS in HTML With Embedded or Internal Method</h2>
Both internal and external CSS methods are similar. Because they work within the <code>&#x3C;head></code> section. The only difference is your CSS code is on the same file or an external file.
So, for internal CSS we will write our CSS code within the <code>&#x3C;style></code> element like the code below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Three Ways CSS to HTML&#x3C;/title>
 &#x3C;style>
 body {
 font-family: sans-serif;
 }
 .container {
 width: fit-content;
 margin: 200px auto;
 }
 &#x3C;/style>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;div class="container">
 &#x3C;h1>Three Methods to Add CSS into HTML&#x3C;/h1>

 &#x3C;ul>
 &#x3C;li>Internal CSS&#x3C;/li>
 &#x3C;li>Inline CSS&#x3C;/li>
 &#x3C;li>External CSS&#x3C;/li>
 &#x3C;/ul>
 &#x3C;/div>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
As you can see, we have applied some CSS styles using the internal CSS method.
In this example above, we changed the default font style of the <code>&#x3C;body></code> tag, and with the <code>width: fit-content;</code> declaration, we removed the extra whitespace. Because by default an element takes the whole width of the content area. Also with the <code>margin: 200px auto;</code> declaration, we set the top and bottom margin to <code>200px</code> and left and right margin to <code>auto</code> which made the element center horizontally.
<h2>How to Add Inline CSS to HTML</h2>
Instead of adding CSS styles to selectors from the <code>&#x3C;style></code> tag, you can add your code directly with your HTML tags.
This method has some benefits. You don’t have to call selectors(i.e., <code>h1</code>, <code>p</code>) to change the design of an element. Also, the CSS code will be added with an HTML tag so you can tell by looking at the element that these are the changes I applied for this element.
To use Inline CSS, you have to use the <code>style</code> attribute and add the code inside the quotation mark like the <code>class</code> attribute.
Now, what is an HTML attribute?
HTML attributes provide additional information about elements. For example, you want to give a unique name to your HTML elements, you use <code>class</code> or <code>id</code> attributes.
Check out the changed <code>body</code> tag with the previous example below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 ....
 &#x3C;/head>
 &#x3C;body style="font-size: large">
 &#x3C;div class="container">....&#x3C;/div>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
We used the <code>font-size</code> property to change the default font size and added value <code>large</code> which means we set the font size to large from normal.
If you want to add multiple declarations just separate them with a semicolon like normal CSS.
<h2>How to Use External CSS Stylesheet in HTML</h2>
The meaning of the headline is basically how to put your CSS code in an external file and import that file into your HTML to design your web page.
But, some questions emerge here: How can the HTML know that file contains CSS code? and Where is the CSS file located?
The answer is HTML <code>&#x3C;link></code> tag. It defines relationships between your current document and an external resource. This tag is most commonly used to import stylesheets. It has some attributes to use in different cases like <code>href</code>, <code>rel</code>, etc.
Back to the questions, How can we import the CSS file? We will use the location of the CSS file with the <code>href</code> attribute. How can we know that we are importing a CSS file? We will use the <code>rel</code> attribute to tell that we are importing stylesheets.
The <code>href</code>(Hypertext REFerence) attribute defines the location or URL of the external resource and the <code>rel</code> attribute defines the relationship between the document and an external file.
Let’s create a file called <code>styles.css</code> file in the same directory you created your HTML file. Remember to put <code>.css</code> at the end of your file name.
Now, move the CSS code from the <code>style</code> element of the <code>&#x3C;head></code> section to your <code>styles.css</code> and save it. Right now, there should not be any CSS code on your <code>head</code> section because we moved those to our external file. So, you can also delete the <code>&#x3C;style>&#x3C;/style></code> tags.
Finally, import the CSS file like the code below. Remember your file name should be correct.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Three Ways CSS to HTML&#x3C;/title>
 &#x3C;link rel="stylesheet" href="styles.css" />
 &#x3C;/head>
 &#x3C;body style="font-size: large">
 &#x3C;div class="container">
 &#x3C;h1>Three Methods to Add CSS into HTML&#x3C;/h1>

 &#x3C;ul>
 &#x3C;li>Internal CSS&#x3C;/li>
 &#x3C;li>Inline CSS&#x3C;/li>
 &#x3C;li>External CSS&#x3C;/li>
 &#x3C;/ul>
 &#x3C;/div>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Now, refresh your browser to see if your CSS styles are still working or not.
Let’s also add some new styles to test our final method.
<pre><code class="language-css">body {
 font-family: sans-serif;
 background-color: salmon;
 color: white;
}
.container {
 width: fit-content;
 margin: 200px auto;
}
</code></pre>
We changed the background color of the <code>&#x3C;body></code> tag to <code>steelblue</code> and font color to <code>white</code> with the <code>color</code> property.
<img src="/images/external-css-method.png" alt="After adding all CSS methods">
Yay, it’s working. Again if you got stuck following any part of this post visit the Github repository mentioned at the beginning.
From these three methods, the external method is the most popular one. Because it keeps your code clean and well structured.
You can also put your CSS file into a folder. These will be helpful when you will have multiple CSS files. And as for the <code>href</code> attribute on <code>&#x3C;link></code> tag, you need to specify your file location with your folder name like <code>./yourfoldername/styles.css.</code>
I think this is enough for you to learn about including or applying CSS styles to your web page. It’s time to learn about more HTML tags and CSS properties which will make your web page stunning.
Good Luck!

#frontend