Internal CSS

Internal CSS is just CSS styling done within the HTML of pages, but it

1539 views

Edited: 2016-10-04 13:54

Internal CSS is when CSS styling is done within HTML pages. Sometimes there may be valid reasons to include the styles directly in the HTML, but it is generally considered bad for maintainability and page load times, and should therefor be avoided.

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>