Fri, 2006-01-20 22:26
I'm not getting how to include or import a different style sheet based on the media required.
From the W3, I've seen:
@media print {body font-size: 12 pt;}
So I put:
@media screen {body color: #ffffff; font-size: 10px; background-color: purple }
@media print { body font-size:12pt }
But I'm missing something somewhere.
Wouldn't the browser by default select Screen as the media type and other devices default to the appropriate media when possible?
I'm just not getting how to implement different media types.
Fri, 2006-01-20 22:39
#1
@media problems
I solved it but I thought I'd post where I was crossed up in case others came across this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Untitled Page</title>
<style media="screen" type="text/css">
BODY { color: #f9edc7; font-size: 10px; font-family: "Zapf Chancery", "Comic Sans MS", cursive; background-color: purple }
</style>
<style media="print" type="text/css">
BODY { font-size: 18pt; font-family: Verdana, Arial, Helvetica, sans-serif }
}
</style>
</head>
<body>
<p>This should print different than it looks on screen.</p>
</body>
</html>
Sat, 2006-01-21 09:22
#2
@media problems
The correct way to use the @media rule is to nest it's rules within it; in either a stylesheet or style tags.
<style type="text/css">
@media screen {
BODY { color: #f9edc7; font-size: 10px;}
}
@media print {
body {font-size:18pt;}
}
</style> So you could loose the separate style tags, the same method applies to an external stylesheet albeit without the style tags naturally.
Hugo.
Sat, 2006-01-21 17:42
#3
@media problems
thumbslinger wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Incomplete Doctype you got there.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
