<link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all” /> – allows HTML authors to associate other documents with the document containing the link tag.
Alternate style sheets:
<link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”Default” />
<link rel=”alternate stylesheet” type=”text/css” href=”bigtext.css” title=”Big Text” />
<link rel=”alternate stylesheet” type=”text/css” href=”zany.css” title=”Crazy colors!” />
It is also possible to group alternate style sheets together by giving them the same title value. Thus, you make it possible for the user to pick a different presentation for your site in both screen and print media. For example:
<link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”Default” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print-sheet1.css” title=”Default” media=”print” />
<link rel=”alternate stylesheet” type=”text/css” href=”bigtext.css” title=”Big Text” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”print-bigtext.css” title=”Big Text” media=”print” />
Reason is because if you give a link with a rel of stylesheet a title, then you are designating that style sheet as a preferred style sheet. This means that its use is preferred to alternate style sheets, and it will be used when the document is first displayed. Once you select an alternate style sheet, however, the preferred style sheet will not be used.
Furthermore, if you designate a number of style sheets as preferred, then all but one of them will be ignored. Consider: (3 different titles)
<link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”Default layout” />
<link rel=”stylesheet” type=”text/css” href=”sheet2.css” title=”Default text sizes” />
<link rel=”stylesheet” type=”text/css” href=”sheet2.css” title=”Default text sizes and layouts” />
By Bryan Xu