<link src="some Styles.css" media="screen" />

The important part of this is the media attribute. I am sure you all use at least screen and print. We can add to those to change the layout of our page for different screen resolutions.

For Example, adding to our previous code:

<link src="someStyles.css" media="screen" />
<link src="someMediaStyles.css" media="screen and (min-width: 480px)" />

All we added was “and (min-width: 480px)” after in our media attribute after screen. What that means is if the width of the browser is at least 480px then the stylesheet someMobileStyles will be loaded.
That was a bad choice on my part to use min-width for iphone styles. There is another media query we can use, device-width, which does what I was trying to accomplish. (While writing the demo I discovered that min-width doesn’t work on the iPhone, device-width does)

From here on out I am going to reference using the @media declaration within a stylesheet. An example of the @media declaration:

@media screen and (device-width: 480px) {
/*css goes in here */
}

Pro Tip: I always use @media over the media attribute on the link tag because it saves an http request.

There are several media queries that we can use. The ones I can see myself using are min-width, device-width, orientation.
Most of them allow you to add min- or max- as a prefix for greater or equal to or smaller or equal to.
For a fill list, visit the W3 CSS Media Queries article.

I wrote up a demo that shows a practical application of this technique. It shows 4 different layouts, one for 960px+, one for 600px to 959px, one for 480px to 599px and one for mobile devices with a width of 480px (like the iPhone).

Demo

Further Reading

http://www.w3.org/TR/css3-mediaqueries/
Chris Coyer’s Excellent article on CSS Media Queries

function format_hex_color($t) {
	$t = preg_replace("#(\#[0-9A-Fa-f]{6})#si", "<span style='color:\\1'>\\1</span>", $t);
	return $t;
}

Example usage

$string = "He wanted it in #ff0000 or #00FFAA.";
$string = format_hex_color($string);
 
echo $string;

Would output:
He wanted it in #ff0000 or #00FFAA

Works with both caps and lowercase.

A typical echo is…

<?php echo $variable; ?>

And the shorthand method that I almost always use…

<?=$variable?>