[Designer Karly]

Hey Peeps.

I always get the options when creating linking to a stylesheet in my .html document with either:

1. @import url("stylesheet.css");

or

2. <link rel="stylesheet" type="text/css" href="stylesheet.css" />

I tend to go for option 2 as when I look at other peoples code they use this method. As curiosity got the better of my I tried the @import url... method and produced the exact same result.

So which is best to use and why?

*Confused*

DK

[Ben]

Hi Karly,

Good question, to my understanding, <link rel="stylesheet" type="text/css" href="stylesheet.css" /> is read by all browsers and the @import method is used to hide styles from older browsers such as Netscape & IE4 (who uses those nowadays!)

Using the @import may result in a (FOUC) or Flash Of Unstyled Content with Internet Explorer (version 5 or above). Going through my bookmarks this handy little website will tell you how to over come that problem.

Link: http://www.bluerobot...b/css/fouc.asp/

I pretty much always use the <link rel... method for attaching a stylesheet.

Hope that helps.

[Designer Karly]

Thanks Ben, that's always puzzled me, now I know!

I always had a hunch to use <link rel...I guess i'll stick with it.

Thanks again.

DK

[Sazzad]

What I use @import option for is those sites I use the style changer script on. When page loads, it will load the stylesheet file that is after the @import tag and if you use style changer it will change the style upon click. Something like this

<style type="text/css">@import"style.css";</style>
<link rel="stylesheet" href="style1.css" type="text/css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="pink">
<script type="text/javascript" src="styleswitcher.js"></script>

<a href="#" onclick="setActiveStyleSheet('blue'); return false;" title="Change background to nature" ><img src="images/tbimg2.jpg" alt="Change background to sharp grass" border="0" /></a> <a href="#" onclick="setActiveStyleSheet('red'); return false;" title="Change style to Red"><img src="images/tbimg1.jpg" alt="Change style to Red" border="0" /></a> <a href="#" onclick="setActiveStyleSheet('green'); return false;" title="Change style to Green"><img src="images/tbimg3.jpg" alt="Change background to cat-eye" border="0" /></a> <a href="#" onclick="setActiveStyleSheet('pink'); return false;" title="Change background to sky"><img src="images/tbimg4.jpg" alt="Change style to Pink" border="0" /></a>

[Dave]

IamShipon1988, on Feb 25 2007, 11:04 PM, said:

What I use @import option for is those sites I use the style changer script on. When page loads, it will load the stylesheet file that is after the @import tag and if you use style changer it will change the style upon click. Something like this

<style type="text/css">@import"style.css";</style>
<link rel="stylesheet" href="style1.css" type="text/css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="pink">
<script type="text/javascript" src="styleswitcher.js"></script>

<a href="#" onclick="setActiveStyleSheet('blue'); return false;" title="Change background to nature" ><img src="images/tbimg2.jpg" alt="Change background to sharp grass" border="0" /></a> <a href="#" onclick="setActiveStyleSheet('red'); return false;" title="Change style to Red"><img src="images/tbimg1.jpg" alt="Change style to Red" border="0" /></a> <a href="#" onclick="setActiveStyleSheet('green'); return false;" title="Change style to Green"><img src="images/tbimg3.jpg" alt="Change background to cat-eye" border="0" /></a> <a href="#" onclick="setActiveStyleSheet('pink'); return false;" title="Change background to sky"><img src="images/tbimg4.jpg" alt="Change style to Pink" border="0" /></a>

I was only just thinking about how to 'dynamically' change the style sheet on a page!

Thank you!

[Ben]

Agreed, that is handy to know.

Cheers

[olivier]

re style switcher, I got a really good script of the internet but unfortunately can't remember where from.
This switcher works with session and/or cookies which allow the chosen style to stick from page to page so say if the user selects what style they want on one page, when they navigate through the site, the style they've chosen is kept in a session or a cookie.

The code was something like this:

this should be saved as a include called style_array.php

 
<?
$styleSheets = array();

// Define your stylesheets (you can ad as many as you want here just increment the array index)

$styleSheets[0]["title"]='default';
$styleSheets[0]["sheet"]='<link href="default.css" rel="stylesheet" type="text/css" />';

$styleSheets[1]["title"]='alternate';
$styleSheets[1]["sheet"]='<link href="alternate.css" rel="alternate stylesheet" type="text/css" />';

// Set the style that the user will see on their first visit to the site
$defaultStyleSheet=0;

// this looks if the user has selected a stylesheet (in a cookie or in the session) 
// and if nothing is found return the default style set above

if(!isset($_COOKIE["STYLE"])){
 if(isset($_SESSION["STYLE"])){
  echo $styleSheets[$_SESSION["STYLE"]]["sheet"];
 }else{
  echo $styleSheets[$defaultStyleSheet]["sheet"];
 }
}else{
 echo $styleSheets[$_COOKIE["STYLE"]]["sheet"];
}
?>

The second part of this is the actual switcher:

this should be saved as a include called style_switcher.php

<?
// Set a cookie for one year on the viewer's machine (can be reduced obviously...)
//with the chosen stylesheet info
if(isset($_REQUEST["SETSTYLE"])){
 if(setcookie("testcookie",true)){
  setcookie("STYLE",$_REQUEST["SETSTYLE"],time()+31622400,"/");
 }else{
  $_SESSION["STYLE"]=$_REQUEST["SETSTYLE"];
 }
}
// Now just send the user back to the page they were
header("Location: ".$_SERVER["HTTP_REFERER"]);
?>

Now the last bit is in your html, instead of your normal <link> or @import, add this:
(this should be added in every page you would like the switcher to operate)

<?
include('script/style_array.php');
?>

This will write the <link> tag for the stylesheet.

Now the last bit you need are the links for user to pick a style, this goes like this:

<a href="http://yoursite.com/style_switcher.php?SETSTYLE=0">default</a>version<br />
<a href="http://yoursite.com/style_switcher.php?SETSTYLE=1">alternate</a> version

Et Voila!
So in brief, you should have 2 includes style_array.php and style_switcher.php and then it's just a matter of adding the bit in your (x)html.

I hope this is clear enough, if not, give me a shout and i'll help you

Olivier

[Ben]

Now that is handy!

Thanks very much olivier! I'll be sure to contact you should i run into any difficulties!

Impressive stuff.

Merci beaucoup

[Sazzad]

Thanks Oliver, I didn't know the php version. Well this is the java version that can be used for html websites, in addition to the information I put above. The above code will not work without this file. I called it "styleswitcher.js" and put it in the main directory.

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
	  a.disabled = true;
	  if(a.getAttribute("title") == title) a.disabled = false;
	}
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1
	   && a.getAttribute("rel").indexOf("alt") == -1
	   && a.getAttribute("title")
	   ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

[olivier]

Yeah I did see the javascript version but as it relies on the user having javascript turned on, i thought the php alternative was pretty cool

Nice piece of code tho

Olivier

[Ben]

Php of course has the advantage of being able to work if the user has javascript disabled! Which I like alot, it's nice having piece of mind when you build a website knowing that javascript issues won't be a problem.

Plus it looks neater!

[olivier]

I agree mr bEn

[Ben]

Ooo i like your new Avatar! Very South Parkified!

[olivier]

this is what i'd look like if I was in South Park
you are pretty futuramistic yourself

[Sazzad]

Well if anyone wants to learn about it, I wrote a short tutorial on it on myBLOG. Just go to http://www.webdesignerforum.co.uk/index.ph...mp;showentry=23

Hey Ben, will you help me out with www.MicroDiary.org. I need some help, I just started the project but I don't have much time. I'm actually using a pre-made script from OSWD.org