CSS New Units 💥: A Beginner's Guide by Code Crushers 😍😍😍😍

❤CSS New Units 💥: A Beginner's & New Units 😍 Guide by Code Crushers💣

   Click here to Watch a Video to better understand 📂

    CSS units are an essential part of web design. They allow you to define the size and position of elements on a webpage. Understanding the different types of CSS units is crucial to creating responsive and visually appealing websites. In this blog post, we'll take a look at the different types of CSS units and provide examples of how they can be used.

Absolute Units:-

Absolute units have a fixed size and do not change based on screen size or device. These units are useful for defining precise sizes for elements, such as font sizes or border widths.

Pixels (px)

Pixels are the most commonly used absolute unit in CSS. One pixel is equal to one dot on a screen, regardless of its density. For example, to set the font size of an element to 16 pixels, you would write:

font-size: 16px; 

Points (pt)

Points are another absolute unit that is commonly used in print design. One point is equal to 1/72 of an inch. To set the font size of an element to 12 points, you would write:

font-size: 12pt;

Inches (in)

Inches are another absolute unit commonly used in print design. One inch is equal to 96 pixels on most screens. To set the width of an element to 3 inches, you would write:

width: 3in;

Relative Units

Relative units are based on the size of the element's parent container or the root element of the webpage. These units are useful for creating scalable designs that adjust to different screen sizes and device types.

Em (em)

Em is a relative unit that is based on the size of the parent container. One em is equal to the font size of the parent element. For example, to set the font size of an element to 1.5 times the font size of its parent container, you would write:

font-size: 1.5em;

Rem (rem)

Rem is similar to Em, but instead of being based on the size of the parent container, it's based on the size of the root element. The root element is usually the html element, and its default font size is 16 pixels. To set the font size of an element to 1.5 times the font size of the root element, you would write:

font-size: 1.5rem;

Viewport Units

    Viewport units are relative units that are based on the size of the viewport or the visible area of the web page. These units are useful for creating designs that adjust to the size of the screen.

Viewport Width (vw) and Viewport Height (vh)

    Viewport width (vw) and viewport height (vh) are relative units that are based on the size of the viewport. To set the width of an element to 50% of the viewport width, you would write:

height: 50vw;

To set the height of an element to 50% of the viewport height, you would write:

width: 50vh;

Viewport Minimum (vmin) and Viewport Maximum (vmax)

    Viewport minimum (vmin) and viewport maximum (vmax) are relative units that adjust to the minimum or maximum of the viewport width or height. To set the width of an element to the minimum of the viewport width or height, you would write:

width: 50vmin;

To set the height of an element to the maximum of the viewport width or height, you would write:

height: 50vmax;

 Conclusion

    In conclusion, understanding and using the appropriate CSS units is crucial for creating beautiful and functional websites. By choosing the right units for different design elements, designers can create layouts that are precise, scalable, and responsive to different screen sizes and devices. The use of absolute units, relative units, and viewport units offers designers flexibility and control over the appearance of their web pages.

By understanding and using the appropriate CSS units, designers can create beautiful and functional websites. Experimenting with different units can help you find the best approach for your design needs.

If you want to learn more about CSS units, check out our YouTube channel where we'll be exploring CSS units in more detail. Thanks for reading!

Author: CodeCrushers

YouTube Channel: Code Crushers