How to include CSS?

[simlim]

How can I put all my CSS code in a file and include it in my html so it won't look messy?

something like javascript.
<script src='http://www.domain.com/script.js'></script>

thanks.

[jatar_k]

welcome to WebmasterWorld simlim,

similar in the HEAD

<link HREF="/path/to/file.css" REL="stylesheet" TYPE="text/css">

[simlim]

Thank you!

[grahamstewart]

You can also specify a media type so you can have different stylesheets for different media (e.g. you might use a stylesheet for printing that hides unneccessary graphics and logos)

the syntax is..

<link rel="stylesheet" type="text/css" media="all" href="/styles/default.css">
<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css">

[simlim]

that's good! May need it later for my print out page. Thanks.

[BlobFisk]

There is also the @import method - but this is only supported by the more recently compliant browsers.

<style type="text/css">
@import url(style.css);
</style>

Or for media specific CSS:

<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
@import url(aural.css) aural;
@import url(print.css) all;
</style>

Use both link and @import can be useful in supplying browsers with stylesheets based on compatibility. For example:

<line rel="stylesheet" type="text/css" href="old.css">
<style type="text/css">
@import url(new.css);
</style>

Here old browsers will get "old.css" and new browsers will get both "old.css" and "new.css". But, using the cascade, new.css will supercede all style rules set in "old.css" (remember to use all the same id and class names!).

HTH