Why aren\'t the style settings for the class selector \"highlight\" showing in m
ID: 3736562 • Letter: W
Question
Why aren't the style settings for the class selector "highlight" showing in my index2.html?
index2.html
<!--
Built for the Pluralsight Course for new Web Developers
-->
<!DOCTYPE html>
<html>
<head>
<title>Github Hub</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/site2.css" />
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="/index.html">Home</a>
</li>
<li><a href="/contact.html">Contact</a>
</li>
<li><a href="/about.html">About</a>
</li>
</ul>
</nav>
<div>
<img src="img/logo.gif" class="bordered-image" />
</div>
<div>This is a site to search Github for interesting projects.</div>
</header>
<section id="main">
<p>In this
<em>sample site</em>, we'll show a list of <a href="http://github.com">Github</a> projects
<span>and the data</span>about
<strong>those projects</strong>.</p>
<form action="http://wilder.azurewebsites.net/echo" method="POST" class="bordered-image simple-form">
<label for="searchPhrase">Search Phrase:</label>
<input type="text" name="searchPhrase" id="searchPhrase" />
<br/>
<input type="checkbox" name="useStars" id="useStars" checked="true" />
<label for="useStars">Use Stars?</label>
<br/>
<label for="langChoice">Language:</label>
<select name="langChoice" id="langChoice">
<option>All</option>
<option>JavaScript</option>
<option selected>C#</option>
<option>Java</option>
<option>Ruby</option>
</select>
<br/>
<input type="submit" value="search" />
</form>
<div id="results" class="bordered-image">
This is where results will live...eventually.
</div>
</section>
<section id="secondary">
<h3>Additional Resources</h3>
Visit the <span class=”highlight”>Resources</span>
section of our website for additional help.
<p>
<h3>Contact Information</h3>
Please contact the <span class=”highlight”>author</span> for
additional resources at
shawn@github.com.
<p>
</section>
<footer>
© 2014 Shawn Wildermuth LLC
</footer>
</div>
</body>
</html>
site2.css
/* site2.css */
header, footer {
background-color: lightgray;
border: solid 1px black;
/*font-family: 'Times New Roman', serif;*/
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: darkgreen;
}
a {
color: green;
}
html, body {
padding: 0;
margin: 0;
}
.bordered-image {
border: solid 1px #444;
border-radius: 2px;
}
#main {
border: solid 1px #ccc;
border-radius: 5px;
color: #202020;
margin: 20px 0;
padding: 5px;
}
#secondary {
border: solid 1px #ccc;
border-radius: 5px;
color: #FF0000;
margin: 20px 0;
padding: 5px;
}
#secondary h3 {
color: #0066FF;
letter-spacing: 7px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
#results {
padding: 2px;
width: 600px;
display: inline-block;
vertical-align: top;
}
.simple-form {
padding: 2px;
width: 300px;
display: inline-block;
vertical-align: top;
/* position: absolute;
bottom: 5px;
right: 5px;
*/}
.simple-form label {
font-weight: bold;
}
.simple-form input[type=text],
.simple-form select,
.simple-form input[type=password],
.simple-form textarea {
width: 150px;
}
.simple-form input[type=submit] {
background-color: green;
color: white;
border-radius: 15px;
padding: 3px;
margin-top: 5px;
}
.container {
width: 989px;
margin: 0 auto;
background-color: white;
padding: 5px;
}
header nav {
float: right;
margin-right: 5px;
}
header nav li {
display: inline;
font-size: 12px;
}
Explanation / Answer
Hi, You are correct highlight class will not work here.
I also stuck with this some time before. This is a special case of css where when we use <p> tag and use <span> tag into <p> tag as inline tag. Then we have to use only inline css.
So you can not apply css class here for span tag because span tag is a inline tag.
Code :
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.