Description:
Learning CSS requires CSS units. These are used to define the height, width,
font size, border width and some related sizing of HTML elements. CSS
units are used to specify the dimensions of various elements on a web page.
There are several different units of measurement available in CSS, each with
its own specific use case. In this response, I'll explain some of the most
common units of measurement in CSS, their relationships, and default units for
style sheets.
The Table of content is given below
Headlines.
It is basically assumed that there is no default unit in CSS. But I don't
think so 🤔 Let's explain it in detail below.
Explain in Details.
In this topic, I will explain the concept of CSS units. CSS units are used
to define the size and dimensions of elements on a web page. Numeric values
with units like pixels (px), centimeters (cm), or millimeters (mm) are
examples of CSS units. If a unit of measurement is not specified, the
browser defaults to using pixels (px).
It's important to note that there are also special keywords in CSS such as
auto, fit-content, and min-content, which have specific meanings and are
used to define layout behavior. These keywords are not considered CSS units
but are nevertheless essential for creating flexible and responsive designs
Numerical units are also known as absolute length:
Explained below;
percent(%), cm, mm, in, px, pt, pc, em and rem.
Relation:
percent: from 100 like 85%, cm: centimeters, mm: millimeters, in: inches (1in = 96px = 2.54cm), px: pixels (1px = 1/96th of 1in), pt: points (1pt = 1/72 of 1in) and pc: picas (1pc = 12 pt).
em: The EM is a relative unit that is based on the font size of
the parent element. For example, setting the font size of an element to 1em
will make it the same size as the font size of its parent element. This can be
useful for creating flexible layouts that adapt to changes in font size.
rem: REMs are similar to EMs, but they are based on the font size
of the root element, rather than the parent element. This makes REMs
particularly useful for creating scalable and maintainable designs.
Imaginary Lengths:
auto:
auto define the automatically values according to content inside element.
fit-content:
This means that the element sizing value will be appropriate for the content,
meaning it will be equal to the content but can never exceed the maximum size
value.
Inherit
'inherit' is not only used for sizing, but also for other CSS styles like
colors etc. It uses the same CSS property value from its parent. Like incase
of width, it will get width of its parent element.
<style> customtag1{ background: black;color: red; } customtag2{ background: black; color: inherit; } </style><customtag1>We use custom tag so that no default css should apply<br><customtag2>We use custom tag so that no default css should apply</customtag2></customtag1>
initial
The "initial" keyword is used to set a CSS property to its default value. The
"initial" keyword can be used for any CSS property and on any HTML element.
<style> customtag3{ background: black;color: red; } customtag4{ background: white; color: initial; } </style><customtag3>We use custom tag so that no default css should apply <br><customtag4>We use custom tag so that no default css should apply</customtag4></customtag3>
The default color of our website is black and the color of customtag4 in the
preview reverts to the default due to the initial value of the color property.
max-content
The max-content sizing keyword represents the content's internal maximum width
or height. For text content this means that the content will not wrap at all
even if it overflows.
<style> #customtag5{ background: black; padding: 5px;max-width: 200px; } #customtag6{ background: red;color: black;width: max-content; } </style><div id="customtag5"><div id="customtag6">We use custom tag so that no default css should apply</div></div>
We use custom tag so that no default css should apply
Focus parent div (id=customtag5) width is 200px but child div (id=customtag5)
width is greater then parent width (more then 200px).
Viewport Lengths:
Viewport units are a set of CSS length units that are relative to the size of the viewport or the browser window. They allow web developers to create responsive designs that adapt to different screen sizes and resolutions.
There are three types of viewport units: vw (viewport width), vh (viewport
height), and vmin (viewport minimum length). Let's look at some examples of
how each unit can be used.
<style>#unit_test_div1 {width: 50vw; /* Sets the width of the element to 50% of the viewport width */font-size: 5vw; /* Sets the font size to 5% of the viewport width */}</style><div id="unit_test_div1">Testing vw (Viewport Width</div>
Testing vw (Viewport Width
<style>#unit_test_div2 {height: 50vh; /* Sets the height of the element to 50% of the viewport height */font-size: 10vh; /* Sets the font size to 10% of the viewport height */}</style><div id="unit_test_div2">Testing vh (Viewport Height</div>
Testing vh (Viewport Height
<style>#unit_test_div3 {width: 50vmin; /* Sets the width of the element to 50% of the smaller dimension of the viewport */height: 50vmin; /* Sets the height of the element to 50% of the smaller dimension of the viewport */font-size: 5vmin; /* Sets the font size to 5% of the smaller dimension of the viewport */}</style><div id="unit_test_div3">Testing vmin (Viewport Minimum Length)</div>
Testing vmin (Viewport Minimum Length)
Viewport units are very useful for creating responsive designs that work well
on different screen sizes and resolutions. By using them in your CSS code, you
can ensure that your website looks great on both large desktop screens and
small mobile devices.
Final Lines.
In conclusion, understanding CSS units and lengths is crucial for creating effective and visually appealing style sheets. By using the appropriate units, designers can control the size, position, and spacing of elements on a web page with precision. Default units like pixels and percentages can be useful in certain situations, but it's important to understand the relationship between these units and other options like ems and rems. With this knowledge, designers can create responsive designs that work well across a variety of screen sizes and devices. Overall, a strong understanding of CSS units and lengths is an essential tool for any web designer or developer.
««« Thanks again for reading our blog. If you have any questions, feel
free to ask. Your support is enough for us to share this post with your
friends. And a good comment for our hard work. »»»
Thank you ツ
0 Comments