1 New Perspectives on HTML5 and CSS3, 8th Edition 3 Tutorial 3 4. Review Assignment 6. Style Sheet for the Pandaisia Chocolates Monthly Specials 7 Author: Date: 10 Filename: pc_specials.css 11 12 */ 13 14 /* Page Body Styles */ 15 16 17 18 /* Image Styles */ 19 20 21 22 /* Horizontal Navigation Styles */ 23 24 25 26 27 /* Grid Styles */ 28 29 30 31 32 /* Specials Styles */ 33 34 35 36 /* Award Styles */ 37 38 Complete the following: 1. Use your editor to open the pc_specials_txt.html and pc_specials_txt.css files from the html03 review folder. Enter your name and the date in the comment section of each file, and save them as pc_specials.html and pc specials.css respectively. 2. Go to the pc_specials.html file in your editor. Within the document head, create links to the pc_reset2.css, pc_styles4.css, and pc_specials.css style sheets. 3. Take some time to study the content and structure of the document, paying careful attention to the use of ids and class names in the file. Save your changes to the file. 4. Go to the pc_specials.css file in your editor. Within the Page Body Styles section, add a style rule for the body element that sets the width of the page body to 95% of the browser window width within the range of 640 to 960 pixels. Horizontally center the page body within the window by setting the left and right margins to auto. 5. Go to the Image Styles section and create a style rule that displays all img elements as blocks with a width of 100%. 6. Anne wants the navigation list to be displayed horizontally on the page. Go to the Horizontal Navigation Styles section and create a style rule for every list item within a horizontal navigation list that displays the list item as a block floated on the left margin with a width of 16.66%. 7. Display every hypertext link nested within a navigation list item as a block. 8. Next, you will create the grid styles for the March Specials page. Go to the Grid Styles section and create a style rule for the body element that displays the element as a grid with two columns in the proportion of 2:1 (using fr units) with a column grid gap of 20 pixels. 9. Create a style rule for the header and footer elements that has both elements span the grid from the gridline number 1 to gridline number -1. 10. Create a style rule for the section element with the id "sub" that displays that element as a grid consisting of three columns of equal width by repeating the column width 1fr three times. 11. Go to the Specials Styles section. In this section, you will create styles for the monthly specials advertised by the company. Create a style rule for all div elements of the specials class that sets the minimum height to 400 pixels and adds a 1 pixel dashed outline around the element with a color value of rgb(71, 52, 29). 12. Go to the Award Styles section. In this section, you will create styles for the list of awards won by Pandaisia Chocolates. Information boxes for the awards are placed within an aside element. Create a style rule for the aside element that places it using relative positioning, sets its height to 650 pixels, and automatically displays scrollbars for any overflow content. 13. Every information box in the aside element is stored in a div element. Create a style rule that places these elements with absolute positioning and sets their width to 30%. 14. Position the individual awards within the awardList box by creating style rules for the div elements with id values ranging from award1 to award5 at the following (top, left) coordinates: award1 (80px, 5%), award2 (280px, 60%), award3 (400px, 20%), award4 (630px, 45%), and award5 (750px, 5%). (Hint: In the pc_specials.html file, the five awards have been placed in a div element belonging to the awards class with id values ranging from award1 to award5.) 15. Save your changes to the style sheet and then open the pc_specials.html file in your browser.

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question
1
New Perspectives on HTML5 and CSS3, 8th Edition
3
Tutorial 3
4.
Review Assignment
6.
Style Sheet for the Pandaisia Chocolates Monthly Specials
7
Author:
Date:
10
Filename: pc_specials.css
11
12
*/
13
14
/* Page Body Styles */
15
16
17
18
/* Image Styles */
19
20
21
22
/* Horizontal Navigation Styles */
23
24
25
26
27
/* Grid Styles */
28
29
30
31
32
/* Specials Styles */
33
34
35
36
/* Award Styles */
37
38
Transcribed Image Text:1 New Perspectives on HTML5 and CSS3, 8th Edition 3 Tutorial 3 4. Review Assignment 6. Style Sheet for the Pandaisia Chocolates Monthly Specials 7 Author: Date: 10 Filename: pc_specials.css 11 12 */ 13 14 /* Page Body Styles */ 15 16 17 18 /* Image Styles */ 19 20 21 22 /* Horizontal Navigation Styles */ 23 24 25 26 27 /* Grid Styles */ 28 29 30 31 32 /* Specials Styles */ 33 34 35 36 /* Award Styles */ 37 38
Complete the following:
1. Use your editor to open the pc_specials_txt.html and pc_specials_txt.css files from the
html03 review folder. Enter your name and the date in the comment section of each file,
and save them as pc_specials.html and pc specials.css respectively.
2. Go to the pc_specials.html file in your editor. Within the document head, create links to the
pc_reset2.css, pc_styles4.css, and pc_specials.css style sheets.
3. Take some time to study the content and structure of the document, paying careful attention to
the use of ids and class names in the file. Save your changes to the file.
4. Go to the pc_specials.css file in your editor. Within the Page Body Styles section, add a style rule
for the body element that sets the width of the page body to 95% of the browser window width
within the range of 640 to 960 pixels. Horizontally center the page body within the window by
setting the left and right margins to auto.
5. Go to the Image Styles section and create a style rule that displays all img elements as blocks
with a width of 100%.
6. Anne wants the navigation list to be displayed horizontally on the page. Go to the Horizontal
Navigation Styles section and create a style rule for every list item within a horizontal navigation
list that displays the list item as a block floated on the left margin with a width of 16.66%.
7. Display every hypertext link nested within a navigation list item as a block.
8. Next, you will create the grid styles for the March Specials page. Go to the Grid Styles section
and create a style rule for the body element that displays the element as a grid with two columns
in the proportion of 2:1 (using fr units) with a column grid gap of 20 pixels.
9. Create a style rule for the header and footer elements that has both elements span the grid
from the gridline number 1 to gridline number -1.
10. Create a style rule for the section element with the id "sub" that displays that element as a grid
consisting of three columns of equal width by repeating the column width 1fr three times.
11. Go to the Specials Styles section. In this section, you will create styles for the monthly specials
advertised by the company. Create a style rule for all div elements of the specials class that sets
the minimum height to 400 pixels and adds a 1 pixel dashed outline around the element with a
color value of rgb(71, 52, 29).
12. Go to the Award Styles section. In this section, you will create styles for the list of awards won
by Pandaisia Chocolates. Information boxes for the awards are placed within an aside element.
Create a style rule for the aside element that places it using relative positioning, sets its height to
650 pixels, and automatically displays scrollbars for any overflow content.
13. Every information box in the aside element is stored in a div element. Create a style rule that
places these elements with absolute positioning and sets their width to 30%.
14. Position the individual awards within the awardList box by creating style rules for the div
elements with id values ranging from award1 to award5 at the following (top, left) coordinates:
award1 (80px, 5%), award2 (280px, 60%), award3 (400px, 20%), award4 (630px, 45%), and
award5 (750px, 5%). (Hint: In the pc_specials.html file, the five awards have been placed in a
div element belonging to the awards class with id values ranging from award1 to award5.)
15. Save your changes to the style sheet and then open the pc_specials.html file in your browser.
Transcribed Image Text:Complete the following: 1. Use your editor to open the pc_specials_txt.html and pc_specials_txt.css files from the html03 review folder. Enter your name and the date in the comment section of each file, and save them as pc_specials.html and pc specials.css respectively. 2. Go to the pc_specials.html file in your editor. Within the document head, create links to the pc_reset2.css, pc_styles4.css, and pc_specials.css style sheets. 3. Take some time to study the content and structure of the document, paying careful attention to the use of ids and class names in the file. Save your changes to the file. 4. Go to the pc_specials.css file in your editor. Within the Page Body Styles section, add a style rule for the body element that sets the width of the page body to 95% of the browser window width within the range of 640 to 960 pixels. Horizontally center the page body within the window by setting the left and right margins to auto. 5. Go to the Image Styles section and create a style rule that displays all img elements as blocks with a width of 100%. 6. Anne wants the navigation list to be displayed horizontally on the page. Go to the Horizontal Navigation Styles section and create a style rule for every list item within a horizontal navigation list that displays the list item as a block floated on the left margin with a width of 16.66%. 7. Display every hypertext link nested within a navigation list item as a block. 8. Next, you will create the grid styles for the March Specials page. Go to the Grid Styles section and create a style rule for the body element that displays the element as a grid with two columns in the proportion of 2:1 (using fr units) with a column grid gap of 20 pixels. 9. Create a style rule for the header and footer elements that has both elements span the grid from the gridline number 1 to gridline number -1. 10. Create a style rule for the section element with the id "sub" that displays that element as a grid consisting of three columns of equal width by repeating the column width 1fr three times. 11. Go to the Specials Styles section. In this section, you will create styles for the monthly specials advertised by the company. Create a style rule for all div elements of the specials class that sets the minimum height to 400 pixels and adds a 1 pixel dashed outline around the element with a color value of rgb(71, 52, 29). 12. Go to the Award Styles section. In this section, you will create styles for the list of awards won by Pandaisia Chocolates. Information boxes for the awards are placed within an aside element. Create a style rule for the aside element that places it using relative positioning, sets its height to 650 pixels, and automatically displays scrollbars for any overflow content. 13. Every information box in the aside element is stored in a div element. Create a style rule that places these elements with absolute positioning and sets their width to 30%. 14. Position the individual awards within the awardList box by creating style rules for the div elements with id values ranging from award1 to award5 at the following (top, left) coordinates: award1 (80px, 5%), award2 (280px, 60%), award3 (400px, 20%), award4 (630px, 45%), and award5 (750px, 5%). (Hint: In the pc_specials.html file, the five awards have been placed in a div element belonging to the awards class with id values ranging from award1 to award5.) 15. Save your changes to the style sheet and then open the pc_specials.html file in your browser.
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

Blurred answer
Knowledge Booster
Hyperlinks
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education