By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Internal CSS

The Definition of Internal CSS. About the benefits and the drawbacks from using them, and a useful Example.

Edited: 2011-12-25 03:14

Internal CSS are just CSS declarations, that are included directly in a pages head section.

Internal CSS can be used for many purposes, some of which include, Testing, quick-fixes, smaller websites, and so on. You can also use Internal CSS to lower the HTTP Requests required to load your page, but this is generally only useful for sites which has little CSS code to begin with.

Testing purposes

Many web designers use internal CSS when they begin working on new projects, this is because its easier to scroll up in the source, rather then change the source file.

Some are also using it to debug their pages, if they encounter a problem which is not so easily fixed. This can be done in combination with the !important rule of CSS.

The !important rule

Sometimes you might encounter a problem, where simply applying a property doesn't have an effect. However, using the !important rule, web designers may overwrite past styles, even those hard-headed ones.

Quick fixes

There are times where you would just apply a direct fix in your HTML source, using the style attribute, but you would usually move the fix to the relevant files when you are either able, or got the time.

Small websites and HTTP Requests

About the only sites that will benefit from lowering their HTTP Requests this way, are the ones with simplistic layouts. Most sites will be better off, looking into other ways to increase their performance.

Using External CSS will usually be better, because its cached by the browser. This means that the browser only has to download the CSS once, for all the sites that use the styling rules.

Using Internal CSS

Inline Styles

Below example uses the style attribute, to apply inline CSS styles.

<p><a href="about.html"><img src="MyImage.jpg" alt="" style="border:0;"></a></p>

Embedded Styles

Styles that are embedded, will be included in the head section, using the style element of HTML.

<style type="text/css">
a img {
  border: 0;
}
</style>