3 replies [Last post]
thumbslinger
Offline
Regular
Austin, TX
Last seen: 11 years 9 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

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.

thumbslinger
Offline
Regular
Austin, TX
Last seen: 11 years 9 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

@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>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

@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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MeTaL_oRgY
MeTaL_oRgY's picture
Offline
Regular
InGo'S RaNcH
Last seen: 14 years 30 weeks ago
InGo'S RaNcH
Joined: 2006-01-03
Posts: 28
Points: 0

@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">