CODEWITHSUNDEEP
css
Sandra Schlichting
Sandra Schlichting

Reputation: 25986

Correct syntax for include css file?

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?

Upvotes: 7

Views: 3985

Answers (6)

Mutt
Mutt

Reputation: 935

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.

Upvotes: 4

Teneff
Teneff

Reputation: 32158

Media attribuute specifies when the css file should be loaded

it should be working in all major browsers

Valid values: for media attribute

  • screen - Computer screens (this is default)
  • tty - Teletypes and similar media using a fixed-pitch character grid
  • tv - Television type devices (low resolution, limited scroll ability)
  • projection - Projectors
  • handheld - Handheld devices (small screen, limited bandwidth)
  • print - Print preview mode/printed pages
  • braille - Braille feedback devices
  • aural - Speech synthesizers
  • all - Suitable for all devices

reference w3 schools

Upvotes: 1

cimnine
cimnine

Reputation: 4067

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 .

Upvotes: 1

Andrei Sfat
Andrei Sfat

Reputation: 8606

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).

  • print

    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).

Upvotes: 1

Udo G
Udo G

Reputation: 13111

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="..."/>

Upvotes: 9

Roman
Roman

Reputation: 3749

<LINK href="special.css" rel="stylesheet" type="text/css">

Reference: http://www.w3.org/TR/html40/present/styles.html

Upvotes: 0

Related Questions