What is an external Css style sheet?

Hi friends in this post I am sharing about external style sheet.External style sheet is used to apply css style in all html pages .

Advantages of using external style sheet

  • Minimize the code and this help to increase fast page loading
  • Save time more with just a single page instead of writing the same code multiple times.                            

The below explanation will help to create a  external style sheet and you can see the disadvantages.

  • Create a folder and name it as “techinfoweb”.
  • Inside “techinfoweb” folder create two html files and one css files.If you don’t know how to create html and css files follow the below steps.
  • Open notepad and type file name “techinfoweb.html” and save as type “all files”.Use encoding as “UTF-8” and click “save”.Finally place this “techinfoweb.html” in techinfoweb folder.
  • Open another notepad and type file name “techinfoweb2.html” and save as type “all files”.Use encoding as “UTF-8” and click “save”.Finally place this “techinfoweb2.html” in techinfoweb folder.
  • Again Open another notepad and type file name “techinfoweb.css” and save as type “all files”.Use encoding as “UTF-8” and click “save”.Finally place this “techinfoweb.css” in techinfoweb folder.
  • Now in techinfoweb folder there are two html files(techinfoweb.html,techinfoweb2.html) and one css file(techinfoweb.css).

Copy and paste the below code in techinfoweb.css

#menubar{background:yellow;display:inline-block;width:920px;;height:40px;margin-bottom:5px;}
#menubar li    {display: inline-block;}
.leftsidebar{background:green;width:650px;height:500px;float:left;color:white;}
.rightsidebar{background:blue;width:250px;height:500px;float:left;color:white;margin-left:20px;}

Copy and paste the below code in techinfoweb.html

<head>
<link rel="stylesheet" type="text/css" href="techinfoweb.css">

</head>
<div id="menubar">
<ul>
<li><a href="techinfoweb.html">Page1</a></li>
</li><a href="techinfoweb2.html">Page2</a></li>
</ul>
</div>
<div class="leftsidebar">Techinfoweb-what is an external sheet?</div>
<div class="rightsidebar">Techinfoweb-what is an external sheet?</div>

Copy and paste the below code in techinfoweb2.html

<head>

<link rel="stylesheet" type="text/css" href="techinfoweb.css">
</head>
<div id="menubar">
<ul>
<li><a href="techinfoweb.html">Page1</a></li>
</li><a href="techinfoweb2.html">Page2</a></li>
</ul>
</div>
<div class="leftsidebar">Techinfoweb2-what is an external sheet?</div>
<div class="rightsidebar">Techinfoweb2-what is an external sheet?</div>

Now you will get the output as like below,

 

html output with external style sheet

 

Now delete the code  <link rel="stylesheet" type="text/css" href="techinfoweb.css"> in tehinfoweb2.html and save.And if you see now you will get output like below,

 

 

html output without external style sheet

 

Thus external style link is necessary to add in all html pages.Now its your turn .

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment