Investigating the Pros & Cons of Embedded CSS

Inline, External or Embedded CSS?

Using cascading style sheets with your web pages delivers considerable advantages in the control of your page layout and styling. You can position elements wherever you want them, style headings and paragraphs, the behavior of images and organize your page into columns and basically create any page design imaginable on your web page.

There are othree different ways of using CSS, each of which has its particular advantages.

For instance inline CSS is placed within XHTML tags and is preceded by the style condition. The styles themselves are specified in quotes with the usual colon and semicolon use, but the braces “{}” are not required.

At the other end of the scale is external CSS, probably the most versatile CSS method. This allows an entire web page to be restyled from a single file.

Meanwhile embedded CSS comes at the midway point of both of these options. Taking the form of an external file but sitting in the header of an XHTML page, embedded CSS is a popular option.

When to Use Embedded CSS

An XHTML document with embedded CSS will usually look like this:

<!—various XHTML –>

This affords control over the specified elements between the tags and allows you to make changes to font size and color very quickly.

Embedded CSS is extremely suitable for use in single page websites, where there is too much CSS content to use the inline CSS method but not enough to warrant the use of an additional external stylesheet. You might also have bandwidth or speed considerations that you wish to prevent from becoming an issue, or you might be targeting wireless or portable devices, thereby preventing external CSS from being an option.

Some Final Considerations

However, as useful as embedded CSS is to anyone designing a single page website, if your project suddenly becomes more than one page, then embedded CSS—like inline CSS—is going to become inconvenient and unwieldy.

The reason for this is that with multiple pages, you have multiple CSS to edit. While embedded CSS is preferable to inline CSS—you have all of the style conditions in the header of each page rather than littered throughout the document—it still requires updating multiple XHTML documents.

As soon as your website project starts to require multiple web pages, the time has already arrived to forget embedded CSS and use an external stylesheet.

This is easy to do – instead of the tags use:

As you can see, there are advantages and disadvantages to embedded CSS. The best option is to scale your CSS use against the size of your website.

References

Author’s own experience.

Screenshot taken by author.