Confused on how to use @media.

#1

Hello all,

I'm a little confused on how to implement @media to make some web pages
print better. From what I've been able to read so far, I need to set
the @media rules as the top items in my CSS. So I would write something
like (not sure of the formatting here):

@media print {

body { blah blah blah }; (does a semi-colon go here?)

div.whatever { visibility: hidden }

}

OK, so once I have set different parameters for print in my CSS, how do
I implement that in the HTML document? I've read a lot about how to use
@import in the <head> but I can't find anything (that I can understand)
on how to implement @media in the html document.

Thanks in advance for any help.

Viken K.

#2

Viken Karaguesian wrote:

Quote:

Hello all,

I'm a little confused on how to implement @media to make some web pages
print better.

If you wish, you can avoid @media by creating separate stylesheets for
each medium:

<head>
<link rel="stylesheet" href="screen.css" type="text/css"
media="screen"></link>
<link rel="stylesheet" href="print.css" type="text/css"
media="print"></link>
</head>

In this case, screen.css and print.css contain your styles for screen
and print, respectively.

Since you'll probably have many rules in common for screen and print, a
better solution is to create one single stylesheet:

<head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen,print"></link>
</head>

and style.css could look like this:

---
/* Common rules */
body { font-family: fantasy; }
h1 { border: 1px solid lime; }

@media screen {
/* Rules specifically for screen */
body { color: #faa; background-color: #002; }
a:hover { font-weight: bold; }
}

@media print {
/* Rules specifically for print */
body { color: #000; background-color: #fff; }
div#navigation { display: none; }
}
---

Note the positions of { } and ;

--
Garmt de Vries.

#3

I see...so if I was to add "media=screen,print" in the <head> link, the
browser will automatically know which rules apply to which medium
because of the @media statement in the CSS, right?

Thanks.

Viken K.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Confused on how to use @media.

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Confused on how to use @media. - 12-08-2005 , 09:52 AM

Re: Confused on how to use @media. - 12-08-2005 , 12:13 PM

Re: Confused on how to use @media. - 12-08-2005 , 12:55 PM