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 semi-transparent value hsla(0, 0%, 42%, 0.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.7) and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.7).   CODE BELOW:  @charset "UTF-8"; @font-face {   font-family: Champagne;   src: url("cac_champagne.woff") format("woff"),        url("cac_champagne.ttf") format("truetype

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter2: Getting Started With Css: Designing A Website For A Fitness Club
Section: Chapter Questions
Problem 11CP1
icon
Related questions
Question

QUESTION: 

Navigation Lists

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 semi-transparent value hsla(0, 0%, 42%, 0.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.7) and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.7).

 

CODE BELOW: 

@charset "UTF-8";

@font-face {
  font-family: Champagne;
  src: url("cac_champagne.woff") format("woff"),
       url("cac_champagne.ttf") format("truetype");
}

@font-face {
  font-family: Grunge;
  src: url("1942.woff") format("woff"),
       url("1942.ttf") format("truetype");
}

@font-face {
  font-family: Dobkin;
  src: url("DobkinPlain.woff") format("woff"),
       url("DobkinPlain.ttf") format("truetype");
}

p {
  margin: 0;
  padding: 5px 25px 25px 25px;
}

body > p {
  font-size: 1.1em;
  text-align: center;
}

address {
  font-style: normal;
  font-size: 0.9em;
  text-align: center;
  padding: 10px 0;
}

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 2
   Case Problem 1
   
   PHCT Typographic Style Sheet
   
   Filename: ph_styles.css

*/


/* Structural Styles */
html {
   background-color: hsl(91, 8%, 56%);
}

body {
   background-color: hsl(58, 31%, 84%);
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

header {
   background-color: black;
}



/* Navigation Styles */





/* Section Styles */




/* Definition List Styles */


Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps

Blurred answer
Knowledge Booster
Hyperlinks
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.
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning