473,385 Members | 1,400 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Confused on how to use @media.

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.

Dec 8 '05 #1
2 1478
Viken Karaguesian wrote:
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.

Dec 8 '05 #2
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.

Dec 8 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

17
by: Geoff Cox | last post by:
Hello, I am trying to have 1. web pages in large font 2. web pages with smaller font for printing I am using <link rel="stylesheet" media="print" type="text/css"
56
by: alan b | last post by:
I copied it and tried to edit the movie.htm below in the <PARAM NAME=*** location of the file where the videoclip is on my hard drive. It is already recorded by Windows Media Player. My version...
1
by: Lonewolf | last post by:
Hi everyone, pls forgive me for my lack of knowledge and skills if my question sounds very stupid. I am trying to implement a video conferencing software and I am currently looking at a few set of...
0
by: AshuPd | last post by:
Hi there!! I am really pleased to get such a plateform. Ok my problem is how could I make a dynamic media file play on the click event of an Image Button. There is class called...
2
by: wavedancer | last post by:
I am confused about the syntax used in the style sheet that accompanies the website I've inherited and have been asked to tidy up. XHTML is new to me, and I've only used CSS for font and link styles...
3
by: boris | last post by:
i want to learn a language and hav options between JAVA and DotNet languages.but i am totally confused abt what to do.as this forum is for DotNet only thats y i m askin y shud i preffer DotNet...
1
by: =?Utf-8?B?c2xvd3NwZWVk?= | last post by:
My WMP 11 was working just fine, then the automatic security updates installed KB835935. Media Player now stops playing audio and closes down after a few seconds. I did a sys restore, didn't...
0
by: Konrad | last post by:
Hi everyone. I've got problem with converting xml file to xsd schema. The Xml file looks like: <?xml version="1.0" encoding="iso-8859-2"?> <rss version="2.0"...
2
by: Tyler Fleckenst | last post by:
I have the code to make windows media player start, I just need to make it start in fullscreen when it starts playing. Is this even possible? I'm so confused, ha. This is what I have so far: ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.