Internal CSS in HTML | Internal Style Sheet

Ad Banner Image

Internal Style Sheet

Internal Style Sheet is defined in the head part of the HTML Page, it is used to specify the design specification of the HTML Element on that web page. Internal Style Sheet is encapsulate in the HTML <style> tag.

Example – Internal CSS in HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
     p{
       color: green;
       background-color: yellow;
       }
	 h1{
        color: olive;
        background-color: cyan;	
        }	
	</style>   
  </head>	   
  <body>
     <h1>This is a heading</h1>
     <p>This is an another paragraph</p>	 
  </body>
</html> 

The above syntax shows that how can you apply Internal CSS to the HTML Element. Here CSS is defined in the head part.

Internal CSS in HTML Internal Style Sheet
Fig.1 – Example of Internal CSS in HTML or Internal Style Sheet

HTML CSS in Head

Internal Style Sheet is more beneficial than inline style because it reduce the code and also easy to maintain. Here the CSS Style is written with reference to the CSS selectors. The most basic CSS selector is Tag selector.

Example 2 – Internal Style

<!DOCTYPE html>
<html>
  <head>
    <style>
     p{
       color: green;
       background-color: yellow;
       }
	 div h1{
        color: olive;
        background-color: cyan;	
        }	
	</style>   
  </head>	   
  <body>
     <h1>This is a heading</h1>
  <div>
     <h1>This is an another heading</h1>
  </div>
     <p>This is an another paragraph</p>	 
  </body>
</html> 

Above code is an another way to define the CSS Style to the HTML Element. The above syntax have 2 h1 but both h1 have different result because one of them shows normal and another have different look and feel of the heading h1. Because CSS Style for div h1 is declared. So the result of the above code is shown below.

mbed HTML CSS in Head
Fig.2 – Example shows how you can embed html css in head of the web page
Sponsor Banner
You can leave a response, or trackback from your own site.

One Response to “Internal CSS in HTML | Internal Style Sheet”

  1. Blair Shutty says:

    Hello there I am so delighted I found your weblog, I really found you by mistake, while I was searching on Google for something else, Anyhow I am here now and would just like to say many thanks for a remarkable post and a all round entertaining blog (I also love the theme/design), I don’t have time to read it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back to read much more, Please do keep up the great job.

Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress