Internal Style Sheet with an Example

: Written by: Pavani

HTML Tutorials

The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

<head>
   <title>Internal css</title>
   <style>
      selector{
      Property:value;
      }
   </style>
   </title>
</head>

But in the Internal CSS, we can not control styles for multiple documents at once.
Internal style Sheet is applicable to the Page in which it is included.
Internal Style Sheet is used to style individual page.
It’s impossible to style "pseudo-elements" and classes with inline styles. With Internal style sheets, you can style the visited, hover, active, and link color of an anchor tag.

a:hover{ 
 color:#009;
 font-size:18px;
 font-weight:700;
 }

By using the Internal CSS the page load slow as compared to Inline and External CSS.
A link is specified using the <a> element. This element is called anchor tag as well. Anything in between the opening <a> tag and the closing </a> tag becomes part of the link and the user can click on the link to reach to the linked document.
Syntax: <a href="/Document URL" attr_name="attr_value" />
Target specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page

Example code:

html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Internal CSS</title>
   <style>
      body{
      background-color:#9F6;
      }
      h1{
      color:#C39;
      text-align:left;
      text-transform:capitalize;
      text-decoration:underline;
      }
      P{
      font-size:20px;
      font-family:Verdana, Geneva, sans-serif;
      background-color:#FFF;
      color:#963;
      }
      h2{
      color:#F03;
      margin-left:10px;
      }
      img{
      border:5px           double #903;
      width:400px;
      height:300px;
      margin-left:10px;
      }
      a{
      margin-left:10px;
      }
      a:hover{   /*---------------This is formate of Pseudo-element---------------*/
      color:#009;
      font-size:18px;
      font-weight:700;
      }
   </style>
</head>
<body>
   <h1>Example for Internal CSS</h1>
   <p>Cascading Style Sheet is a style language that defines layout of HTML documents.CSS properties such as background, border, font, float, display, margin, opacity, padding, text-align, vertical-align, position, color etc.</p>
   <h2>Image Affected with styles</h2>
   <img src="/images/p9.png"><br /><br />
   <a href="/../../../Documents/Unnamed Site 2/p9.png" target="_blank">Download Image</a>
</body>
</html>.

OUTPUT:

output

Note: Create an image with name p9.png and put that image in the "images" folder of same directory.