CSS Tutorial Series

CSS tutorial : How to insert

Inside this article!

  1. Include CSS
  2. External CSS
  3. Internal CSS
  4. Inline CSS
CSS

How to Include CSS

We have 3 ways to insert CSS into the HTML document :

  1. External CSS
  2. Internal CSS
  3. Inline CSS

External CSS

In external css, we can just include a single file to implement all the styles on our webpage. We use <link> tag for including external CSS which comes inside <head> tag of HTML as shown in example below : 

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

and our styles.css file will look something like : 
										
p {	
    color: gray;
}

Internal CSS

In internal css, we write the styles to be implemented in the head of the HTML file. We use <style> tag for writing internal css which comes inside <head> tag of HTML as shown in example below : 

										
<head>
	<style>
		p {	
			color: gray;
		}
	</style>
</head>

Inline CSS

In inline css, we write the styles to be implemented in the body of the HTML file in the same element as attribute. We use <style> tag as attribute for writing inline css which comes inside <body> tag of HTML as shown in example below : 

										
<body>
	<p; style="color:gray;">Content Comes here </p>
</body>