CSS Internal Style

What is Internal Style Sheet ?

  1. Internal Style sheets are the styles that are written inside <head> of the document.
  2. Requires Extra Code to be written inside each HTML page.
  3. Internal style Sheet is applicable to the Page in which it is included. Internal Style Sheet is used to style individual page.
  4. Internal Style Sheet is embedded between <style> tag in <head> section of the Page.
  5. <style> tag can be used inside <body> tag but it is not a proper way to include Internal Style Sheet.

Complete Example Of Internal Style Sheet :

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color:#00ff00;
            }
        </style>
    </head>
    <body>
        <h1>This is heading 1</h1>
    </body>
</html>

Advantages of Internal Style Sheet :

1.It can Affect Only Pages that includes Internal Style Sheet

  • If you are going to design the large system then internal style sheet is good approach as testing perspective.
  • You can make include your CSS code in the heade section and test it.
  • On trial and error basis you can modify and test your page look and layout.

2.Internal Style Sheet can contain “ID” or “CLASS”

3.No External Dependency

  • You have complete code in the same HTML document.Whole CSS code is present inside your head section and can be used without any dependency.
  • In case of external style sheet we need to link another css document.Suppose by mistake suppose linking css document is unavailable then your page will not be rendered properly.
  • These type of style sheets are used to create unique page layout such as email form or CMS template where CSS is included once.

Disadvantages of Internal Style Sheet :

  1. Can affect Single Page Only
  2. Can increase Page Load Time

How to Write Internal Style Sheet ?

  1. Open an HTML Document in HTML Editor such as Notepad++.
  2. Add the following inside the <head> element: 
    <style type="text/css" media="all">
  3. Add an HTML comment after the tag to Prevent Printing CSS as a content in older browsers 
    <!--
  4. On a new line, start writing your CSS Rules and Selectors- 
    selector{
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
  5. When you’ve got all your styles included, close the comment: 
    -->
  6. And then close the style tag: 
    </style>

A Complete Internal Style Sheet Code :

<style type="text/css" media="all">
<!--
selector{
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}
-->
</style>