Tue, 2015-03-24 18:54
I wanna create a print style sheet (css).
I want to know how i would changes the font for all non-heading text to Times New Roman and i want to remove the borders and box shadow from the left column/section
that is in the html file.
All when the page is printing. I also am looking to add a media query so that way when the user’s max display area (the browser window) width is 480 pixels,
the width of both the left column/section and the right column/aside are both 100%.
I dealt with css and html, this print style is all new to me. HTML code is below. I know you have to link the html with the print.css, which i did.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <!-- Apple Bavarian Torte Author: Thomas Arnold Date: 02/06/2015 --> <title>Apple Bavarian Torte</title> <script src="modernizr-1.5.js"></script> <link href="dessertstyles.css" rel="stylesheet" type="text/css" /> <link href="print.css" rel="stylesheet" media="print" /> </head> <body> <header> <h1><img src="dessertweb.jpg" alt="dessertWeb" /></h1> </header> <section> <h1>Apple Bavarian Torte ★★★★</h1> <img src="torte.jpg" width=250 alt="Torte image" /> <p>A classic European torte baked in a springform pan. Cream cheese, sliced almonds, and apples make this the perfect holiday treat (12 servings).</p> <section><h2>INGREDIENTS</h2> <ul> <h2><ul><li>½ cup butter</li> <li>⅓ cup white sugar</li> <li>¼ teaspoon vanilla extract</li> <li>1 cup all-purpose flour</li> <li>1 (8 ounce) package cream cheese</li> <li>¼ cup white sugar</li> <li>1 egg</li> <li>½ teaspoon vanilla extract</li> <li>6 apples - peeled, cored, and sliced</li> <li>⅓ cup white sugar</li> <li>½ teaspoon ground cinnamon</li> <li>¼ cup sliced almonds</h2></ul></li> </ul> <h2>DIRECTIONS</h2> <h2><ol><li>Preheat oven to 450 ° F (230 ° C).</li> <li>Cream together butter, sugar, vanilla, and flour.</li> <li>Press crust mixture into the flat bottom of a 9-inch springform pan. Set aside.</li> <li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla. Pour cheese mixture over crust.</li> <li>Toss apples with sugar and cinnamon. Spread apple mixture over all.</li> <li>Bake for 10 minutes. Reduce heat to 400 ° F (200 ° C) and continue baking for 25 minutes.</li> <li>Sprinkle almonds over top of torte. Continue baking until lightly browned. Cool before removing from pan.</h2></li> </ol> </section> <aside><h1>REVIEWS</h1> <p>★★★★</p> <p><blockquote>I loved the buttery taste of the crust which complements the apples very nicely.</blockquote></p> <p><cite>—Reviewed on Sep. 22, 2014 by MMASON.</cite></p> <p>★★</p> <p><blockquote>Nothing special. I like the crust, but there was a little too much of it for my taste, and I liked the filling but there was too little of it. I thought the crunchy apples combined with the sliced almonds detracted from the overall flavor.</blockquote></p> <p><cite>—Reviewed on Sep. 1, 2014 by GLENDACHEF.</cite></p> <p>★★★★★</p> <p><blockquote>Delicious!! I recommend microwaving the apples for 3 minutes before baking, to soften them. Great dessert - I'll be making it again for the holidays.</blockquote></p> <p><cite>—Reviewed on August 28, 2014 by BBABS.</aside></cite></p> </body> </html>
Tue, 2015-03-24 22:12
#1
Hi tarnold4, The styles you
Hi tarnold4,
The styles you have in dessertstyles.css will also be applied when printing.
So you will need to check where fonts are mentioned in that and override them in the print stylesheet with the font you want.
If you use the same selectors you should be fine as print.css comes after dessertstyles.css.
Depending on what's in dessertstyles.css you may be able to just use something like:
body, body p{ font: ...; }
For the borders you should be able to use a similar process just find the selector used to add the border and in your print stylesheet sonething like:
selectors{ border:none; }