CSS tips & tricks for full stack developers
I am a full stack .Net developer with a good understanding of front end tech stack like Javascript, Jquery and Angular. But I am no expert on html & css. I understand how css works and can do little modifications, bug fixes etc. on an already designed front end website's css framework. But once in a while for a side project, I have to design a UI from scratch and the tips / tricks I am about to mention here have come to my rescue a number of times. These are very regular problems and we often face them in our every day jobs / hustles / hobby projects. So, a solution on your tips would save lot of time otherwise wasted on google, stackoverflow and other blogs what ever your go to place is.
If you are familiar or comfortable using any of the css frameworks like bootstrap or tailwind etc., then this is not for you. This is for getting started on any project with out installing any of the frameworks, basically css at its barebones.
1. To stop a css property from being applied to one of the html elements, use 'unset' for all the browsers. 'auto' will work for internet explorer (is that thing still alive though ???)
In the beautiful code shot taken using carbon we are trying to remove the inherited value
for the width property.
2. When you are creating forms this is often a requirement - to place two html elements side by side. Ultimately that boils down to placing two divs side by side and you can place what ever elements you need in those divs. There are two most popular ways to achieve this.
a. Using CSS float property.
So, we start by writing a parent div with overflow: hidden and place two divs inside it and the fist div will have float as left and adjust padding-left on the second div according to your
requirement/choice/taste.
The second way
b. Using CSS display property - which can be used to make divs act like a table. So, we are changing a div behavior to simulate a table behavior. If you are familiar how bootstrap
displays a grid, this will be relatable.