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>
Border
border properties allow you to specify the style, width, and color of an element’s border.
border: width style color;
<div class="row">
<div class="col-4">
<h4>Border 1</h4>
<div><strong>border:</strong> width color style</div>
<div><strong>style:</strong> none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;</div>
<div><strong>color:</strong> any color;</div>
<div><strong>width:</strong> px;</div>
</div>
<div class="col-8" id="border_1">
Hi my name is Folau
</div>
</div>
<style>
#border_1{
padding: 25px;
border: blue solid 2px;
}
</style>
Border radius
border-radius property defines the radius of the element’s corners. This property allows you to add rounded corners to elements.
<div class="row">
<div class="col-4">
<h4>Border radius</h4>
</div>
<div class="col-8" id="borderRadius">
Hi my name is Folau
</div>
</div>
<style>
#borderRadius{
border-radius: 25px;
border: blue solid 2px;
}
</style>
Padding is used to generate space around an element’s content, inside of any defined borders.
padding: top right bottom left;
padding: 10px 10px 25px 20px;
top has 10px padding
right has 10px padding
bottom has 25px padding
left has 20px padding
padding: top right/left bottom;
padding: 10px 25px 20px;
top has 10px padding
right and left have 25px padding
bottom has 20px padding
padding: top/bottom right/left;
padding: 25px 30px;
top and bottom have 25px padding
right and left have 30px padding
padding: top/bottom/right/left;
padding: 25px;
all four paddings are 25px