How to override Bootstrap CSS without using inline styling? - html

Question

I'm trying to override Bootstrap's CSS of the following p element:
https://gyazo.com/6bf5dde284fa53fd4c9cd098ddb1f109
(I'd like to add a top-margin: 10px; and remove Bootstrap's bottom margin)
The only way I could get it to override thus far is to use inline styling which i'd prefer to avoid. Also I'd like to avoid !important unless really necessary.
My css files are ordered as follows:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/login.css">
Things i've tried:
<p id="pMargin">
#pMargin {
margin: 10px 0px 0px 0px !important;
}
<p class="pMargin">
.pMargin {
margin: 10px 0px 0px 0px !important;
}
#sdntLogForm p {
margin: 10px 0px 0px 0px !important;
}
body p {
margin: 10px 0px 0px 0px !important;
}
My HTML:
<!-- STUDENT TAB -->
<div id="student" class="tab-pane fade in active">
<form id="sdntLogForm" class="form-container" action="#" method="post">
<div class="error">
<?php
if(isset($error)){
echo ($error);
}
?>
</div>
<div class="form-group">
<h1 class="formHeader">Student Login</h1>
<label for="sdntLogEmail">Email address</label>
<input type="email" class="form-control" id="sdntLogEmail" name="sdntLogEmail" placeholder="Email" tabindex="1" required pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</div>
<div class="form-group">
<label for="sdntLogPass">Password</label>
<input type="password" class="form-control" id="sdntLogPass" name="sdntLogPass" placeholder="Password" tabindex="2">
</div>
<div class="checkbox">
<label>
<input type="checkbox" tabindex="3" id="sdntLogRemember" name="sdntLogRemember">Remember me
</label>
</div>
<button type="submit" class="btn btn-success btn-block" id="sdntLogSubmit" name="sdntLogSubmit" tabindex="4">Login</button>
<p>If you don't have a student account, you can register one here.</p>
</form>
</div>

Answer 1

That link opens a blank page here, so it's a bit hard to tell, but since you only have one p tag in that HTML code, I try it:
Use a CSS selector with as much specifity as possible, i.e.:
div#student.tab-pane.fade.in.active form#sdntLogForm.form-container p { ... }