Next, go to the ph$\_$plays.html file and within the document head create links to the ph$\_$layout.css and ph$\_$styles.css style sheet files. Take some time to study the content and structure of the document and then close the file.

Go to the ph$\_$styles.css file in your editor, and at the top of the file before the comment section, define the character encoding used in the document as utf$-8.$

Randall has several web fonts that he wants used for the titles of the plays produced by the company. Add the following web fonts to the style sheet, using @font$-$face rules before the comment section:

The Champagne font using the cac$\_$champagne.woff and cac$\_$champagne.ttf files.

The Grunge font using the $1942.$woff and $1942.$ttf files.

The Dobkin font using the DobkinPlain.woff and DobkinPlain.ttf files.

Structural Styles

Go to the "Structural Styles" section, creating a style rule that sets the background color of the html element to the value hsl$(91,8\%,56\%).$

Add a style rule for the body element to set the background color to the value hsl$(58,31\%,84\%)$ and the font of the body text to the font stack: $$Palatino Linotype$,$Book Antiqua$,$ Palatino, serif.

Create a style rule for the header element that sets the background color to black.

Create a style rule for every paragraph that sets the margin space to $0$ pixels and the padding space to $5$ pixels on top and $25$ pixels on the right, bottom, and left. For paragraphs that are direct children of the body element, create a style rule that sets the font size to $1\mathrm{.}1$em and horizontally centers the paragraph text.

Create a style rule for the address element that sets the font style to normal with a font size of $0\mathrm{.}9$em$,$ horizontally centered on the page. Set the top and bottom padding to $10$ pixels.

Navigation Styles

Next, you$$ll format the appearance of navigation lists on the page. Go to the "Navigation Styles" section and create a style rule for the nav a selector that displays the hypertext links using the font stack: $$Trebuchet MS$,$ Helvetica, sans$-$serif. Set the top and bottom padding to $10$ pixels.

For every unvisited and previously visited hypertext link within a nav element, set the text color to white, remove underlining from the link text, and set the background color to the semitransparent value hsla$(0,0\%,42\%,0\mathrm{.}4).$

For every active or hovered link in a nav element, set the text color to the semi$-$transparent value hsla$(0,0\%,100\%,0\mathrm{.}7)$ and set the background color to the semi$-$transparent value hsla$(0,0\%,42\%,0\mathrm{.}7).$

Section Styles

Go to the "Section Styles" section of the style sheet. In this section, you$$ll define the appearance of the four playbills. You$$ll start with the h$1$ headings from the sections.

Create a style rule for the section.playbill h$1$ selector that sets the font size to $3$em and the font weight to normal. Set the margin space around the h$1$ headings to $0$ pixels. Set the padding space to $20$ pixels on top, $0$ pixels on the right, $10$ pixels on the bottom, and $20$ pixels on the left.

Each playbill section is identified by a different ID value ranging from play$1$ to play$4.$ Create style rules that set a different background color for each playbill using the following background colors:

ID: play$1$ set to hsl$(240,100\%,88\%)$

ID: play$2$ set to hsl$(25,88\%,73\%)$

ID: play$3$ set to hsl$(0,100\%,75\%)$

ID: play$4$ set to hsl$(296,86\%,86\%)$

Each playbill section heading will also have a different font. For the h$1$ headings within the four different playbills, create style rules to apply the following font stacks:

ID: play$1$ set to Champagne, cursive

ID: play$2$ set to Grunge, $$Times New Roman$,$ Times, serif

ID: play$3$ set to Impact, Charcoal, sans$-$serif

ID: play$4$ set to Dobkin, cursive

Description List Styles

Randall has put the author and the director of each play within a description list. Format these description lists now by going to the "Description List Styles" section and creating a style rule for the dt element that sets the font size to $1\mathrm{.}3$em$,$ the font weight to bold, and the font color to the semi$-$transparent value hsla$(0,0\%,0\%,0\mathrm{.}4).$

Create a style rule for every dd element to set the font size to $1\mathrm{.}3$em$,$ the left margin space to $0$ pixels, and the bottom margin space to $10$ pixels.