More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 294

3. Configure the nav class to not be printed with the page. Delete all styles associated
with the nav class and replace them with the following CSS:
.nav { display: none;
}

Save your file in the wildflowersPrint folder.

Part 3—Test Your Work

Test your page1.html file in a browser. Select Print, Preview. Your display should look
similar to the page shown in Figure 7.17. The logo and content font sizes have been
configured. The navigation does not display. The student files contain a copy of
page1.html and wildflowerprint.css in the Chapter7/wildflowersPrint folder.

FAQ

How can I control the page breaks when printing a Web page?

Use the CSS page-break-before or page-break-after properties to control hard copy
page breaks. Well-supported values for these properties are always (the page break will
always occur as designated), avoid (if possible, the page break will occur before or after, as
designated), and auto (default). For example, to configure a page break before elements
assigned to the class named newpage , configure the CSS as shown below:

.newpage { page-break-before: always; }

7.6 CSS Styling for the Mobile Web

Have you noticed how connected everyone seems to be these days? Access to the Web
from cell phones, smartphones, and Internet tablets makes it possible to always be
online. The research firm eMarketer.com predicts significant growth for mobile Web
access, with a projected 134.3 million mobile Internet users by 2013. With this growth
in mind, it's becoming more important to design Web pages that are accessible and
usable for your mobile visitors. There are a few schools of thought on the best way to
accomplish this, including developing a new mobile site with a .mobi TLD (see Chapter 1
to review TLDs), creating a separate Web site hosted within your current domain tar-
geted for mobile users, and using CSS to create a style sheet to configure your current
Web site for display on mobile devices. We'll focus on the third approach with CSS in
this section.

You can create a separate style sheet to configure the display on handheld devices,
just as you configured a separate style sheet to control the printed format of a Web
page. Associate the style sheet with your Web page using the media attribute
( media="handheld" ) on the <link> tag. An example is shown below:

<link href="mobile.css" rel="stylesheet" type="text/css"
media="handheld" />