I need to add CSS selectors to this html. Here\'s the before and after. Before.

ID: 3850316 • Letter: I

Question

I need to add CSS selectors to this html. Here's the before and after.

Before.

After.

Sorry here's the editable code.

<title>Sparky the Sun Devil</title>
<style type="text/css">
body /* write an element selector that targets all body elements */
*/ Add comments where necessary */
{margin:0;
   padding:0;
   background-color: #CCC;
   font-family:Arial, Helvetica, sans-serif;
   }
/* write an id selector that targets all wrapper elements */
   {margin:10px;
   padding:0;
   width:1000px;
   height:750px;
   }
/* write an id selector that targets all header elements */
{width:990px;
   height:90px;
   background-color:#990033;
   margin:0;
   padding:5px;
}
/* write an id selector that targets all sideBar elements */
{width:200px;
   height:630px;
   margin:0;
   padding:0;
   background-color: #ffb310;
   float:left;
   }
/* write an class selector that targets all contact elements */
   {width:180px;
   height:auto;
   margin:5px;
   padding:5px;
   background-color:#990033;
   color:#FFFFFF;
   }
/*write a child selector that targets all unordered lists with list items*/
   {list-style:none;
   }
/* write an id selector that targets all mainContent elements */
   {width:790px;
   height:620px;
   background-color:#fff;
   float:right;
   margin:0;
   padding:5px;
   }
/* write an descendent selector that targets all heading one's in the ID of header */
   {font-size:2.5em;
   color: #FFFFFF;
   }
/* write an element-specific selector that targets all span's in the class year */
   {color:#ffb310;
   }
/* write an group selector that targets all paragraph and quote elements */
   {font-size:1em;
   color:#666666;
   }
/* write an element selector that targets all quote tags */
   {font-style:italic;
   }
h1
   {font-size:2em;
   color:#000000;
   }
/* write an element selector that targets all heading two tags */
   {font-size:1.5em;
   color:#000000;
   }
/* write an element selector that targets the hyperlinks */
   {font-weight:bold;
   text-decoration:underline;
   color:#FFB310;
   font-size:1em;
   }
/* write an adjacent selector that targets paragraph tags that follow heading one tags */
   {color:#FFB310;
   }
/* write an attribute selector that targets span tags with the class of year */
   {font-size:1.25em;
   }
/* write an element-specific selector that targets all unordered lists with the class nav --*/
   {margin-bottom: 15px;
   margin-left:0;
   }
ul.nav li
   {margin-bottom:2px;
   }
/* write an element-specific selector that targets unordered lists in the class nav with a descendent selector targeting hyperlinks */
   {padding: 5px 5px 5px 15px;
   display: block;
   width: 100px;
   text-decoration: none;
   background:#990033;
   color:#ffffff;
   }
ul.nav a:hover, ul.nav a:active
   {background:#ffffff;
   color: #000;
   }
/* write an dynamic pseudo-class selector targeting hyperlinks in the visited link state */
   {color:#CCCCCC;
   }
/* write an pseudo-element selector targeting the first letter of a paragraph that adjacently follows a heading one tag */
   {font-size:2em;
   }
</style>
</head>

<div id="header">
<h1>Sparky the Sun Devil</h1>
</div>

<div id="sideBar">
   <ul class="nav">
       <li><a href="http://asu.edu/">Sparky's Home</a></li>
<li><a href="https://magazine.asu.edu/september-2015/articles/featured-articles/look-life-behind-costume-asu%E2%80%99s-beloved-mascot">Our Mascot</a></li>
       <li><a href="https://eoss.asu.edu/sites/default/files/SparkyFAQs.pdf">Sparky FAQs</a></li>
        <li><a href="http://www.asu.edu/vppa/photogallery/fangallery/1.htm">Sparky Gallery</a></li>
   </ul>
<h2>Contact Me:</h2>
<ul class="contact"><li>Phone: (480) Sun-Devil</li>
   <li>Email: <a href="mailto:sparky@asu.edu">sparky@asu.edu</a></li>
<li>Website: <a href="http://asu.edu/">http://asu.edu</a></li>
</ul>
</div>

<div id="mainContent">
   <h1>Sparky the Sun Devil</h1>
   <p>My homepage is a showcase of my talents and interests.</p>
   <p>Please surf my site to get to know me and my work better. If you are interested in hiring me, please contact my via phone or email. </p>
<q>Fight, Devils Down The Field! Fight With Your Might and Don't Ever Yield!</q>

<h2>The real life of Sparky</h2>
<p>Find out more about my the life of Sparky by viewing my <a href="http://cronkitezine.asu.edu/spring2005/sparky.html">resume</a>.</p>

<h2>Gallery</h2>
<p>See more about me and the sun devil spirit by viewing my <a href="http://www.asu.edu/vppa/photogallery/fangallery/1.htm">gallery</a>.</p>

<h2>About Me</h2>
<p>I am the official mascot of Arizona State University. Originally the ASU athletic teams' mascot was an owl, then became a "Normal" (named for the Tempe Normal School), then was later changed to a bulldog. The State Press, the student newspaper, ran frequent appeals during the fall of <span class="year">1946</span>, urging the Bulldog to be replaced by the new Sun Devil. On November 8 of that year the student body voted 819 to 196 to make the change. On November 20, as reported by the Arizona Republic, the student council made it official. The following day, the first Arizona State team played as the Sun Devils. In <span class="year">1948</span>, an alumnus and Disney illustrator by the name of Bert Anthony designed Sparky, an imp with a trident (also described as a pitchfork).</p>
</div>

</div>

</body></html>

Sparky the Sun Devil Spady Home Spady EAQs Spark Gallen Contact Me: Phone: (480) Sun-Devil Email uparly edu Website http asu edu Sparky the Sun Devil My homepage is a showcase ofmy talents and interests. Please surf my site to get to know me and my work better. If you are interested in hiring me, please contact my via phone or email "Fight, Devils Down The Field! Fight With Your Might and DontEver Yield!" The real life of Sparky Find out more about my the life of Sparky by viewing my resume. Gallery See more about me and the sun devil spirit by viewing my gallery, About Me I am the official mascot of Arizona State University. originally the ASU athletic teams mascot was an owl, then became a "Nommal" (named for the Tempe Normal School then was later changed to a bulldog. The State Press, the stud appeals during the fall of 1946, urging the Bulldog to be replaced by the new Sur Devil. On November s of thatyear the student body voted S19 to 196 to male the change. On November 20, as reported by the Arizona Republic, the s official The following day, the firstArizona State team played as the Sun Devils. In 1948, an alumunus and Disney illustrator by the name ofBert Anthony designed Sparly, an imp with atrdent Galso described as a pitchfork.

Explanation / Answer

Hi,

1. you can add CSS to your fields by using selectors. You can use the element name as a selector.

example : if you want to apply a style for all paragraph elements then you can write some thing like this

your style

}

this will apply style to all the <p> elements in your page

2. If you want to apply css for a particular element then you can do it by using id or class

if you use id please use '#' so that it can identify it as id

example:

<style>

#para {your style}

</style>

This is add style to only that particular element with id as 'para'.

If you use class to define a style then use '.'

example :

<style>

.para {your style}

</style>

This will apply style to all the elements with that class.

Note: remember id must be unique in the page.

Here is your code with selectors applied. check it

=======================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sparky the Sun Devil</title>
<style>
body /* write an element selector that targets all body elements */
/* Add comments where necessary */
{margin:0;
padding:0;
background-color: #CCC;
font-family:Arial, Helvetica, sans-serif;
}
/* write an id selector that targets all wrapper elements */
#wrapper {margin:10px;
padding:0;
width:1000px;
height:750px;
}
/* write an id selector that targets all header elements */
#header {width:990px;
height:90px;
background-color:#990033;
margin:0;
padding:5px;
}
/* write an id selector that targets all sideBar elements */
#sideBar {width:200px;
height:630px;
margin:0;
padding:0;
background-color: #ffb310;
float:left;
}
/* write an class selector that targets all contact elements */
.contact, .nav {width:180px;
height:auto;
margin:5px;
padding:5px;
background-color:#990033;
color:#FFFFFF;
}
/*write a child selector that targets all unordered lists with list items*/
.nav {list-style:none;
}
/* write an id selector that targets all mainContent elements */
#mainContent {width:790px;
height:620px;
background-color:#fff;
float:right;
margin:0;
padding:5px;
}
/* write an descendent selector that targets all heading one's in the ID of header */
h1 {font-size:2.5em;
color: #FFFFFF;
}
/* write an element-specific selector that targets all span's in the class year */
span {color:#ffb310;
}
/* write an group selector that targets all paragraph and quote elements */
p {font-size:1em;
color:#666666;
}
/* write an element selector that targets all quote tags */
{font-style:italic;
}
h1
{font-size:2em;
color:#000000;
}
/* write an element selector that targets all heading two tags */
h2{font-size:1.5em;
color:#000000;
}
/* write an element selector that targets the hyperlinks */
{font-weight:bold;
text-decoration:underline;
color:#FFB310;
font-size:1em;
}
/* write an adjacent selector that targets paragraph tags that follow heading one tags */

#para{color:#FFB310;
}
/* write an attribute selector that targets span tags with the class of year */
{font-size:1.25em;
}
/* write an element-specific selector that targets all unordered lists with the class nav --*/
{margin-bottom: 15px;
margin-left:0;
}
ul.nav li
{margin-bottom:2px;
}
/* write an element-specific selector that targets unordered lists in the class nav with a descendent selector targeting hyperlinks */
{padding: 5px 5px 5px 15px;
display: block;
width: 100px;
text-decoration: none;
background:#990033;
color:#ffffff;
}
ul.nav a:hover, ul.nav a:active
{background:#ffffff;
color: #000;
}
/* write an dynamic pseudo-class selector targeting hyperlinks in the visited link state */
{color:#CCCCCC;
}
/* write an pseudo-element selector targeting the first letter of a paragraph that adjacently follows a heading one tag */
{font-size:2em;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Sparky the Sun Devil</h1>
</div>
<div id="sideBar">
<ul class="nav">
<li><a href="http://asu.edu/">Sparky's Home</a></li>
<li><a href="https://magazine.asu.edu/september-2015/articles/featured-articles/look-life-behind-costume-asu%E2%80%99s-beloved-mascot">Our Mascot</a></li>
<li><a href="https://eoss.asu.edu/sites/default/files/SparkyFAQs.pdf">Sparky FAQs</a></li>
<li><a href="http://www.asu.edu/vppa/photogallery/fangallery/1.htm">Sparky Gallery</a></li>
</ul>
<h2>Contact Me:</h2>
<ul class="contact"><li>Phone: (480) Sun-Devil</li>
<li>Email: <a href="mailto:sparky@asu.edu">sparky@asu.edu</a></li>
<li>Website: <a href="http://asu.edu/">http://asu.edu</a></li>
</ul>
</div>
<div id="mainContent">
<h1>Sparky the Sun Devil</h1>
<p id="para">My homepage is a showcase of my talents and interests.</p>
<p>Please surf my site to get to know me and my work better. If you are interested in hiring me, please contact my via phone or email. </p>
<q>Fight, Devils Down The Field! Fight With Your Might and Don't Ever Yield!</q>
<h2>The real life of Sparky</h2>
<p>Find out more about my the life of Sparky by viewing my <a href="http://cronkitezine.asu.edu/spring2005/sparky.html">resume</a>.</p>

<h2>Gallery</h2>
<p>See more about me and the sun devil spirit by viewing my <a href="http://www.asu.edu/vppa/photogallery/fangallery/1.htm">gallery</a>.</p>

<h2>About Me</h2>
<p>I am the official mascot of Arizona State University. Originally the ASU athletic teams' mascot was an owl, then became a "Normal" (named for the Tempe Normal School), then was later changed to a bulldog. The State Press, the student newspaper, ran frequent appeals during the fall of <span class="year">1946</span>, urging the Bulldog to be replaced by the new Sun Devil. On November 8 of that year the student body voted 819 to 196 to make the change. On November 20, as reported by the Arizona Republic, the student council made it official. The following day, the first Arizona State team played as the Sun Devils. In <span class="year">1948</span>, an alumnus and Disney illustrator by the name of Bert Anthony designed Sparky, an imp with a trident (also described as a pitchfork).</p>
</div>
</div>

</body></html>

Please specify if you still have any doubts. I will clarify them.

Navigate

I need to add 7 segment decoder to the end of the most right shiftregister when

I need to add Exception on this program.. This is what professor want : If the u

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

I need to add CSS selectors to this html. Here\'s the before and after. Before.

Question

Explanation / Answer

Related Questions

Navigate