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





  

In this post, you will learn about how to use the clip-path property which is very handy when you want to shape HTML elements.


Clip-path property is used to shape HTML elements as desired.


 SYNTAX-   clip-path: shape(co-ordinates);  

( you can add shapes like: circle, polygon, ellipse)                   



for-example:

<div class="clip" ></div>


  <style> .clip{

  background-color: red;

  width: 100px;

  height: 100px;

 clip-path: circle(50%);

} </style>


Output: