10. Return to the dlr_tables2.css file in your editor and go to the Table Styles section. Create a style rule for the programs table that: a) sets the width of the table to 100%, b) adds a 15-pixel outset border with a color value of rgb(151, 151, 151), c) defines the borders so that they are collapsed around the table, and d) sets the font family to the font stack: Arial, Verdana, and sans-serif.

11. Create a style rule that sets the height of every table row to 25 pixels.

12. Create a style rule for every th and td element that: a) adds a 1-pixel solid gray border, b) aligns the cell content with the top of the cell, and c) sets the padding space 5 pixels. 13. Go to the Table Caption Styles section and create a style rule that places the caption element at the bottom of the table and centered horizontally.

14. Go to the Table Column Styles section. For col elements belonging to the timeColumn class, create a style rule that sets the column width to 10% and the background color to the value rgb(215, 205, 151).

15. For col elements of the wDayColumns class, create a style rule that sets the column width to 11% and the background color to rgb(236, 255, 21 1).

16. For col elements of the wEndColumns class, create a style rule that sets the column width to 17% and the background color to rgb(255, 231, 255).

17. Kyle wants you to format the table heading cells from the table header row. Go to the Table Header Styles section and create a style rule to set the font color of the text within the thead element to white and the background color to a medium green with the value rgb(105, 177, 60).

18. The different cells in the table header row should be formatted with different text and background colors. Using the first-of-type pseudo-class, create a style rule that changes the background color of the first th element with the thead element to rgb(153, 86, 7).

19. Using the nth-of-type pseudo-class, create style rules that change the background color of the 7th and 8th th elements within the thead element to rgb(153, 0, 153).

20. Kyle wants the table footer to be formatted in a different text and background color from the rest of the table. Go to the Table Footer Styles section. Create a style rule for the tfoot element that sets the font color to white and the background color to black.

21. Save your changes to the dlr_tables2.css style sheet. 2 22. Return to the dlr_columns2.css file in your editor. Kyle wants the introductory paragraph to appear in a three column layout for desktop devices. Within the Column Styles section, create a media query for screen devices with minimum widths of 641 pixels.

23. Within the media query, create a style rule for the paragraph element that: a) sets the column count to 3, b) sets the column gap to 20 pixels, and c) adds a 1-pixels solid black dividing line between columns. (Note: Remember to use web extensions to provide support for older browsers.)

24. Save your changes to the dlr_columns2.css style sheet and then open the dlr_mornings.html file in your browser and verify that the table layout and design resemble that shown in Figure 6-48.

@charset "utf-8";

/* New Perspectives on HTML and CSS Tutorial 6 Review Assignment

Tables Style Sheet Date: 7/9/2018

Filename: dlr_tables2.css

*/

/* Table Styles */

/* Table Caption Styles */

/* Table Column Styles */

/* Table Header Styles */

/* Table Footer Styles */

@charset "utf-8";

/* New Perspectives on HTML and CSS Tutorial 6 Review Assignment

Columns Style Sheet Date: 7/9/2018

Filename: dlr_columns2.css

*/

/* Column Styles */