How to add stylesheet in HTML or write CSS within HTML

Linking external stylesheet or CSS file

<link rel="stylesheet" type="text/css" href="style.css">

If your HTML file and the stylesheet live in the same directory. And 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

Writing CSS in HTML file

You can also write CSS within the <style> tag (in your HTML file). See the example below:

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

Writing inline CSS in 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>
</section>

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).