In this post, you will learn about what is the significance of the important keyword in CSS and how to use it.

! important keyword will override all previous styling rules for that specific property on that element!

FOR EXAMPLE:

Before applying important:

<div class="a"></div>

<style>.a{

  height: 30px;

  width: 400px;

  width: 700px;

  background-color: black;

 }</style>

OUTPUT:

Here  width=700px;

 

In this post, you will learn about Border-box and how it differs from other box-sizing values.

Border-box is a value of the box-sizing property, it defines how the width and height of an element are calculated.

SYNTAX:  box-sizing: border-box;

For example:

Before Applying Border-Box

<div class="box"></div>

<style>.box{

  padding: 0 20px;

  height: 100px;

  width:100px;

  border: 5px solid black;

}</style>

OUTPUT:

Here Total Width = 100px + 5px + 20px

---