Stylesheets: external vs. embedded

/ CSS /
  • 3 out of 5 Stars
Please note: this article is over 16 years old. Information may be out of date.

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.

CSS

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.

Get free access to the largest backlink database

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>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.
WordPress made easy

Rate This Article

How would you rate the quality of this content?
Currently rated: 3 out of 5 stars. 2 users have rated this article. Select your rating:
  • 3 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Dissect your rivals' key traffic drivers