How To Link CSS To HTML | Step By Step

Published on: October 8, 2016 Filed under: CSS, Web Design
how to link css to html

There are three ways to link css to html.
You can watch the video 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.

Tagged in


Leave a Reply

Your email address will not be published. Required fields are marked *