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!

Three Ways to Add CSS in HTML Pages

Design a Web Page Using HTML & CSS

Learn HTML(Hypertext Markup Language) programming language by creating a web page or writing a simple paragraph or an essay or an article, etc. All we need to use is HTML elements and a text editor.
This post is for absolute beginners. Even if you don't know how to write code, it won't be a problem. All you need is patience.
Remember, the computer is not a human or a magician. You have to tell it what to do, where to start, where to end, what is the text for that you typed right now, I mean everything.
<h2>How to write HTML code</h2>
To write HTML code for the first time I recommend you use your default text editors like Notepad(Windows) or TextEdit(Mac) or Text Editor(Ubuntu).
Now open up your text editor and paste the code from below. Don't get bored just by watching the code, I will try my best to explain what those are.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>This is the Headline of the paragraph&#x3C;/h1>

 &#x3C;p>Here goes the whole description of the paragraph&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Next, You have to save the file to your computer.
For Notepad got to File > Save as or for Text Editor just click on Save, It will popup an explorer window to select where to save your file.
Select any folder where you want to save, name that file index.html with "UTF-8" encoding selected option and click on Save.
Now open the file in your internet browser by double-clicking on it or drag and drop the file on your browser. You will see something like below:
<img src="/images/open-html-file-in-browser.png" alt="HTML File Preview In Browser">
We learned how to create an HTML file and preview it on the browser. Now it's time to explain what the code was. Let's start one by one.
<h2>What is doctype in HTML?</h2>
We used <code>&#x3C;!DOCTYPE html></code> at the very beginning of the code. It's not related to the paragraph you wrote. It just tells the browser that this is an HTML file and the browser preview the file as HTML.
Also DOCTYPE is not case sensitive. You can use <code>&#x3C;!Doctype></code> or <code>&#x3C;!doctype></code> etc.
<h2><code>&#x3C;html></code> tag in HTML</h2>
The <code>&#x3C;html></code> tag contains all the HTML tags we write in HTML.
If you look at the code you will see every tag like <code>&#x3C;body></code>, <code>&#x3C;p></code> are in the middle of the <code>&#x3C;html>...&#x3C;/html></code> tag. This is where we will write our all HTML code.
<h2>Why every HTML tag has a duplicate tag with a slash('/') in the end?</h2>
When you write an article, you know this is the end of my article headline, after that, You will write the description of that paragraph.
But the computer doesn't know that this should be the end. You have to tell it to stop recognizing as heading after the word of your article headline with the end tag.
The end tag starts with a slash("/") to represent the end of the tag. For example <code>&#x3C;html></code> has an end tag like <code>&#x3C;/html></code>.
<h2>Body tag in HTML</h2>
<code>&#x3C;body></code> tag contains all elements of the document's body like your body contains your eyes, hair, hands, etc.
You might be wondering then what is the use of the <code>&#x3C;html></code> tag if the body contains all the elements. <code>&#x3C;html></code> contains the head tag(i.e., CSS stylesheets, Metadata, etc.) like the brain in your head.
<h2>What is the meaning of nested elements in HTML?</h2>
By nested we mean is to put a piece of information, text, etc. inside another.
If you look at the code you will see the <code>&#x3C;body></code> tag is stored inside the <code>&#x3C;html></code> tag.
So you can call the <code>&#x3C;body></code> element is a nested element. You can also call the <code>&#x3C;html></code> element as a container.
<h2>What is h1, h2, h3, h4, h5, h6 in HTML?</h2>
Those are called HTML Headings like titles or headlines or sub-headlines of a paragraph or article.
<code>h1</code> is the bigger and the important one, <code>h2</code> is less big and important than <code>h1</code> which we use after <code>h1</code>. <code>h6</code> is the last and the smallest one. Most of the time, They play the role of subtitles under the <code>&#x3C;h1></code> tag.
Let's change the code with different headings like the code below and save.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>This is Heading One&#x3C;/h1>
 &#x3C;h2>This is Heading Two&#x3C;/h2>
 &#x3C;h3>This is Heading Three&#x3C;/h3>
 &#x3C;h4>This is Heading Four&#x3C;/h4>
 &#x3C;h5>This is Heading Five&#x3C;/h5>
 &#x3C;h6>This is Heading Six&#x3C;/h6>

 &#x3C;p>Here goes the whole description of the paragraph&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Click on the refresh button on your browser, see if it's like the screenshot below.
<img src="/images/Html-Headings-example.png" alt="HTML Heading Example">
<h2>Paragraph(<code>&#x3C;p></code>) tag in HTML</h2>
<code>&#x3C;p></code> tag defines a paragraph like the description of a paragraph after the headline. It displays normal plain text in the browser as you saw in the screenshots.
Now, what if you want to add another paragraph after a paragraph to make a new line. Well, all you have to do is add another <code>&#x3C;p></code> tag. It will add a new line.
Update your code like below and save the file. Always remember one thing that whenever you change or update your code you have to hit Save and click the refresh button on your browser to see changes. Because the browser doesn't know that you have edited your file.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>Title of the Paragraph&#x3C;/h1>

 &#x3C;p>
 Magnis eleifend aenean condimentum est sodales purus sagittis duis
 parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
 convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
 odio fringilla lacinia urna phasellus ornare, ultricies condimentum
 praesent luctus pretium convallis placerat tempor. Id vivamus vitae
 lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
 integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
 cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
 convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
 habitant gravida, metus etiam eu blandit potenti primis vehicula, molestie
 nascetur duis bibendum commodo. Pretium ut turpis id bibendum magnis ad
 iaculis leo, tempus facilisi fringilla varius velit inceptos vel est,
 himenaeos urna a lacinia conubia quisque nulla. Ante parturient commodo
 nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum quis ad
 pellentesque porttitor scelerisque, sociosqu ultrices nam at hac molestie
 dapibus.
 &#x3C;/p>

 &#x3C;p>
 Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
 consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
 quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
 lectus sodales venenatis nunc molestie iaculis mus dignissim aenean mauris
 magnis mi feugiat. Posuere odio per aenean torquent litora feugiat potenti
 duis mollis eu, metus condimentum ut taciti vestibulum non mauris
 malesuada a facilisi, tellus tempus vivamus mattis nostra nullam turpis
 euismod pretium.
 &#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
I added some random text as an example. Try to change the text or add a new <code>&#x3C;p></code> tag to practice HTML.
<img src="/images/Final-Paragraph.png" alt="Final Paragraph">
<h2>How to change the text of the browser tab name or title?</h2>
Right now, in the browser tab name, your file name is displaying. But what if you want to display your article headline or add a document title. Let's do that.
We will have to use <code>&#x3C;head></code> tag like we were using <code>&#x3C;body></code> tag. Unlike <code>&#x3C;body></code> tag the <code>&#x3C;head></code> tag contains document's <code>&#x3C;title></code>, <code>&#x3C;meta></code> tags etc.
<code>&#x3C;title></code> tag represents the title of the document. So, We are going to use the <code>&#x3C;title></code> tag.
Add the <code>&#x3C;title></code> tag in your code like the code below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Here goes the title of the document&#x3C;/title>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;h1>Title of the Paragraph&#x3C;/h1>

 &#x3C;p>...&#x3C;/p>

 &#x3C;p>...&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
<img src="/images/document-title-html.png" alt="document title html">
<h2>Conclusion</h2>
Try changing or adding new text, HTML tags to practice and learn more.
What I talked about HTML in this whole post was very basic of HTML. You will have to gradually learn other HTML elements one by one and how to group them and where should you use it or not things like that.
The complete HTML file can be found <a href="https://github.com/MejanH/web-design-html-css-tutorial/blob/web-page-with-html/index.html">here</a>.
Good Luck!
Related Article: <a href="https://alhaqi.com/blog/design-web-page-using-html-and-css">Design your HTML Web Page like other websites you see on the inernet</a>

#html