Types of CSS | External CSS | Internal CSS | Inline CSS | Use of CSS With HTML

Types of CSS





types-of-css

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

1.External CSS

Here some points are given below for external CSS:

  • External style sheet is a separate file of CSS.
  • File must be saved with .css extension.
  • File contains no tag and only contains CSS code.
  • File can be used to apply on several html files.
  • External style sheet is useful when properties need to be applied on more than one web page on the site.

Example:

HTML file:

 

<html>

<head>

<link rel=”style sheet” type=”text/css” href=”mystyle.css” />

</head>

<body>

<h1> This is  heading. </h1>

<p> This is a paragraph. </p>

<p> This is second paragraph. </p>

</body>

</html>

CSS file (mystyle.css):

p{

color:blue;

}

h1{

color:red;

}


    1.  Internal CSS:
    • Internal style sheet means when CSS is included in the same html file.
    • <style> tag must be used to write CSS in html file.
    • <style> tag should be in <head> tag.
    • Type attribute of style tag specify the type of MIME type (text/css).
    • Internal style sheet is useful when page specific properties need to be applied.
    • Preference is given to internal style sheet over external style sheet.

    Syntax of internal css:

    <style type=”text/css”>

    ElementSelector{

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    }

    Example:

    <html>
    
    <head>
    
    <style type=”text/css”>
    
    h1{
    
    color:blue;
    
    font-style:italic;
    
    }
    
    </head>
    
    <body>
    
    <h1> This is  heading. </h1>
    
    <p> This is a paragraph. </p>
    
    <p> This is second paragraph. </p>
    
    </body>
    
    </html>
    





    3. Inline CSS

    • Style attribute can be used with tag representing html element.
    • The value of style attribute is any CSS property.
    • Each property name-value pair is terminated with a semicolon.
    • Inline style has more preference given than internal or external style.
    • Inline style is useful when element specific property needs to be applied.

    Example:

    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <p style=”color:gray; font-size:22px;”>
    
    This is a paragraph
    
    </p>
    
    </body>
    
    </html>




    Leave a Reply

    Your email address will not be published. Required fields are marked *