Applying css to a single element, classes don't work - html

Question

I am trying to add a CSS to a form which has different formatting from the rest, however, if I add a separate style.css file, it applies to the entire web site which I don't want. I need to add spaces between the input fields, labels, and buttons. I'm not sure which CSS file is overriding as I have about 20 of them. Is there any way to override it and apply it to to the class "box-body"
<!-- To Do List -->
<div class="col-lg-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">To Do List</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-
widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-
widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<!-- <link href='https://fonts.googleapis.com/css?
family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->
<p>
<label for="new-task">Add Item</label><input id="new-task"
type="text"><button>Add</button>
</p>
<h3>To Do</h3>
<ul id="incomplete-tasks">
<li><input type="checkbox"><label>Pay Bills</label><input
type="text"><button class="edit">Edit</button><button
class="delete">Delete</button></li>
<li class="editMode"><input type="checkbox"><label>Go
Shopping</label><input type="text" value="Go Shopping">
<button class="edit">Edit</button><button
class="delete">Delete</button></li>
</ul>
<h3>Completed</h3>
<ul id="completed-tasks">
<li><input type="checkbox" checked><label>See the
Doctor</label><input type="text"><button
class="edit">Edit</button>
<button class="delete">Delete</button></li>
</ul>
<script type="text/javascript" src="app.js"></script>
<script src="js/index.js"></script>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
What I have currently: currently
What the box body should look like: should look like
/* To do List CSS*/
.containerToDo {
display: block;
width: 400px;
margin: 100px auto 0;
}
.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li, h3 {
clear:both;
list-style:none;
}
input, button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
/* Heading */
h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 10px;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}
input[type="text"]:focus {
color: #333;
}
/* New Task */
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task {
float: left;
width: 318px;
}
p > button:hover {
color: #0FC57C;
}
/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li > label {
font-size: 18px;
line-height: 40px;
width: 237px;
padding: 0 0 0 11px;
}
li > input[type="text"] {
width: 226px;
}
li > .delete:hover {
color: #CF2323;
}
/* Completed */
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
/* Edit Task */
ul li input[type=text] {
display:none;
}
ul li.editMode input[type=text] {
display:block;
}
ul li.editMode label {
display:none;
}
.input#new-task{
margin-left: 20px;
padding:20px;

Answer 1

For each selector prepend .box-body, like .box-body button.

Answer 2

You can do something like this,
Create a separate html file with .box-body div & style you want at the top. The file would be something like this (this is just a rough idea),
<style>
.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}
</style>
<div class="box-body">
<link href='https://fonts.googleapis.com/css?
family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->
<p>
<label for="new-task">Add Item</label><input id="new-task"
type="text"><button>Add</button>
</p>
<script type="text/javascript" src="app.js"></script>
<script src="js/index.js"></script>
</div>
Let's say the name of the file is box-body.html. Come to main page & remove .box-body div & add this,
<div id="box-body"></div>
Then add this before </body> at the bottom of the main code,
<script>
$('#box-body').load('./box-body.html');
</script>