Webmaster tips » CSS

May 2, 2006

Stylesheets: external vs. embedded

Average rating:
  • 3 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:


    <title>External example</title>

    <link rel="stylesheet" type="text/css" href="/style.css" />


  • 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:





h1{ text-decoration: underline; color: red; }

h2 { font-size: large; color: blue; }




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: 3 out of 5 stars. 2 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 3 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles
Rating: 2.6 stars
Specify mouse cursors with CSS (May 2, 2006)
CSS allows you to define a cursor that will be displayed at the specific element on your page. For instance, if you want to show that the clicking the element will show the context help, you can define the "help" cursor for this element...
Rating: 5 stars
10 CSS tricks you may not know by Trenton Moss (Jun 19, 2006)
Rating: 5 stars
Internet Explorer & CSS issues by Trenton Moss (Jun 19, 2006)
Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers...
Rating: 5 stars
Ten more CSS tricks you may not know by Trenton Moss (Jun 19, 2006)
Block vs. inline level elements Another box model hack alternative Minimum width for a page IE and width & height issues Text-transform command Disappearing text or images in IE? Invisible text...
Rating: 3.6 stars
The Power of CSS by Cliff Ritter (May 2, 2006)
CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied...