Difference between Internal CSS and External CSS

When the boss takes a break, its almost like you are in a break, right? you know what I mean! No no not that I did not work or something its just that I took things a little lighter. iMamoo is back so i got to buck up. I am on my way to meet him, but in the mean while i had something intersting to share with you’ll. Go on read and let me know if you have to say anything. By the way, now you can catch me regularly on this blog… :-)

Internal CSS :

An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the <style> tag within the <head> area of the document. Here is an example of an internal style sheet:

<html>
<head>
<title>Internal Style Sheet Example</title>
<style>
<!–
body { background: #C9F1C5 }
h1 { color: #54B24B; font: bold 14px Verdana, Arial, Helvetica }
p { font: 12px Verdana, Arial, Helvetica }
–>
</style>
</head>
<body>
<h1>Page With an Internal Style Sheet</h1>
<p>This page contains style definitions at the top of the HTML code.</p>
</body>
</html>



Internal style sheets allow a designer to define styles for an HTML page.

External CSS :

An external style sheet is a file with a .css extension that contains style definitions. It might look something like this:

body { background: #C2DAED }
h1 { color: #3270A4; font: bold 14px Verdana, Arial, Helvetica }
p { font: 12px Verdana, Arial, Helvetica }


External style sheets can be linked to multiple pages for a consistent look across a site.

Difference :

The difference between internal and external style sheets is pretty simple. Both are referenced within the head section of a web page ().

1. But external style sheets are much easier to use in the long run, as they allow you to make design changes to an entire site by simply changing one file.

In the case of an internal style sheet, styles are referenced within the page itself. For example, your head section may look something like this:

2. When using an external style sheet, the styles are called by using an external page (the file extension is .css) to define the styles for that page.

3. Another great reason to use external style sheets as opposed as internal style sheets is that it keeps your code much shorter in each page, simplifying editing, and since the browser has already loaded the external style sheet once the first page has been loaded, the following pages (if using the same external style sheet) will load faster than if the styles are defined internally.

VN:F [1.1.4_465]
Rating: 4.0/5 (1 vote cast)

Leave a comment for: "Difference between Internal CSS and External CSS"

Tag Cloud