When you add CSS to your web pages, you have three options for adding the styles:

  • inline in the HTML tags
  • in the HEAD in a STYLE tag
  • externally with a LINK element or @IMPORT

But which is the best way to add your styles?

All three methods have advantages, but it depends upon what you are trying to improve.

Advantages of Inline Styles

This type of style has the fewest advantages. But there are some:

  • These will override any other style other than those marked with !important
  • They can be added quickly

But inline styles can cause pages to load more slowly because they add more characters to be downloaded with every page. Plus, you can’t set the style for every similar element, so if, for example, you want all your paragraphs to have red text, you have to add style="color:red;" to every paragraph.

Advantages of the STYLE Tag in the HEAD of Your Document

The STYLE element, placed in the HEAD of your document, works better than inline styles, but it still isn’t the best way to add styles to your documents. There are some advantages to this method as well:

  • Lets you apply styles to multiple elements with just one style property
  • They can be added more quickly than external style sheets, but not as quickly as inline styles

Advantages of External Style Sheets

The best way to add styles to your web page is with external style sheets using the LINK element. This adds several advantages:

  • Styles can be applied to multiple elements with one style property
  • Those styles can be applied globally to every document on the site
  • External style sheets can be cached to speed web pages loading
  • And external style sheets only add a short LINK element to every page, rather than a long style sheet or styles in every element

But Where Should You Put the Style Sheets?

You can place the STYLE element anywhere in an HTML document and the LINK element is only valid in the HEAD. And placing both these elements in the HEAD helps the pages load more quickly because the page can then render as the HTML loads.

When a web browser reads a web page, it reads it in the order that the HTML is written. So when your style sheet comes first, that is what is read first. Then, when the browser gets to the HTML, it already knows how to style it and so doesn’t have to wait to load the CSS before displaying the content.

You should always place your styles in the HEAD of your HTML documents. And the best placement of the styles is right after the TITLE element. The ideal order for your HEAD element is:

  1. Meta charset tag
  2. Title tag
  3. Style tags or links
  4. Other meta tags and content
  5. Scripts that must be in the HEAD (for optimal loading, scripts should be placed at the bottom of your web pages, just before the /body tag)

Putting the HEAD element in this order helps your web page load as quickly as possible.

Why Not Put Style Sheets at the Bottom of the Page

You may already know that scripts are best placed at the bottom of your HTML documents, just before the /body tag. This helps the page load and display before setting up scripts that can block parallel downloads. But this does not apply to style sheets. When you place a style sheet at the bottom, this prevents many browsers, especially Internet Explorer, from doing progressive rendering. Internet Explorer even blocks rendering of the page until all the styles are added, so that it doesn’t have to redraw the page. This means that customers will see a blank white page until all the elements and styles have been loaded.

Subscribe
%d bloggers like this: