<div class="container">
<p></p>
<div class="element">
Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit. Debitis, esse, quia veritatis architecto obcaecati <a href="#">voluptates</a> modi at quam nemo amet eum natus alias consequuntur dolores optio <a href="#">ipsa voluptatem</a>? Soluta, facere.
</div>
<hr>
<div class="form">
<input type="text" placeholder="my background will turn yellow on focus">
<input type="text" placeholder="I will also get a red outline">
<textarea name="area" id="area" cols="30" rows="10">Focus me</textarea>
<button>Button</button>
</div>
</div>
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 40px auto;
max-width: 700px;
}
hr {
margin: 40px 0;
}
input,
textarea,
button {
padding: .5em;
display: block;
width: 100%;
margin-bottom: .5em;
}
a:link {
color: deepPink;
}
/* :focus styles */
a:focus,
input:focus,
textarea:focus,
button:focus {
/* override default browser outline */
outline: 0;
/* apply other styles */
outline: 2px solid #F47E58;
border-radius: 5px;
}
input:focus,
textarea:focus {
background-color: #FFFF66;
}