Top 4 important topics in CSS

CSS is the most important and mandatory thing to design a webpage. Without CSS we cannot design a website. Here are the lists and the explanation of the top 4 important topics in css3

FlexBox : Flexbox is a property that is used rapidly to style the website layout and fix the layout with very easy way. flexbox is a css property that is use to align the items in different ways. There are many use cases of flexbox. By using flexbox we can now easily set the element style as our wish. We can now design any website with responsive using this flexbox.

If we want to responsive our webpage then flexbox is here. We can easily responsive a website using flexbox.

If we want to use this css property we need to declare this in display property like display:flex. It is like the grid layout. There are many flex box properties to define styles.

If we want to set the position vertically of our element then we have to use the align-items property and its values. And if we want to set the position horizontally of an element or a div in our website then we have to use justify-content property and its values.

We can also reverse a div or column using flex-direction property. The use case of flex box are many and we can use these flex properties as we needed to design our website.

Grid layout: Grid is like flexbox. We can use grid to make our website layout more flexible and good looking. Using grid layout we can easily responsive a website. There are also many properties in grid layout . if we want to use grid in our project we need to use this in display property like display:grid. Then we have to use the grid properties to style the div or element as we want. Some grid properties are :

• Grid-template-rows: it will define the number of rows of a grid layout
• Grid-template-column: it will define the number of columns of a grid layout
• Grid-gap: it sets the gap between the rows and columns. We can also set the gap specific way for row and column.

There are also many properties of grid. Mainly this grid layout makes the websites responsive very easily and we can set the items or div or we can style our div in our way.

Pseudo element: pseudo element is a css property to style a specific part of an element. There are many pseudo-element in css. Some of them are before,after, first-line, first-letter, marker, selection, etc. these pseudo element are used to style elements. We can style more interactive using these elements.

Pseudo class: pseudo class are used to define some special state or style of an element or div. There are many states in pseudo classes and some of them are hover, active, focus, checked, first-child, nth-child, visited etc.

There are many use cases of this pseudo-elements and pseudo-classes, these elements and classes are used to extra style of our webpage.

Position: there are many value and use cases of CSS position property. Css position property is used to position our html element or div. There are some value of css position property. Some of them are

• Static: static position is the default value of an element.
• Absolute: absolute position works with it’s relative element. And it can only position in it’s parent area. We can put our div at any where using this absolute in respective of relative position.
• Fixed: position fixed is used to fixed an element in a website. If we want to fixed an element of the window then we will use this fixed position css property.
• Relative: relative is position as normal as it is. But if we want to use absolute position then we have to use a parent position with relative.
• Sticky: when we want to sticky any part or element then we will use sticky position property.
• Initial: this sets the default value of a property.
• Inherit: it is mainly used to inherit an element from the parent element.