Question: Go to the Customer Comment Styles section. In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ul element with the id comments, create a style rule that sets the width to 75% and centers the element by setting the top/bottom margin to 40 pixels and the left/right margin to auto. Karen wants the list items to appear in two columns on the page. In the same section, create a style rule for every list item in the comments list that: displays the item as a block with a width of 50% floated on the left and sets the size of the bottom margin to 30 pixels. Every customer comment is accompanied by an image of the student. Karen wants these images displayed to the left of the comment. Create a style rule to display the image within each comment list item as a block with a width of 20%, floated on the left, and with a left/right margin of 5%. Create a style rule for every paragraph nested within a customer list item that floats the paragraph on the left margin with a width of 70%. CODE BELOW: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 3 Case Problem 1 Layout styles for Slate and Pencil Tutoring Author: Date: Filename: sp_layout.css */ /* Window and Body Styles */ html { height: 100%; } body { width: 95%; min-width: 640px; max-width: 960px; margin: 0 auto; min-height: 100%; } header, ul, nav, li, a { box-sizing: border-box; } /* Row Styles */ /* Page Header Styles */ /* Horizontal Navigation List Styles */ /* Topics Styles */ #topics li { display: block; width: 20%; float: left; margin-left: 0%; margin-right: 1.5%; } #topics li:first-child { margin-left: 7.75%; } #topics li:last-child { margin-right: 7.75%; } #topics li img { display: block; width: 50%; margin-left: auto; margin-right: auto; } /* HR Styles */ hr { width: 50%; } /* Customer Comment Styles */ /* Footer Styles */ footer { clear: both; }

Question: Go to the Customer Comment Styles section. In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ul element with the id comments, create a style rule that sets the width to 75% and centers the element by setting the top/bottom margin to 40 pixels and the left/right margin to auto. Karen wants the list items to appear in two columns on the page. In the same section, create a style rule for every list item in the comments list that: displays the item as a block with a width of 50% floated on the left and sets the size of the bottom margin to 30 pixels. Every customer comment is accompanied by an image of the student. Karen wants these images displayed to the left of the comment. Create a style rule to display the image within each comment list item as a block with a width of 20%, floated on the left, and with a left/right margin of 5%. Create a style rule for every paragraph nested within a customer list item that floats the paragraph on the left margin with a width of 70%. CODE BELOW: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 3 Case Problem 1 Layout styles for Slate and Pencil Tutoring Author: Date: Filename: sp_layout.css / / Window and Body Styles / html { height: 100%; } body { width: 95%; min-width: 640px; max-width: 960px; margin: 0 auto; min-height: 100%; } header, ul, nav, li, a { box-sizing: border-box; } / Row Styles / / Page Header Styles / / Horizontal Navigation List Styles / / Topics Styles / #topics li { display: block; width: 20%; float: left; margin-left: 0%; margin-right: 1.5%; } #topics li:first-child { margin-left: 7.75%; } #topics li:last-child { margin-right: 7.75%; } #topics li img { display: block; width: 50%; margin-left: auto; margin-right: auto; } / HR Styles / hr { width: 50%; } / Customer Comment Styles / / Footer Styles */ footer { clear: both; }

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter7: Designing A Web Form: Creating A Survey Form

Section: Chapter Questions

Problem 22CP3

See similar textbooks

Related questions

Question

CODE BELOW:

@charset "utf-8";

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 3

Case Problem 1

Layout styles for Slate and Pencil Tutoring

Author:

Date:

Filename: sp_layout.css

/* Window and Body Styles */

html {

height: 100%;

}

body {

width: 95%;

min-width: 640px;

max-width: 960px;

margin: 0 auto;

min-height: 100%;

}

header, ul, nav, li, a {

box-sizing: border-box;

}

/* Row Styles */

/* Page Header Styles */

/* Horizontal Navigation List Styles */

/* Topics Styles */

#topics li {

display: block;

width: 20%;

float: left;

margin-left: 0%;

margin-right: 1.5%;

}

#topics li:first-child {

margin-left: 7.75%;

}

#topics li:last-child {

margin-right: 7.75%;

}

#topics li img {

display: block;

width: 50%;

margin-left: auto;

margin-right: auto;

}

/* HR Styles */

hr {

width: 50%;

}

/* Customer Comment Styles */

/* Footer Styles */

footer {

clear: both;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

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.