Tute

types of css?

types_of_css

There are the following three types of CSS:

  • Inline CSS.
  • Internal CSS.
  • External CSS.

Inline CSS

We can apply and use CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. 

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

  1.    Example:

 <h1 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h1>             <p>This paragraph is not affected.</p>  

Output:

Inline CSS is applied on this heading.

This paragraph is not affected.


Disadvantages of Inline CSS

  1. You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
  2. These styles cannot be reused anywhere else.
  3. These styles are tough to be edited because they are not stored at a single place.
  4. It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
  5. Inline CSS does not provide browser cache advantages.

 Example Of Inline CSS

<!doctype html>

 

 

hello world

this is paragraph tag

 

 

out put

hello world

this is paragraph tag

Internal CSS

  • The internal style sheet is used to add a unique style for a single document. It is defined insection of the HTML page inside the tag.
  • In internal CSS the style of CSS is specified in thesection. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that, we can use the style in the head tag.

Example Of Internal CSS

      1. >  
      2. <html>  
      3. <head>  
      4. <style>  
      5.  
     
    1.  
    2. h1 { 
    3.      background-color: black;   
    4.     color: white;    
    5.     }   
    6. </style>  
    7. </head>  
    8. <body>  
    9. <h1>The internal style sheet is used on this heading.</h1>  
    10. <p>No styling applied on paragraph tag</p>  
    11. </body>  
    12. </html>    

        Out put

The internal style sheet is used on this heading. 

 No styling applied on paragraph tag

 

External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

It uses the

tag on every pages and the

tag should be put inside the head section.

Example:

Filename: index.html

  1.  
  2. <head>  
  3. <link rel="stylesheet" type="text/css" href="style.css">  
  4. </head> 
  5.  
  6. this is heading tag

  7.  
  8.  

The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not contain HTML elements.

File: style.css

  1. h1 { 
  2.     background-color: blue;   
  3.     color: red; 
  4. }   
  • Out put

    this is heading tag

  • Generally, external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file.
  • In External CSS we create a .css file and use it in our HTML page as per our requirements.
  • There are two ways to create a CSS file.
  • The first is to write the CSS code in Notepad and save it as a .css file, the second one is to directly add the style sheet in our Solution Explorer and direct Visual Studio to use it on our HTML page.

How to create and use an External CSS.

  1. Add a style sheet.
  2. Write your CSS code and save it.
  3. Open your HTML page and drag down the style sheet.
  4. Save and RUN.

Related Topics