Level no.21

CSS Properties 

In this lecture we will study about properties of CSS, that define how HTML element should be displayed on web-page and how we make our web-page layout defined and manageable. Here are some CSS properties:

border: It is used for defining the border around the element.

syntax: border: 5px solid black;

border-width: It is used for setting width of the border around the element.

Syntax: border-width: 10px;

border-style: It is used for setting style of border, in which style the border will appear.

Syntax: border-style:solid;

border-color: It is used for changing the color of the border around the HTML element.

syntax: border-color: 5px solid black;

border-radius: It is used for making border corners round, giving them round shape.You can make any side of the border round just by assigning the exact position.

Syntax: border-radius: 39px; 

You can gradually increase the value according to your preference.

Width and Height: This property sets the dimensions of the element.

Syntax: width: 50px;

             height: 70px;

border-top-right-radius: It is used for setting border style, width and radius on the right side of the border

Syntax: border-top-right-radius: 20px;  

            border-top: 20px solid yellow;

border-top-left-radius: It is used for setting border style, width and radius on the left side of the border

Syntax: border-top-left-radius: 10px;  

            border-left: 10px solid green;

border-bottom: Specifies the color of an element's border bottom.

Syntax: border-bottom: 20px solid purple;

border-right: Sets the width of an element's border right.

Syntax: border-right: 30px solid red;

Inspect Element

Inspect Element feature in web browsers like Google Chrome, Mozilla Firefox, or Microsoft Edge. You can make temporary changes in the web-page by using inspect element. The changes will lost if you reload and refresh the page or when the page return to its original state.

How to open the inspect element?

Place your cursor on the area of the web page you want to inspect. Right-click on it, and in the context menu that appears, select either "Inspect" or "Inspect Element." This will open the browser's Developer Tools panel, or you can simply press ctrl+shift+I you can open the inspect element.