Web development

How to add CSS to HTML?

Adding CSS into HTML can be confusing because there are 3 different ways to do it.

a) external CSS 
b) internal CSS
c) inline CSS

CSS Step by step

a) External CSS

This technique allows you to define a style sheet as a separate document and import it into your website. With an external style sheet, you can change a look of an entire web page by changing just one file.

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the <head> section.

Example and output:

CSS basics

Here is how the “mystyle.css” file looks like:

CSS basics

An external style sheet can be written in any text editor and must be saved with a .css extension. The external style sheet file should not contain any HTML tags.

b) Internal CSS

An internal style sheet holds CSS rules for the web page in the <head> section of the HTML document. An internal style sheet can be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the <head> section.


<!DOCTYPE html>
body {
  background-color: pink;

h1 {
  color: green;
  margin-left: 35px;

<h1>Heading- Internal style sheet.</h1>
<p>Paragraph- Internal style sheet.</p>



How to add CSS to HTML?

c) Inline styles

Inline-styles are related to a specific HTML tag, using a style attribute with a CSS rule to style specific page elements. They are useful for quick, permanent changes.

Example and output:

How to add CSS to HTML?

Enjoy coding!

Read also:

CSS Basics

CSS Advanced