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 stylesheets. Depending on your needs for web page development, it is upto you to choose a way to add stylesheet on your web page.
Internal Stylesheet
It is very easy to use internal stylesheet 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 stylesheet.
Why External Stylesheet?
- You can create group of external stylesheet in one folder and make a call to respective stylesheet 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 stylesheet 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 Stylesheet?
- If the stylesheet 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 stylesheets 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 stylesheets to your web page. First method deals with linking to external style sheet and second method deals with importing stylesheet 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 Stylesheet : To link to external stylesheet 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 stylesheet.
<link rel="stylesheet" type="text/css" href="styles.css" /> |
Importing Stylesheet : Another method to add stylesheet 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 stylesheets as you like to make web pages look better but please note that this contributes to the page download time. So write stylesheet code wisely and make sure you don’t call heavy stylesheet files.