Methods to Include CSS into HTML

There are three ways to include CSS into HTML documents :

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

1. Inline CSS : 

With Inline CSS we can define style sheet rules directly along-with the HTML elements using style attribute. Inline CSS is used to apply CSS on a single line or element. All most every HTML element support style attribute. Inline stylesheet has high priority as compared to other two methods. The example of Inline CSS is :
<!DOCTYPE>
<html>
  <body>
    <h3 style="text-align: center; color: blue">Descendant Selector</h3>
    <p style="text-align: center;color: red;"><b>Hello world this is Bold text.</b></p>
    <p>This is Another test paragraph</p>
</body>
</html>
Output :

Descendant Selector

Hello world this is Bold text.
This is Another test paragraph


2. Internal CSS :

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is defined in <head>....</head>. section of the HTML page inside the <style>....</style> tag. Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      h3 {
        text-align: center;
        color: blue;
      }
      p {
        text-align: center;
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>Descendant Selector</h3>
    <p><b>Hello world this is Bold text.</b></p>
    <p>This is Another test paragraph</p>
  </body>
</html>
Output

Descendant Selector

Hello world this is Bold text.
This is Another test paragraph


3. External CSS :

The External CSS is used to apply CSS on multiple pages. The <link> element is used to include an external stylesheet file in HTML documents. The external style sheet is defined in separate file with .css extension. The external CSS gives the control to change formatting and layout every single elements in several web pages or only those web page who are linked with external CSS document. The example of external CSS file is given below :

style.css
h3 {
  text-align: center;
  color: blue;
}
p {
  text-align: center;
  color: red;
}
To include an external CSS file into a web page, the <link> tag is used. Now to include above css file style.css to an html document :
 <link rel="stylesheet" type="text/css" href="style.css">  
The Attributes of <link> are :

rel : The rel must be set to "stylesheet" for linking style sheets.

type : The type attribute specifies the style sheet language as a content-type (MIME type) and it must be set to "text/css" for linking to cascading style sheets.

href : The href attribute specifies the style sheet file having Style rules. This attribute is a required.

Example :
<!DOCTYPE>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">  
  </head>
  <body>
    <h3>Descendant Selector</h3>
    <p><b>Hello world this is Bold text.</b></p>
    <p>This is Another test paragraph</p>
  </body>
</html>


Descendant Selector

Hello world this is Bold text.
This is Another test paragraph


Next Topic :

No comments:

Post a Comment