Methods for adding CSS Style rules

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-12-2021 14:04:21

Methods for adding CSS Style rules



There are three types of method for adding CSS style rule “External CSS, Internal CSS and Inline CSS”

  1. External CSS
    External CSS means creating a separate stylesheet file with .css extension. This file than link to the HTML document with the help of the link tag placed inside head tag. You can use single stylesheet in multiple document file and also multiple stylesheet in single document.

    <link rel=“stylesheet” href=“test.css” >
    Or
    <link rel=“stylesheet” href=“/css/test.css” >


    The attributes used and their values here are:

    • type - its value is “text/css”
      Specifies the stylesheet language as a content type. This attribute is required.

    • href - its value is “URL”
      Specifies the stylesheet file having style rules. This attribute is required.

    • media - its value are “screen, tty, tv, projection, handheld, print, braille, aural, all”
      Specifies the device the document will be displayed on. Default value is all. This attribute is optional.




  2. Internal CSS
    Internal CSS means adding styling properties within the Html document instead of creating a separate file. CSS is placed inside style tag within head tag.

    <style>
    p {
    color: red;
    }
    </style>


    The attributes used and their values here are:

    • type - its value is “text/css”
      Specifies the stylesheet language as a content type. This attribute is required.

    • media - its value are “screen, tty, tv, projection, handheld, print, braille, aural, all”
      Specifies the device the document will be displayed on. Default value is all. This attribute is optional.



  3. Inline CSS
    Inline CSS means adding CSS inside the elements with style attribute. It will be apply to single element and won’t affect the other elements and also the same name elements properties doesn’t changes.
    <p style=“color: red”> Inline CSS </p>




Note: content are taken from various documentation files



Comments

Share your thoughts about this post
web counter