What is the basic process to attached a CSS file to the web page?

A

Amit Verma

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

0 votes

Your Answer

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

LifeStyle & Fun

© 2024 GDATAMART.COM (All Rights Reserved)