***I have the files needed to complete the remainder of the assingment. I just need help setting up the stylesheets. The stylesheets should be named ce_grids.css and ce_styles.css.*** Create two separate CSS stylesheets including the following steps:

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

***I have the files needed to complete the remainder of the assingment. I just need help setting up the stylesheets. The stylesheets should be named ce_grids.css and ce_styles.css.***

Create two separate CSS stylesheets including the following steps:

3. Save your changes to the file and then go to the ce_grids.css file in your editor.
4. Within the Grid Rows Styles section, create a style rule to set the width of each div element of the row class to 100% of its
container, displaying the row only when it's clear of floated content on both margins.
5. Create a style rule to allow grid rows to expand around all of their floated content.
6. Go to the Grid Columns Style section. Create a style rule to float every div element whose class name begins with column on
the left.
7. Create style rules for div elements belonging to the following classes: column100, column50, column33, column67, column25,
column75, column20, column40, column60, and column80 so that the width of each column is a percent equal to the size
value. For example, div elements belonging to the column100 class should have widths of 100%, column50 should have
widths of 50%, and so forth.
8. Go to the Grid Spacing Styles section. Create a style rule to apply the Border Box model to the div elements belonging to the
following classes: container, row, classes that begin with column, cell, and a elements nested within div elements belonging to
the cell class.
9. Save your changes to the ce_grids.css file and then go to the ce_styles.css file in your editor.
10. Go to the Window and Body Styles section and create a style rule to set the background color of the browser window to
rgb(101, 101, 101).
11. Create a style rule for the body element that: a) sets the background color to white, b) sets the default font to the stack:
Verdana, Geneva, Arial, sans-serif, c) centers the page by setting the top/bottom margins to 20 pixels and the left/right
margins to auto, and d) sets the width of the page body to 95% ranging from 320 pixels up to 960 pixels.
12. Insert style rules to display all images in the document as blocks with widths of 100%.
13. Insert a style rule to remove all underlining from hypertext links within navigation lists.
14. Go to the Body Header Styles section. Richard wants you to format the links that are displayed in the header at the top of the
web page. To format the links, create a style rule that sets the background color of the body header to rgb(191, 68, 70) and
sets the height to 40 pixels.
15. Create a style that displays all list items within the navigation unordered list in the body header as blocks, floated on the left,
with a right margin of 20 pixels and top/bottom padding of 10 pixels with left/right padding of 0 pixels.
16. Create a style rule to set the font size of hypertext links within the body header navigation list to 0.9em with a color value of
rgb(51, 51, 51) for both visited and non-visited links. Change the text color to rgb(255, 211, 211) when the user hovers over or
activates those links.
17.Go to the DIV Container Styles section. Richard wants you to add some additional spacing between the images and the edge
of the page body. To add this spacing, create a style rule that sets the right and bottom padding of the div element with the id
container to 8 pixels.
18. For every a element within a div element belonging to the cell class, create a style rule to: a) display the hypertext link as a
block with a width of 100% and b) set the left and top padding to 8 pixels.
19. Richard wants the page footer to be displayed in the bottom right corner of the web page. To place the footer in this position,
go to the Windows and Body Styles section and set the position property of the body element to relative, then go to the
Footer Styles section and create a style rule for the footer element to do the following: a) set the position property of the
footer to absolute with a right coordinate and bottom coordinate of 8 pixels, b) set the text of the footer to rgb(143, 33, 36), c)
right-align the footer text, and d) set the font size to 2vmin so that the text resizes automatically with the width and/or height
of the browser window.
Transcribed Image Text:3. Save your changes to the file and then go to the ce_grids.css file in your editor. 4. Within the Grid Rows Styles section, create a style rule to set the width of each div element of the row class to 100% of its container, displaying the row only when it's clear of floated content on both margins. 5. Create a style rule to allow grid rows to expand around all of their floated content. 6. Go to the Grid Columns Style section. Create a style rule to float every div element whose class name begins with column on the left. 7. Create style rules for div elements belonging to the following classes: column100, column50, column33, column67, column25, column75, column20, column40, column60, and column80 so that the width of each column is a percent equal to the size value. For example, div elements belonging to the column100 class should have widths of 100%, column50 should have widths of 50%, and so forth. 8. Go to the Grid Spacing Styles section. Create a style rule to apply the Border Box model to the div elements belonging to the following classes: container, row, classes that begin with column, cell, and a elements nested within div elements belonging to the cell class. 9. Save your changes to the ce_grids.css file and then go to the ce_styles.css file in your editor. 10. Go to the Window and Body Styles section and create a style rule to set the background color of the browser window to rgb(101, 101, 101). 11. Create a style rule for the body element that: a) sets the background color to white, b) sets the default font to the stack: Verdana, Geneva, Arial, sans-serif, c) centers the page by setting the top/bottom margins to 20 pixels and the left/right margins to auto, and d) sets the width of the page body to 95% ranging from 320 pixels up to 960 pixels. 12. Insert style rules to display all images in the document as blocks with widths of 100%. 13. Insert a style rule to remove all underlining from hypertext links within navigation lists. 14. Go to the Body Header Styles section. Richard wants you to format the links that are displayed in the header at the top of the web page. To format the links, create a style rule that sets the background color of the body header to rgb(191, 68, 70) and sets the height to 40 pixels. 15. Create a style that displays all list items within the navigation unordered list in the body header as blocks, floated on the left, with a right margin of 20 pixels and top/bottom padding of 10 pixels with left/right padding of 0 pixels. 16. Create a style rule to set the font size of hypertext links within the body header navigation list to 0.9em with a color value of rgb(51, 51, 51) for both visited and non-visited links. Change the text color to rgb(255, 211, 211) when the user hovers over or activates those links. 17.Go to the DIV Container Styles section. Richard wants you to add some additional spacing between the images and the edge of the page body. To add this spacing, create a style rule that sets the right and bottom padding of the div element with the id container to 8 pixels. 18. For every a element within a div element belonging to the cell class, create a style rule to: a) display the hypertext link as a block with a width of 100% and b) set the left and top padding to 8 pixels. 19. Richard wants the page footer to be displayed in the bottom right corner of the web page. To place the footer in this position, go to the Windows and Body Styles section and set the position property of the body element to relative, then go to the Footer Styles section and create a style rule for the footer element to do the following: a) set the position property of the footer to absolute with a right coordinate and bottom coordinate of 8 pixels, b) set the text of the footer to rgb(143, 33, 36), c) right-align the footer text, and d) set the font size to 2vmin so that the text resizes automatically with the width and/or height of the browser window.
Expert Solution
steps

Step by step

Solved in 6 steps with 7 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY