How To Link CSS To HTML | Step By Step

There are three ways to link css to html: inline, internal and external stylesheets.

Here is the video you can watch to better see how the different stylesheets are implemented or continue reading for a detailed explanation.

See more amazing CSS videos in youtube: Garnatti one

1. Inline

Use inline style if you want to add a style uniquely to an element. Just add style attribute to the chosen element/tag and then add the style attribute and value.
Example:

<h1 style=”font-family:arial; color:red”>Hello World !</h1>

2. Internal

If you want your css to be within the same page as your webpage then internal css stylesheet is for you. Inside the head section add an opening and closing style tag. In the opening style element, add type attribute equals to ”text/css” .

<style type=”text/css”> </style>

Between your opening and closing style tags add desired styling attribute by targeting elements.

Example:

<style type=”text/css”> h1{
	font-family: ‘arial’;
	color: red;
} </style>

3. External

If you want your files to be organized then use external css stylesheet. Create a css file and save(the same level with the html file).

Name your css file whatever you want I name mine as style.css. Inside in your head section in html add a link tag to link our css file.

Example:

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

We can now add styles inside our style.css file just like the internal css styles above but without the open and closing style tags.