d11

Style Sheets at a glance

Site Genre: Pattern Group d

magnify imageFigure D11.1 The New York Times uses a style sheet called global.css for displaying pages on a desktop screen (a), and one called print.css for displaying pages for a printer (b).

Background

On every site, from PERSONAL E-COMMERCE (A1) sites to BLOGS (A12), style sheets can simplify changes, and make pages more accessible.

Close

PROBLEM

Page-by-page update of a site design including layout, colors, and fonts’ is a time-consuming and error-prone process.

buy the book to find out more

SOLUTION

magnify image Figure D11.6 Style sheets let you separate content from look and feel so that you can change each independently of the other.

Start your site design using a style sheet so that changes will be easier to make later. Separate content and navigation from design and layout so that you can build different designs from your content and navigation. If your site pages are likely to be printed, create a print style sheet. If customers will want to use your site from a mobile device, create a mobile style sheet. If you build pages in this way, your site will be more accessible to everyone.

Other Patterns to Consider

Make a default style sheet part of your standard PAGE TEMPLATE (D1) to help foster a standard look and feel for your entire Web site. You can also define custom style sheets to help with SITE ACCESSIBILITY (B9) and PRINTABLE PAGES (D8). In addition, style sheets are a convenient way of specifying the appearance and layout of navigation and content, letting you control how and where things like TAB ROWS (K3), NAVIGATION BARS (K2), CONSISTENT SIDEBARS OF RELATED CONTENT (I6), and EXTERNAL LINKS (K8) appear on your Web pages. You can also define GRID LAYOUTS (I1) and OBVIOUS LINKS (K10) in your style sheets. Finally, style sheets can be used to define the font and color scheme for individual CONTENT MODULES (D2). Style sheets are another way of using HTML POWER (L4).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.