Quick Guide: How to Add External CSS to HTML

Adding inline or internal CSS is easy. Just add <style> tag below head and start writing your CSS code.

Also Check: How to Creating Pure CSS Drop Down Menu

But it’s always recommended to use external stylesheet as it keepsmain HTML file smaller in size that eventually helps loading faster. In this tutorial, we are showing you how to add external CSS to HTML.

Steps to add external CSS to HTML

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available in any Windows PC. Open notepad and type the following code:

<html>
<head>
<title>First CSS tutorial</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<p>Type or copy paste some text here….Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Ipsum.</p>
</body>
</html>

And then save the file as .html (eg: first.html).
Here,

<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.

2. Next, create new css file named as style.css and save in the new folder named css inside the same folder. To create new css file, open notepad and save it as style.css

3. Next, open the file style.css and type your css code:

p{
width:500px;
text-align:justify;
margin:5px;
}

And then save the file. Make sure it is saved as .css
Here we are adding css property to the paragraph we have created in html file.

Width will set the width of paragraph to 500px.
text-align:justify will justify the paragraph and margin:5px will add 5px margin to all side – top, bottom, left, right

4. Finally, open the html file we have created and you will see the css applied to your html file. This completes our tutorial on how to add external CSS to HTML file.

Web Redesign Idea

Quick Guide: How to Add External CSS to HTML