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.
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
typeattribute 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 totext/css. So thetypeattribute 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.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.
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
maybe time to update this article with <style scoped=”scoped”> ?
Good point. Unfortunately, browser support for that is pretty awful and not backwards compatible, so it’s hard to use it.
I did write a separate article on it:
http://www.impressivewebs.com/scoped-styles-html5/
Which is the best method between this type
1. Inline
2. Internal
3. external
And Why????