In the last installment of the HTML5 CSS Starter Page series, you learned to use the Multiscreen Preview Panel to see how a layout looks in various devices. You also used the Media Queries dialog box to generate the appropriate media queries to target style sheets for tablets and smart phones. In this tutorial you'll create the rules for tablet.css and phone.css to optimize the layout for those devices.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet ...

Related Articles

• The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
• The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
• The HTML5 CSS Starter Page Series - Part 8: Site Tasks
• The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
• The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
• The HTML5 CSS Starter Page Series
• What's New in the Adobe BrowserLab CS Live Service
• Color Picker Extension
• Introducing CMX JumpStart Merry Christmas
• CMX JumpStart: Merry Christmas