CSS3 @media queries example

This is a test paragraph. It should have a blue background when the total browser window width is more than 800px, and a red background when the browser window width is less than 400px. The "content after" will also show andresvidal.com's href in small screen sizes. It should also have a green border when the monitor you use has an aspect ratio of 16.9, but that feature doesn’t seem to work yet.

Sample HTML

<style type="text/css">
p#test a {font-weight:bold;}
@media screen and (min-width: 800px) {
	p#test {
		background-color: #6374AB;
		color: #ffffff;
		padding: 5px;
	}
	p#test a {
		color:white; 
		font-weight:bold;
	}
}
@media all and (max-width: 400px) {
	p#test {
		background-color: #cc0000;
		color: #ffffff;
	}
	p#test a {
		color:white; 
		font-weight:bold;
	}
	a:after
	{
		color:white;
		font-weight:bold;
		content: " (" attr(href) ")";
	}
}
@media screen and (device-aspect-ratio: 16/10) {
	p#test {
		border: 5px solid #00cc00;
	}
}
</style>
	
<p id="test">Some test paragraph and a <a href="#">link</a>... </p>