Outer Table Layout Open the jpf_sudoku.css file. Start by creating styles for the outer table. Go to the Table Styles section and create a style rule for the table element of the spuzzle class that: sets the table borders to collapse, sets the top/bottom margins to 0 pixels and the left/right margins to auto , and sets the width to 90%. Outer Table Elements For every td element, create a style rule that: adds a 5-pixel outset gray border and sets the width to 33.3% For every th element, create a style rule that: sets the font color to gray and sets the right and bottom padding space to 10 pixels. Inner Table Layout Next, you create styles for the inner table that is placed within each cell of the outer table. Go to the Inner Table Styles section and create a style rule for the table element of the subTable class that: sets the table borders to collapse and sets the width to 100% Inner Table Elements For every td element within the subTable table, create a style rule that: adds an inset box shadow with offset values of 0 pixels in the horizontal and vertical directions with a blur of 15 pixels, adds a 1-pixel solid black border, displays the text in a blue font, sets the cell height to 40 pixels, and centers the cell text in the horizontal and vertical directions. For every td element that is nested within a td element of the goldBox class, create a style rule that sets the background color to rgb(228, 199, 42). For every td element that is nested within a td element of the greenBox class, create a style rule that sets the background color to rgb(203, 229, 130).

CODE I HAVR IS BELOW:

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 6

Case Problem 2

Sudoku Style Sheet

Author:Xavier Phillips

Date:1/30/2023

Filename: jpf_sudoku.css

*/

/* Table Styles */

table.spuzzle {

border-collapse: collapse;

margin-top: 0px;

margin-bottom: 0px;

margin-left: auto;

margin-right: auto;

width: 90%;

}

table.spuzzle td {

border: 5px outset gray;

width: 33.3%;

}

table.spuzzle th {

color: gray;

padding: 10px;

}

/* Inner Table Styles */

table.subTable {

border-collapse: collapse;

width: 100%;

}

table.subTable td {

box-shadow: 0px 0px 15px inset;

border: 1px solid black;

color: blue;

height: 40px;

text-align: center;

vertical-align: middle;

}

td.goldBox {

background-color: rgb(228, 199, 42);

}

td.greenBox {

background-color: rgb(203, 229, 130);

}