Four methods of adding CSS to HTML

4 methods of adding CSS to HTML: link, embed, inline and import

There is more than one way to add a Cascading Style Sheet (CSS) to
your HTML document. In this short tutorial I will explain the strengths
and weaknesses of the four main methods.

Linking to a separate CSS file

This is the most common method of attaching CSS rules to an HTML
document. With this method all of your style rules are contained in a
single text file that is saved with the .CSS extension. This file is
saved on your server and you link to it directly from each HTML file.
The link is just a simple line of HTML that you put in the <head> section of your HTML document, it looks like this:

<code><link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" /></code>

Make sure you include the correct path to your CSS file in the href.
If the CSS file is in the same folder as your HTML file then no path is
required (like the example above) but if it's saved in a folder, then
specify it like this href="foldername/mystyles.css". The
media parameter specifies when the CSS rules are to be used. "screen"
indicates for use on the computer screen. If you specify "print" then
the rules will only be followed when the page is printed. You can
include multiple CSS files if required.

There are many advantages to linking to a separate CSS file. If you
need to make a style change across your whole website then you only need
to make the change once in your single CSS file. If you want to
completely change the look of your website, again, you only need to
update this one file. Check out CSS Zen Garden
for the best example of this. Perhaps the best reason to have a
separate CSS file is for speed. When a person first visits your website
their browser downloads the HTML of the current page plus the linked CSS
file. Then when they navigate to another page their browser only needs
to download the HTML of that page, the CSS file is cached so does not
need to be downloaded again. This can significantly increase browsing
speeds on a website.

Embedding CSS into the HTML

You can also embed CSS rules directly into any HTML page. To do this you need to add the following code to the <head> of your HTML document:

<code><style media="screen" type="text/css">

Add style rules here

</style></code>

All of your CSS rules go between the style tags. As before, the media
can be "screen" for your computer screen or "print" for printing.

The disadvantage with this approach is the styles must be downloaded
every time someone visits the page, this can cause a slightly slower
browsing experience. However there are a few advantages. Because the CSS
is part of the HTML document, the whole page exists as just one file.
This can be useful if you are sending the page to someone via email or
if it will be used as a template such as a blogger template. I use this
method on my liquid-layout demos
so when people view the source of the page they can see the HTML and
the CSS code together. Another advantage of using this method is with
dynamic content. If you are using a database to generate the page
content you can also generate dynamic styles at the same time. Blogger
does this - it dynamically inserts the colours for headings and other
elements into the CSS rules embedded in the page. This allows users to
change these colours from an admin page without actually editing the CSS
in their blog templates.

Adding Inline CSS to HTML tags

Style rules can also be added directly to any HTML element. To do
this you simply add a style parameter to the element and enter your
style rules as the value. Here is an example of a heading with red text
and a black background:

<code><h2 style="color:red;background:black;">This is a red heading with a black background</h2></code>

This is not a good method to use because it will bloat your HTML and
make website maintenance a real headache. However it can be useful in
some situations. One example could be if you are using a system where
you don't have access to the CSS file - simply add your style rules
directly to the elements instead.

Importing a CSS file from within CSS

Another interesting way to add CSS to a HTML page is with the import
rule. This lets us attach a new CSS file from within CSS itself. Let's
look at an example of how this is done then I will show a practical
example of when you might use this method. To import a new CSS file from
within CSS simply use the following rule:

<code>@import "newstyles.css";</code>

Just change "newstyles" to the name of your CSS file and be sure to
include the correct path to the file too. Remember the path is relative
to the current CSS file that we are in, if the CSS is embedded into the
HTML page then the path is relative to the HTML file.

Let's imagine we have a 1000 page website and we link to a CSS file
from every page on the site. Now let's imagine we want to add a second
CSS file to all of those pages. We could edit all 1000 HTML files and
add a second CSS link or a much better way would be to import the second
CSS file from within the first file. We just saved ourselves many hours
of work!

source here : http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import

Happy CSS coding...