How to add stylesheet in HTML or write CSS within HTML

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:

HTML and CSS files in the same directory

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:

	section {
		text-align: center;
		padding: 90px 15px;
	img {
		border: 10px solid #DEE1E6;
	a {
		color: blue;

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>

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.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview


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.