How to write media queries in css ?

Media queries help to create a responsive website or landing page. These are the breakpoint and we set them accordingly to the devices such mobile,, tablet, desktop etc. by using width and height to break the layout and the code.
Media Types

All – Use for all devices Print – use only for print device Screen – use only screens Speech – Use for speech devices

Types of breakpoints for screens : Mobile Device – Small Devices, Tablet Devices

How to saturate or filter image in css

The filter css property is used to apply a graphical effects to an element like bluring or color shifting. Filters are commonly used to adjust the rendering of images colors, background, borders etc.

There are many available properties in css to achieve filter effects.

 Filter: none Filter: blur() filter: brightness() filter: contrast() filter: drop-shadow() filter: grayscale() filter: hue-rotate() filter: invert() filter: opacity() filter: saturate() filter: sepia() filter: url();

How to color html svg element using css ?

Once my colleague told me or I also faced this problem with svg icons is that svg icons don’t match the color of text. In fact this was a huge problem, I was stuck that time but there is a pretty solution for this I didn’t think that time. To color a svg we use fill:colorname!

                  
                    svg {
                      fill: colorName;
                    }
                    svg {
                      fill: #454454;

                    }
                    svg {
                      border: 5px solid #636363;
                    }
                  
                

What is variable and How to create variable in css ?

Custom property defined in css that contain a specific values to be reused throughtout the document. In a large website there is a large amount of css code with a lot of repeated values. The same color can be used 2 or more places or even hundreds of different places. So Custom properties allow us to stored value in one place and reuse on other places.

               
                  element {
                    --main-bg-color: colorname;
                  }
                
               
               
                  :root {
                   --main-bg-color: colorname;
                 }