If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.
More specific = Higher precedence
If the selectors are the same then the last one will always take precedence.
div { color: green }
div { color: red }
Here all divs are colored red.
div p { color: green }
p { color: red }
Here div p wins because it’s more specific so all div p will be green.
display property is the most important CSS property for controlling layout.
Block-level elements
A block-level element always starts on a new line and takes up the full width available
<div class="row">
<div class="col-3">
<h4>Display block-level element</h4>
<div>A block-level element always starts on a new line and takes up the full width available</div>
</div>
<div class="col-9" id="display_1">
<p>Hi my name is Folau</p>
<p>Hi my name is Folau</p>
<p>Hi my name is Folau</p>
</div>
</div>
<style>
#display_1 p{
display: block;
}
</style>
Inline elements
An inline element does not start on a new line and only takes up as much width as necessary.
<div class="row">
<div class="col-3">
<h4>Display inline element</h4>
<div>An inline element does not start on a new line and only takes up as much width as necessary.</div>
</div>
<div class="col-9" id="display_2">
<p>Hi my name is Folau</p>
<p>Hi my name is Folau</p>
<p>Hi my name is Folau</p>
</div>
</div>
<style>
#display_2 p{
display: inline;
}
</style>
Float
float property specifies how an element should float. It’s used for positioning and formatting content.
float-left
The element floats to the left of its container
<div class="row">
<div class="col-4">
<h4>Float left</h4>
</div>
<div class="col-8" id="floatLeft">
Hi my name is Folau
<img src="superman.jpeg" alt="" />
</div>
</div>
<style>
#floatLeft img{
float: left;
}
</style>
float-right
The element floats to the right of its container
<div class="row">
<div class="col-4">
<h4>Float right</h4>
</div>
<div class="col-8" id="floatRight">
Hi my name is Folau
<img src="superman.jpeg" alt="" />
</div>
</div>
<style>
#floatRight img{
float: right;
}
</style>