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: