Types of Cascading Style Sheets

Types of Style Sheets

There are three different types of style sheets:
1. Inline
2. Embedded or internal
3. External

1.  Inline Style Sheet
  • The style specifications are placed within the html elements.
  • It uses the style attribute of the html element.
Syntax: <h1 style> … </h1>

  • While using the style sheet the language must be specified.
  • Language is specified using the <META> tag in the <HEAD> section of the document.
Syntax: <head> <meta http-equiv=“Content-style-type” content=“text/css”> </head>

  • It is the most common method of attaching a style sheet to an HTML document.
  • The inline style sheet is used to apply declaration style to an individual element in a particular document.
Inline style sheet should be avoided in two cases:
  • If we want to apply the same style declaration to different elements every time.
  • Inline style sheet mixes the content with the presentation. So, if you want to avoid  this mixing up, don't use Inline style sheet.

Example: Demonstration of inline style sheet

<html>
     <head>
          <title> Inline CSS</title>
          <meta http-equiv="content-style-type" content="text/css">
     </head>
     <body style="background:orange">
          <h1 style="color:White; font-family:arial; font-size:14pt; text-transform:uppercase; text-align:left;"> This is an example of inline css</h1>
     </body>
</html>


Output:
inline css

2. Embedded or internal style sheet
  • The style specifications are defined within the head section of the web page or HTML page.
  • In this style sheet type, the alternate method of attaching a style sheet to HTML document is <STYLE> tag.
  • While using <STYLE> tag it must include TYPE attribute.
  • TYPE attribute specifies what type of style is included in the document.
The attributes of <STYLE> element tag are:

1. type
  • It specifies the internal type of the style language.
  • In CSS, the value of type is “text/CSS”.
2. media
  • Media specifies the medium on which style sheet is applied.
  • Its default value is screen.
  • Its value can be screen/print/projection.

Example 1: Demonstration of embedded style sheet

<!DOCTYPE html>
<html>
     <head>
          <title> Embedded CSS</title>
          <style type="text/CSS">
               body {
                          background-color:#ccffff;
                        }
               h1 { color: purple; font-family: arial; font-size: 30 px; text-transform: uppercase; text-align: left;}
          </style>
     </head>
     <body>
          <h1> This is an example of embedded CSS</h1>
          <h1> B E </h1>
     </body>
</html>


Output:
embeded css

Example 2: Demonstration of embedded style sheet

<!DOCTYPE html>
<html>
     <head>
          <title> Embedded CSS</title>
          <style type="text/CSS">
               body {
                        background-color:#ccffff;
                        }
               h1 { color: purple; font-family: arial; font-size: 30 px; text-transform: uppercase; text-align: left;}
          </style>
     </head>
     <body>
          <h1>Computer programming languages</h1>
          <table border="1">
               <tr>
                    <th>Web-tech</th>
                    <th>Object-Oriented</th>
               </tr>
               <tr>
                    <td>CSS</td>
                    <td>java</td>
               </tr>
          </table>
          <p>Embedded CSS is better than Inline CSS</p>
     </body>
</html>


Output:
embeded css

3. External style sheet
  • In external style sheets, the CSS files are kept separately from an HTML document.
  • External CSS file contains only CSS code and it is saved with a “.css” extension.
  • The CSS file is used as an external style sheet file in HTML document by using a <LINK> tag instead of <STYLE> tag.
  • The <LINK> tag is placed in the <HEAD> section of the HTML document.
  • The main advantage of External style sheet is that external CSS is a “true separation” of style and content.
  • It is easier to reuse CSS code in any separate file.
Syntax:
<HEAD> <LINK REL=“stylesheet” TYPE=“text/css” HREF=“mystyle.css”>
</HEAD>

Attributes of <LINK> tag

1. rel
  • It is used to specify a relationship of CSS with HTML document.
  • Its default relationship value is “style sheet”.
  • Possible relationship values are stylesheet/alternate stylesheet.
2. type
  • Type attribute is not used in META tag.
  • It specifies which type of style language is used.
  • The value of the type attribute is “text/CSS”.
3. href
  • It points to the external style sheet file's URL.
  • It specifies the path of the style sheet file which is linked with the HTML document.
4. title
  • It is optional.
  • It indicates the name of the style sheet.
5. media
  • It specifies the medium on which style sheet should be applied.
  • Its default value is screen.
  • The values can be screen/print/projection.

Example: Demonstration of external style sheet

NOTE: Save following program as external.css

body { background:#ccffff;}
h2,p {
        color: green;
        font-family:arial;
        text-align:center;
        }
p i{
      color: orange;
      border-style: solid;
      font-weight: lighter;
      }
.ex{color:purple}

NOTE: Save following program as external.html and link above CSS file in it.

<html>
     <head><title>Extenal style sheet</title>
          <link rel= "stylesheet" type= "text/CSS" href="external.css">
     </head>
     <body>
          <h2> It is an example of External style sheet</h2>
          <p class="ex"> This is a "true separation" of style and content</p>
          <p><i> External CSS </i> </p>
     </body>
</html>


Output:
external css

NOTE: To run the program, save the above .css and .html files on the same location or folder.
▲