Depending on where I look, I see different way to include css.
Examples
<link rel="stylesheet" type="text/css" media="screen, projection" href=""/>
<link rel="stylesheet" type="text/css" media="all" href=""/>
<link rel="stylesheet" type="text/css" media="screen" href=""/>
<link rel="stylesheet" href=""/>
Do they all do the same?
Is one of them the correct way?
All are correct.
The type attribute is not required - it is just a hint for browsers but can be omitted.
The media attribute tells the browser when the CSS file should be used. For example, if you specify media="print" the CSS file will only get used when printing the page (try to print a Wikipedia page, for example).
Generally this variant is fine in most situations:
<link rel="stylesheet" type="text/css" href="..."/>
At minimum you need the rel and href attributes. The type attribute is often used, but not required.
The media attribute is used to target specific devices.
For Example:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
tells the browser to apply the print.css file only if the user is trying to print the webpage.
They are all correct syntax.
Maybe this will help you : css media
The css will be picked depending on the media tag
all
Suitable for all devices.
braille
Intended for braille tactile feedback devices.
embossed
Intended for paged braille printers.
handheld
Intended for handheld devices (typically small screen, limited bandwidth).
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
IMHO the 4th is the least good as it does not declare the stylesheet file type, although it is optionally.
<link rel="stylesheet" type="text/css" media="screen, projection" href=""/>
<link rel="stylesheet" type="text/css" media="all" href=""/>
<link rel="stylesheet" type="text/css" media="screen" href=""/>
These three differ in the media, as you probably noticed. The media tells to which media the stylesheet should be applied to. See Section 7 (Media Types) of the CSS 2 standard.
I personally prefer this way:
<style type="text/css">
@import url("import1.css");
@import url "import2.css";
</style>
For more information on @import have a look at this article by about.com .
Media attribuute specifies when the css file should be loaded
it should be working in all major browsers
Valid values: for media attribute
<LINK href="special.css" rel="stylesheet" type="text/css">
link elements just fine, even IE is good about closing stand-alone tags.
allis for example when you want to create printer friendly page.