Webmaster tips » CSS

May 2, 2006

Stylesheets: external vs. embedded

Average rating:
  • 0 out of 5 Stars
Rate this article

There are various ways to use CSS markup in your site pages. You can link external stylesheets to your HTML pages, define CSS elements directly in your HTML code, but what is the best solution? Let's the describe the most popular of them and show their pros and cons.

External stylesheets.

External stylesheets are stored in the separate .css files and linked from the HTML in such manner:

  • Using the <link> tag:
    <head>
    <title>External example</title>
    <link rel="stylesheet" type="text/css" href="/style.css" />
    </head>
  • Using the <style> directive:
    <style type="text/css" media="all"> @import "/style.css";</style>

<style> tag is the more flexible as you can use different stylesheets for different media (print, screen, braille, aural, etc.), but can be not supported by the odd browsers.

Embedded stylesheets.

Embedded stylesheets usually have been defined in the HEAD section of the HTML document as follows:

<head>
<title>example</title>
<style>
<!--
h1{ text-decoration: underline; color: red; }
h2 { font-size: large; color: blue; }
-->
</style>
</head>

Internal style declarations.

If you need to specify some CSS properties directly for some element, you can use internal style declaration. Here is a small example:

<p style="font-size: 12pt; color: silver;">Silver text 12 points only at this element</p>

So, what is the best way to use CSS?

There are many webmasters using all the methods described above, but we at wmtips.com think the best way to manage CSS styles is to keep them in the external files. Here are the several advantages of external stylesheets:

  • Smaller size of resulting HTML, and therefore lower bandwidth usage and faster loading speed of your pages. All internet browers now support caching, so your .css files will be downloaded once and cached on the client side.
  • More search engine friendly pages. First of all, search engines need your content, not HTML or CSS markup. By using external stylesheets you can make your site pages more lightweight and easy to crawl by search engines, so it can affect your SE rankings.
  • Easy to maintain. You can easily change the styles for all your site if you have all your styles only in several .css files.

Print! Print this article   Bookmark:

Rate This Article
How would you rate the quality of this content? Currently rated: 0 out of 5 stars.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 0 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles