What are the most important topics in CSS?

Smooth Scroll css

This trick is super important when you have a Button that targets an element on the same page when you click on it. Doing it with a simple href=”#goToElement” will definitely move quickly. But your website deserves a better user experience. You can achieve that by simply doing this.

html{ 
    scroll-behavior: smooth; 
}

Ellipsis

When a string of text overflows the boundaries of a container it can make a mess of your whole layout. Here’s a cool trick to handle text-overflow:

select{ 
    text-overflow: ellipsis; 
    overflow:hidden; 
    white-space: nowrap; 
}

Result:

Box-sizing: border-box css

This is a favorite among many web designers because it solves the problem of padding and layout issues. Basically, when you set a box to a specific width, and add padding to it, the padding adds to the size of the box. However, with box-sizing:border-box; this is negated, and boxes stay the size they are meant to be.

#example1{
    width:400px;
    height: 100px;
    padding: 30px;
    border: 10px solid purple;
}
#example2{
    box-sizing: border-box;
    width:400px;
    height: 100px;
    padding: 30px;
    border: 10px solid purple;
}

Result:

Center any Element Vertically and Horizontally css

Use this method to center an element vertically and horizontally if you don’t know its exact dimensions set the position property of the parent element to a relative. Set below property to a child.

.container{ 
    position: relative; 
}
.child{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
}

Result:

OR

Centering things in flexbox is very powerful. Centering things in CSS before flexbox was always a chore. Flexbox makes centering items as simple as 3 lines!

.child{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Result:

Image-rendering

Fixing blurry images is a very common problem among frontend developers and web designers. In particular, those working with images at 2x.

img { 
    image-rendering: -webkit-optimize-contrast; 
}

Overriding all css styles:

if you want to override another CSS style for a specific element, use! important after the style in your CSS.

div { 
    color: red !important; 
}

Reference for CSS tips, Tricks, and more https://en.wikipedia.org/wiki/CSS