Actually, it's very easy to attach a CSS file to the web page but before to understand this process, we must know the type of CSS.
There are three types of CSS.
- Inline CSS
- In-Page CSS
- External CSS
Here I'm going to list how we can attach each type of CSS in a web page.
1 - Inline CSS
This type of CSS attached in tag itself, see below example
<p style="font-size:17px;color:blue;text-align:center">Hello this is inline CSS style attachment </p>
2 - In-Page CSS
This type of CSS attached in page's head sections, see below example
<html>
<head>
<style>
.heading_h3 {
color:#202020;
padding:7px 12px;
}
p{
font-size:15px;
color:#fcfcfc;
}
</style>
</head>
<body>
<h3 class="heading_h3">Example</h3>
<p>This is paragraph tag, we are applying css in this tag using head section of the page</p>
</body>
</html>
3 - External CSS
This type of CSS written in an external file, and attached in head section of web page, we pass file path in link tag's href attribute see below example
<html>
<head>
<link href="file_path_here" rel="stylesheet" />
</head>
<body>
<h3 class="heading_h3">Example</h3>
<p>This is paragraph tag, we are applying CSS in this tag using the head section of the page</p>
</body>
</html>
Note - href path can be the complete path or relative path
Complete path example - http://www.gdatamart.com/mypagestyle.css
Relative path example - css/mypagestyle.css