Inline styles vs. external style sheets

There are several approaches for defining where to place the style information: inline styles, external CSS, or a combination of both.

Embedded (inline) styles

With embedded (online) CSS, style information is assigned to individual elements or included in the <head> element. Using inline styles is more efficient for styles that are applied to individual Web pages rather than styles that are used throughout multiple Web pages in a website. A website that uses page-specific styles should always define them inline.

Inline style example:

<head>
   <style type="text/css">
      a:link img {border-color: black;}
      a:visited img {border-color: green;}
      img {border-style:solid; border-color: red}
   </style>
</head>

Note that caching CSS and JavaScript is not recommended for styles or script that are applied to one Web page only. In this case, it is more efficient to define the script or styles inline rather than downloading multiple files. If you have a large website you may want to use a combination of caching and inline mechanisms to achieve the best performance. For below for more information.

External CSS

With external CSS, the style sheet information is stored in an external file, allowing multiple web pages to refer to the same style sheet. For example, <LINK href="styles.css" type=text/css rel=stylesheet>. The disadvantage is that downloading the css file increases the time needed to display the first page on the site. The advantage is that the CSS is then cached for other pages to use, resulting in subsequent pages being displayed faster. This approach is recommended for websites using a large amount of CSS. For more information about caching, see Using cache effectively.

Combination of both

A website can use a combination of embedded and server side includes by defining page-specific styles inline and using server-side includes (SSI) for styles that are consistent across the site. SSI-enabled servers add the contents of one file into another file before downloading it. For example, the instruction <!--#include virtual="inlinestyles.html"--> could be added to the <head> element of an HTML file to include styles before the page is downloaded. This results in one less round-trip to the server and the browser is able to render the page immediately rather than having to wait for the CSS file.

© Nokia 2009.