CSS Tutorial Series

CSS tutorial : How to insert

Pug tutorial series pugjs tutorial introduction

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>