1 reply [Last post]
tarnold4
tarnold4's picture
Offline
newbie
Last seen: 5 years 30 weeks ago
Timezone: GMT-4
Joined: 2015-03-16
Posts: 2
Points: 4

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 &#9733&#9733&#9733&#9733</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>&#189 cup butter</li>
  <li>&#8531 cup white sugar</li>
  <li>&#188 teaspoon vanilla extract</li>
  <li>1 cup all-purpose flour</li>
  <li>1 (8 ounce) package cream cheese</li>
  <li>&#188 cup white sugar</li>
  <li>1 egg</li>
  <li>&#189 teaspoon vanilla extract</li>
  <li>6 apples - peeled, cored, and sliced</li>
  <li>&#8531 cup white sugar</li>
  <li>&#189 teaspoon ground cinnamon</li>
  <li>&#188 cup sliced almonds</h2></ul></li>
</ul>
<h2>DIRECTIONS</h2>
 
 <h2><ol><li>Preheat oven to 450 &deg F (230 &deg 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 &deg F (200 &deg 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>&#9733&#9733&#9733&#9733</p>
<p><blockquote>I loved the buttery taste of the crust which complements the apples very nicely.</blockquote></p>
<p><cite>&#151Reviewed on Sep. 22, 2014 by MMASON.</cite></p>
<p>&#9733&#9733</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>&#151Reviewed on Sep. 1, 2014 by GLENDACHEF.</cite></p>
<p>&#9733&#9733&#9733&#9733&#9733</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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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;
}