Media Temple Hosting

Welcome to CSS Basics. More info on this section at the bottom of this post.

What’s the Best Way to Add CSS to a Web Page?

on | 5 Comments

In an HTML page, you can add CSS in a number of different ways, which I explain below. After I show you each method, I’ll tell you which method is best, and why.

Using HTML’s <link> Tag

This is the best method to use (more details on this at the end of this post). Inside your web page, with the opening and closing <head> tags, you can include the following:

<link rel="stylesheet" href="style.css">

Prior to HTML5, developers were accustomed to adding a “type” attribute to the <link> element, to specify what type of file you were including. But this was never required by HTML validators, nor is it required by any browser or browser version.

Using the @import At-Rule

Instead of using the <link> element, you could alternatively include a reference to a CSS file like this:

<style>
@import url(style.css);
</style>

This method, referred to as an at-rule (this is just one type of at-rule) must be included either within <style> tags inside your document’s <head> element, or else inside your stylesheet (which could be referenced via the <link> element, or via another @import rule).

The @import declaration must appear before any other CSS rules, otherwise it will not work.

Using the <style> Element

You could include CSS anywhere in your web page by putting CSS rules inside <style> tags, like this:

<style>
p {
	margin: 0 0 20px 0;
}
</style>

Although this could be placed anywhere in your HTML document, it’s generally best to put it inside the <head> element, if you choose to use this method.

Using Inline Styles

Another way to add CSS to a web page is to use inline styles. With this method, the styles will only apply to the element on which they appear. Here’s an example:

<p style="color: red; padding: 20px;">Example paragraph text goes here.</p>

Which Method is Best?

Generally speaking, the best method is the first one listed that describes how to use the <link> element. But there could be some instances where one of the other methods would come in handy, so you shouldn’t completely rule them out. I have used all the above methods over the years. The only method that I no longer use is the @import method.

The @import method fell out of popular use for various reasons. First, there was an issue with Internet Explorer that caused the page to temporarily appear unstyled when this method was used in the <head> element. Also, @import was previously a good way to get really old browsers (like Netscape 4) to ignore CSS that they didn’t understand. But this is no longer necessary.

It should also be pointed out that the “Flash of Unstyled Content” does not occur if you use the <link> element, then refer to another file in your CSS via the @import method.

The other two methods I outlined (using the <style> element, and inline styles) should generally be avoided because they are not good for long-term maintenance and re-use of CSS. For example, if you have a bunch of CSS in the <head> of your document, then that CSS will only affect that document. Likewise, with inline styles, the styles will only apply to the elements they appear on.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here, add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.

5 Responses

  1. As you mentioned
    "Prior to HTML5, developers were accustomed to adding a "type" attribute to the <link> element, to specify what type of file you were including. But this was never required by HTML validators, nor is it required by any browser or browser version."

    But in HTML4 type attribute was required.
    "This attribute specifies the scripting language of the element’s contents and overrides the default scripting language. The scripting language is specified as a content type (e.g., "text/javascript"). Authors must supply a value for this attribute. There is no default value for this attribute."
    Source: http://www.w3.org/TR/html4/interact/scripts.html#adef-type-SCRIPT

    • Maybe it is also wise too note that <style> and inline styles add paperweight and are not externally cacheable which is usually unnecessary.

      @Jitendra Vyas
      As for the type attribute in <link> HTML 4 elements please refer to Chapter 14 of the HTML 4 specification. Where it states “Authors must specify the style sheet language of style information associated with an HTML document.”

      Either using a <meta> element, a HTTP header or fallback to text/css. So the type attribute is intact not necessary.

    • Jitendra, as Jorgen points out, the type attrbiute is not required for the <link> element.

      Nonetheless, what you’ve described and quoted is regarding the <script> element, which did require a “type” attribute prior to HTML5. This article is discussing the <link> element, for CSS, not the script element.

      Also, beginners need to understand that even if they use HTML4, it is not necessary to follow many of these “rules” that were set out in these very old specifications. The fact is, no browser in existence will have any problem with a <link> element that doesn’t have a type attribute, or even a <script> element that doesn’t have a type attribute. In either case, the default (CSS or JavaScript) will be assumed by every browser.

  2. Hi Louis,

    Thank you for your post.
    I want to point out another problem/drawback if you use @import:
    The rule blocks the browser from loading other styles and resources if it is included in a style sheet, I think. This means the performace isn’t the best you can get.

    Furthermore IMO the <link>-method is the “nicest”, as you have the best overview of your styles.

  3. but @import is used a lot with the advent of css3 media queries for more information refer to the following document;
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.