Cascaded style sheets are the means by which web developers model the web page. They can be placed within page or added via external link. There are pros and cons of using internal and external style-sheets. Depending on your needs for web page development, it is upto you how to use external css in html and to choose a way to add style-sheet on your web page.
Internal inline stylesheet
It is very easy to use internal style-sheet on your webpages. Just use the style type declaration in your HTML page as shown below:
<style type="text/css"> </style>
This will be helpful as long as you’re modifying limited webpages but in case of larger websites it is beneficial to add external style-sheet.
Why External Style-sheet?
- You can create group of external style-sheet in one folder and make a call to respective style-sheet as per you need. This allows more control and flexibility in your web project.
- If you’re using more classes and tables in your web page then it is beneficial to separate style-sheet in external .css file.
- You can control multiple web pages with selective classes used from multiple css files.
- It makes document editng more easy as style attributes are separated from content and other page elements.
Why not external Style-sheet?
- If the style-sheet file has large data then downloading the file takes time and it increases page download speed.
- For static site with limited pages and different design on each page, external style-sheets are harder to maintain.
- If the style elements are limited then it increases the complexity of your site.
- External style sheets are often hard to maintain in many web design projects.
There are two ways to add external style-sheets to your web page. First method deals with linking to external style sheet and second method deals with importing style-sheet in web page. There is very minor performance difference between these two so for average projects you can use any one of them.
Linking to Style-sheet : To link to external style-sheet you need to use < link > tag. It has three attributes (rel, type and href) that you’re supposed to fill in order to link to external style-sheet.
<link rel="stylesheet" type="text/css" href="styles.css" />
Importing Style-sheet : Another method to add style-sheet is using @import. This call must be made within the style declaration tag.
<style> @import URL (http://www.website.com/styles.css); </style>
You can import as many html include css external file style-sheets as you like to make web pages look better but please note that this contributes to the page download time. So write style-sheet code wisely and make sure you don’t call heavy style-sheet files.
