CSS can be seemed to be difficult at a first glance when one is new to it. But with the help of properties it is easy to learn CSS. It is the language that is used to style an HTML document. It describes how HTML elements should be displayed.
Best CSS Properties:
- Hover with Transition:
The hover property allows one to change the CSS property of the hovered element, but it’s good to use hover property always with “transition”.
- nth child:
One can select any specific element using this property corresponding to its parent and can apply CSS to that element.
The CSS position property also has an important role in the UI. Some designs can only achieve using position property. Position absolute is fully dependent on its any parent element whoever contains relative position, and the fixed property totally depends on the viewpoint.
Many people make mistake using z-index because they don’t have actual knowledge of z-index. The first thing, z-index, is not working without positioning property. It defines the stack order of an element, which means which layer will be at the top, it can be decided by giving a z-index value of the element.
- Border Use:
The border has multiple uses. One can create Triangle, Circle using borders.
Transform contains multiple properties like rotate, scale, translate. One can make any element double size using scale property.
Using object-fit property, one can keep image in the proper way. The image will not be getting stretched. But in a responsive nature, some image parts cab be cut off, so use it widely.
- *+> selector:
The * selector allows one to apply CSS for all. One can make it specific, like using parents, one can apply for all its child elements.
- vw, vh:
This unit has been used many times in the projects. One can use vw, vh the unit, and for making font-size responsive. It works according to the windows viewpoint width of one have a screen resolution.
This is a tricky property. Be careful before using it. Using this property means the element cannot be selected by anyone. Even if it is a link, then it becomes not clickable.