[Step-by-step] How to add CSS file to HTML | Source Code Example

Shape Image One

[Step-by-step] How to add CSS file to HTML | Source Code Example

In an earlier  tutorial, we have seen writing your first HTML program. In this tuturoal, we will see how you can add CSS file to HTML code.

Let’s start with the beginning.

What is CSS?

CSS (Cascading Style Sheet) is the file format.

This file describes how the HTML content should be displayed on the screen.

With this file, you can format the content of the HTML file like changing the color of the text, increasing/decreasing font size, alignment of any HTML element…

All the text formatting you can write in CSS file and then you can add that CSS file in multiple HTML file.

Writing Your First CSS File

First of all, you have to write your own CSS file. If you already have a style sheet (CSS file), you can skip this step

  • Open the notepad or any text file editor.
  • Write a simple CSS code. (You can find the example of the CSS code in next section.)
  • Save the file with extension CSS (.css).

After that you have to add that CSS file into the HTML code.

Embed / Add CSS file to HTML

To add CSS to your HTML file you have to use “link” tag. It is used to link other files to the HTML file.

Link tag make the link between HTML and other exteternal documents.

Add this single line script code inside head tag of your HTML file.

<link rel="stylesheet" href="mystyle.css">

Note: Make sure you have saved your CSS file in the same directory where your HTML file is located.

Here we are using two attributes “rel” and “href”

rel: It defines the type of relationship between HTML and another external file.

href: It is used to specify the location of the external file.

HTML and CSS Example

Write below code in your CSS file (mystyle.css) and save it.

p {
  font-size: 150%;
  color: green;
}

Here we are applying CSS code on our HTML “p” tag. Similar;y you can apply CSS to any other HTML tags.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>

<p>I'm very enthusiastic to learn web development!</p>

</body>
</html>

Write this in your HTML file (.html) and save it.

Now open the HTML file in your browser.

You can see the font size of the text inside “p” tag has increased by 150%. The text of the color has become green.

Advantages of CSS

There are multiple advantages to using CSS.

  • You just need to create one CSS file to format as many HTML file content.
  • Using same CSS file for multiple HTML files, improve the reusability.
  • It is efficient to maintain all the CSS code in a single file.
  • CSS improves your website loading time as there is a single file for all CSS code.
  • Embedding single style sheet in all the web pages of your website improves the consistency. Every page on your website will be seen with a single format.

There are many benefits of writing CSS file and it has become standard now.

This is a simple explanation add CSS file to HTML. If you have any doubt, write in the comment.

Aniruddha Chaudhari

Aniruddha Chaudhari

I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on <b>CSEstack.org</b> portal.

4 Comments

  2. It’s so easy to understand, thank you so much! I’m learning HTML to create my portfolio website template.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *