A single style cannot perform the miracle of transforming a web page into a work of art. To create some special designs in the web page, an understanding of web page is very essential. Usually a collection of CSS styles comprises a style sheet.
A style sheet can be of two types – external and internal, depending on where the style information is located- in the Web page itself or in a separate file linked to the web page.
Internal and External – How to choose
Most of the time external style sheets are preferred as they make it quite easier to build web pages and update web sites faster. They contain all style information in single file. You will have to attach the external style sheet with just a line of code to an HTML page and completely alter the appearance of the page. The external style sheets also assist in fast opening of web pages. When you are using an external style sheet, your web pages will contain only basic HTML – no byte-hogging HTML tables or
Moreover, when a web browser downloads an external style sheet, it usually stores the file on the visitor's computer [in a behind-the-scenes folder called a cache] for quick access. When your visitor hops to other web pages on the site that use the same external style sheet, so there is no need for the browser to download the style sheet again. The browser can simply pull the external style sheet from its cache - a significant savings in download time.
Note: When you are working on your web site and previewing it in a web browser, the cache can work against you.
Internal Style sheets
An internal style sheet is a collection of styles that forms a part of the web page’s code, always placed between opening and closing HTML
<style type= "text/css">
h1 {
color: #FF7643;
font-face: Arial;
}
p {
color: red;
font-size: 1.5em;
}
</style>
</head>
<body>
/* The rest of your page follows… */
Note: You can place the <style> tag and its style after the <title> tag in the head of the page, but Web designers usually place them right before the closing </head> tag.
The style tag is HTML, and not CSS. But the job is to let the web browser be aware that the information contained within the tags is CSS code and not HTML. Creating an internal style sheet is as simple as typing one or more styles between the <style> tags.
Internal style sheets are especially easy to add to a web page and provide an immediate visual boost to the HTML. But off course, they are not the most efficient method for designing an entire web site composed of several web pages. For one thing is you really need to copy and paste the internal style sheet into each of the pages of your web site, which becomes quite a time consuming chore that adds bandwidth-hogging code to each page.
Sometimes internal style sheets prove to be even more hassled when you want to update the look and feel of the web site.
For example, say you want to change the <h1> tag, which you originally decided should appear as large, bold and green type. But now you want a different look; you want it blue type using the courier typeface. Using internal style sheets, you just need to edit every page. So the simple solution is creation of external style sheets.
Note: It is also possible [though rarely advisable] to add styling information to an individual HTML tag without using a style sheet.
