473,418 Members | 2,061 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,418 software developers and data experts.

Using @print to avoid multiple style sheets

I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.

For example...

If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?

..divClass1 {
text-align:left;
}
@print .divClass1 {
text-align:center;
}

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jul 1 '08 #1
10 2745
Ed Jay wrote:
I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.

For example...

If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?
Corrected syntax:

@media print {
.divClass1 {
text-align: center;
}
}
--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth
Jul 1 '08 #2
Joshua Cranmer wrote:
>Ed Jay wrote:
>I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.

For example...

If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?

Corrected syntax:

@media print {
.divClass1 {
text-align: center;
}
}
Thanks. I presume this will supercede a previous style for divClass1 in a
media=all sheet, as in the example I gave?

I also presume that I can include multiple declarations within the
@print {..}?

Thanks again.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jul 1 '08 #3
Ed Jay wrote:
I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.

For example...

If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?

.divClass1 {
text-align:left;
}
@print .divClass1 {
text-align:center;
}
In CSS there is no such thing as @print. The correct form for what
you're trying to do is

@media print {
.divClass1 { text-align: center; }
}

Jul 1 '08 #4
Harlan Messinger wrote:
>Ed Jay wrote:
>I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.

For example...

If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?

.divClass1 {
text-align:left;
}
@print .divClass1 {
text-align:center;
}

In CSS there is no such thing as @print. The correct form for what
you're trying to do is

@media print {
.divClass1 { text-align: center; }
}
Thanks...that explains some weird behavior. :-)

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jul 1 '08 #5
Ed Jay wrote:
I do not want to load two style sheets for screen and print media.
Mind listing the reason for that?

I find that a separate print style sheet greatly reduces maintenance.
For one, you don't have to pore through hundreds of lines of screen
styles looking for each print style. The few you probably need would be
easily accessible in one small place.

Download time would be next to nothing.

--
-bts
-Friends don't let friends drive Windows
Jul 1 '08 #6
Beauregard T. Shagnasty wrote:
>Ed Jay wrote:
>I do not want to load two style sheets for screen and print media.

Mind listing the reason for that?

I find that a separate print style sheet greatly reduces maintenance.
For one, you don't have to pore through hundreds of lines of screen
styles looking for each print style. The few you probably need would be
easily accessible in one small place.

Download time would be next to nothing.
I thought it might be easier to have everything in one place. But, it's not
working out, so I've abandoned the idea.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jul 1 '08 #7

Beauregard T. Shagnasty wrote:
>
I find that a separate print style sheet greatly reduces maintenance.
Not necessarily. Depends on how the CSS is organized, I think.
For one, you don't have to pore through hundreds of lines of screen
styles looking for each print style.
The problem with that is some styles I often want for both screen and
print. That means either duplicating them in the print stylesheet, or
loading 2 stylesheets. Too much trouble for me to keep that stuff
straight. Besides, I never intermix screen only and print rules.

I prefer to use 1 stylesheet and section it off by media type. I've been
doing it this way for so long I know exactly where to look for certain
rules.

@media screen, projection, print {
global rules like heading fonts, floating images, etc.
}
@media screen, projection {
screen only rules like navigation, background images, etc.
}
@media print {
print only rules, like display:none for navigation, etc.
}

I suppose you could stick handheld in there, too, but I don't bother. If
they get info sans CSS, that's fine with me.
Download time would be next to nothing.
It is. IIRC, at least some browsers retrieve all stylesheets whether
they need them or not, then apply the applicable rules depending on what
the user requests. It's fewer server calls putting them into 1 external
stylesheet.

If your CSS is huge, however, then you should rethink a few things. KISS
comes to mind. :)

--
Berg
Jul 1 '08 #8
Bergamot wrote:
>
Beauregard T. Shagnasty wrote:
>>
I find that a separate print style sheet greatly reduces maintenance.

Not necessarily. Depends on how the CSS is organized, I think.
>For one, you don't have to pore through hundreds of lines of screen
styles looking for each print style.

The problem with that is some styles I often want for both screen and
print. That means either duplicating them in the print stylesheet, or
loading 2 stylesheets. Too much trouble for me to keep that stuff
straight. Besides, I never intermix screen only and print rules.

I prefer to use 1 stylesheet and section it off by media type. I've been
doing it this way for so long I know exactly where to look for certain
rules.

@media screen, projection, print {
global rules like heading fonts, floating images, etc.
}
@media screen, projection {
screen only rules like navigation, background images, etc.
}
@media print {
print only rules, like display:none for navigation, etc.
}

I suppose you could stick handheld in there, too, but I don't bother. If
they get info sans CSS, that's fine with me.
>Download time would be next to nothing.

It is. IIRC, at least some browsers retrieve all stylesheets whether
they need them or not, then apply the applicable rules depending on what
the user requests. It's fewer server calls putting them into 1 external
stylesheet.

If your CSS is huge, however, then you should rethink a few things. KISS
comes to mind. :)
My intended scheme was based on organization as well. I only write for
screen and print media. My style sheets are alphabetically organized, and I
was considering adding the media print definitions immediately following the
individual screen styles. Unfortunately, that doesn't seem feasible, or at
least make a lot of sense, because it appears that styles for each media
have to be grouped under a media type, such as you have done. That doesn't
accomplish what I wanted to do.

I quaffed a beer and took a nap instead.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jul 2 '08 #9
On 07/01/08 11:57 am, Ed Jay wrote:
>>
Corrected syntax:

@media print {
.divClass1 {
text-align: center;
}
}
Thanks. I presume this will supercede a previous style for divClass1 in a
media=all sheet, as in the example I gave?
Only if it comes after the stylesheet for divClass1.
I also presume that I can include multiple declarations within the
@print {..}?
You mean "@media print { ... }"?
Yes. It is like any other style ruleset, just restricted to print media.
The normal ruleset has an implied "@media all { ... }".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 2 '08 #10
Jim Moe wrote:
>On 07/01/08 11:57 am, Ed Jay wrote:
>>>
Corrected syntax:

@media print {
.divClass1 {
text-align: center;
}
}
Thanks. I presume this will supercede a previous style for divClass1 in a
media=all sheet, as in the example I gave?
Only if it comes after the stylesheet for divClass1.
>I also presume that I can include multiple declarations within the
@print {..}?
You mean "@media print { ... }"?
Yes. It is like any other style ruleset, just restricted to print media.
The normal ruleset has an implied "@media all { ... }".
Thanks, Jim.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jul 2 '08 #11

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

Similar topics

16
by: Geoff Cox | last post by:
Hello, I publish some web pages using large fonts and would like to give the user the opportunity to print the pages using a smaller font. I believe that this is possible using different style...
3
by: Phil Thompson | last post by:
does it matter in which order i place different style sheets i.e. <link rel="stylesheet" type="text/css" media="screen" href="style/screen.css" /> <link rel="stylesheet" type="text/css"...
1
by: Rajah | last post by:
I have a webpage which I need to format for printing. The webpage contains a Confirmation and an Acknowledgement. Users should be able to print the Confirmation and the Acknowledgement separately....
98
by: Pamel | last post by:
I know this must have been asked elsewhere, but I cannot find it. There is a piece of text on my web page that I don't want browsers to resize. IE won't resize it if I specify the size in px, but...
2
by: Hallvard B Furuseth | last post by:
Are there any guidelines or conventions for how to organize the preferred and alternate style sheets for a site, sheets for different media, and what titles to give them in the <link...
0
by: mscertified | last post by:
Lets say I have stylesheets A and B. I want the definitions to be taken from A if they exist in both. I want them to be taken from B, if they don't exist in A. How do I specify this? Also, is...
1
by: mscertified | last post by:
Can anyone explain how references to style sheets work, I've exhausted looking in help, its all so confusing. I have three style sheets in my project under 'Style Sheets'. Only the first style...
5
by: =?Utf-8?B?SmVycnkgQw==?= | last post by:
I have a machine running IIS 6.0. I just replaced the web.config and several aspx pages in the application and now the style sheets are not working. the images from the themes work but not the css...
4
by: fjm | last post by:
Hello everyone. I’d like to know how to handle multiple style sheets. I have css tabs that have a style sheet and then I also have a separate style sheet for the content that goes inside the tab. ...
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...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new...

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.