External Style Sheets - <link>, <style> and @import

An external style sheet is a text file containing CSS rules - it does not contain any HTML. It has the file extension .css.
There are two ways of linking an external style sheet - using the <link> element and the other way is using the <style> element and the @import directive.

The link tag

Example:
<link rel="stylesheet" type="text/css" href="styles/sheet1.css" media="all" />
The above code is used to link a style sheet called sheet1.css to the current HTML document using the href attribute. This attribute's value is a URL of the style sheet file. Also, the style sheet applies to any media that the document is being viewed in (the media="all" attribute-value pair). The two other attribute-value pairs (rel="stylesheet" and type="text/css") must be included. You can also include the title attribute. Firefox displays the name of the style sheet in the View > Page Style menu, Opera in the View > Style menu. If you have more than one stylesheet with a title attribute, Firefox and Opera allow the user to choose which one should be applied by selecting it from the View menu.

The <style> tag and the @import directive

The <style type="text/css"> element contains CSS rules. The @import directive is a CSS statement that loads an external style sheet. This directive must be placed before any other CSS rules. The media to which the style sheet must be applied can be specified as a comma separated list.
Example: <style type="text/css">
@import url(styles/sheet1.css) screen, print;
p {font:62.5%}
</style>