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,
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,
Thus external style link is necessary to add in all html pages.Now its your turn .
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment