Use yoga.css: body { background-color:#3F2860; color:#3F2860; font-family: \"Ver

Question

Use yoga.css:

body {

background-color:#3F2860;

color:#3F2860;

font-family: "Verdana", sans-seri;

}

header{

background-image: url("lilyheader.jpg");

text-align: center;
}

h1 {

padding-top: 50px;
padding-left: 2em;

}

nav{

padding:1em;

text-align: center;
font-style: bold;

}

nav.a{

text-decoration: none;
}

nav{

font-style: bold;

}

.studio

{font-style: italic;

}

footer{

padding:1em;

background-color:#9BC1C2;

font-size:inherit;// small tag

font-style: italic; // for italic tag

text-align: center;
}
nav{

font-style: bold;

}

#wrapper {

background-color:#F5F5F5;

max-width: 1280px;

min-width: 1000px;
width: 80%;
margin-right: auto;
margin-left: auto;

}

main{

padding-right: 2em;

padding-left: 2em;

}

img

{

padding-right: 1em;

padding-left: 1em;

}

#hero

{

text-align: center;

}

1. Configure the universal selector with a box-sizing: border-box style declaration. * { box-sizing: border-box; }

2. Edit the styles for the wrapper id. Change the min-width to 1200px. Change max-width to 1480px.

3. Configure the left-column navigation area. Remove the text-align declaration. Add style declarations to configure this area to float to the left with a width of 160 pixels.

4. Configure the navigation hyperlinks to look like buttons: Edit the style for the nav a selector. Keep the text-decoration style declaration. Configure the styles to use block display, centered text, bold font, a 3 pixel gray (#CCCCCC) outset border, lem padding, and a 1em bottom margin.

Configure the :link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #3F2860 (unvisited hyperlinks), #497777 (visited hyperlinks), and #A26100 (hover). Also configure a 3 pixel inset #333333 border for hyperlinks in the hover state.

nav a:link { color: #3F2860; }

nav a:visited { color: #497777; }

nav a:hover { color: #A26100; border: 3px inset #333333; }

Explanation / Answer

//I am Giving CSS code as per your requirement

*{   
   box-sizing: border-box;
}

body {
background-color: #3F2860;
color: #3F2860;
font-family: "Verdana", sans-serif;
}

header {
background-image: url("lilyheader.jpg");
text-align: center;
}

h1 {
padding-top: 50px;
padding-left: 2em;
}

nav {
padding: 1em;
font-style: bold;
float: left;
width: 160px;
}

nav a {
text-decoration: none;
display:block;
text-align:center;
font-weight: bold;
border: 3px outset #ccc;
padding: 1em;
margin-bottom: 1em;   
}

nav a:link{
   color: #3F2860;
}

nav a:visited{
   color: #497777;
}

nav a:hover{
   color: #A26100;
   border:3px inset #333;
}

nav {
//font-style: bold; wrong
font-weight: bold
}

.studio {
font-style: italic;
}

footer {
padding: 1em;
background-color: #9BC1C2;
font-size: inherit; // small tag
font-style: italic; // for italic tag
text-align: center;
}

nav {
font-style: bold;
}

#wrapper {
background-color: #F5F5F5;
max-width: 1480px;
min-width: 1200px;
width: 80%; // width is not required if you're specifying min-width and max-width
margin-right: auto;
margin-left: auto;
}

main {
padding-right: 2em;
padding-left: 2em;
}

img {
padding-right: 1em;
padding-left: 1em;
}

#hero {
text-align: center;
}

Related Questions

Navigate

• Browse (All)
• Browse U
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.