CSS Size Units in Depth: Unlocking the Power of px, %, vw, vh, em, and rem

Welcome to our MERN stack web development course!
Find Your Code here: www.codehelp.i...
In this video, we dive into CSS size units and their significance in creating responsive and flexible web designs. Discover the differences between pixels (px), percentage (%), viewport width (vw), viewport height (vh), em, and rem units. Learn how to effectively use these units to define element sizes, margins, padding, and more.
Checkout My Website:www.thecodehel...
Checkout my Main Channel: @LoveBabbar
DSA Complete Course: • Complete C++ Placement...
Web Dev Complete Course: • Complete Web Dev using...
DP Series: • DP Series - by Babbar
OS Series: • Operating Systems for ...
Complete Codes: github.com/lov...
Understand the benefits of using relative units for responsive layouts and explore the power of viewport units for creating dynamic designs. Join us in this comprehensive tutorial to elevate your CSS skills and create visually stunning web pages.
Be sure to subscribe to our channel for more web development content and stay tuned for upcoming lessons
Tags: CSS, web development, MERN stack, CSS size units, px, %, vw, vh, em, rem, responsive design, CSS layout, web design, frontend development, CSS styling, coding tutorial, web development course, coding education, CSS tricks, web development tips, CSS techniques, web design units, CSS measurements
Grow with me here:
Instagram: / lovebabbar1
LinkedIn: / love-babbar-38ab2887
Main Channel: @LoveBabbar
Twitter: / lovebabbar3
My Telegram Group Link:
Love Babbar CODE HELP
telegram.me/lo...
My Discord Server Link:
/ discord
Comment #BabbarBhai if you read this.

[@educationkiduniya2.168]

26:12 for responsive websites to learn about media query , grid and flex box bhaiya bahut bahut dhanyawad ❤ for this amazing course

[@smit_XD]

13:31 Pixels per inch (PPI) refers to the number of pixels contained within each inch of a digital image. DPI stands for Dots per Inch, referring to the number of ink droplets a printer will produce per inch while printing an image. The more dots of ink per inch the picture has, the more detail you will see when printed.

[@Aakash_XT]

Is this how 4K and other resolution type of things works I means 4K resolution means higher PPI and 1080 resolution means lower PPI ?

[@ayushdubey3057]

Bhaiya, today's lecture was amazing and we learnt about CSS Size Units in Depth. Bhaiya, your teaching style is amazing for us. Everyone want you to upload lectures on regular basis like this. Thank You so much.🙏🏼🙏🏼🙏🏼😇😇😇😄😄😄😃

[@tejashreedharmireddi2627]

got to know your channel yesterday. I gave a try watching one or two videos. Binged watching all the content you have made since then. Basics are so crucial part of any learning, but we often skip. You are doing GREAT sessions👍. Gonna recommend my friends and colleagues.

[@saritabegani9721]

PPI(pixel per inch ) is the no. Of pixel per inch . Higher the ppi higher will be the resolution of image on digital screen. DPI(Dots per inch) is the no. of dots per inch. This term is used for printed image. A printed image with higher dpi will be more clear . A good picture should have higher ppi before printing and higher dpi after printing. 2) Logical pixel :- Aslo know as device independent pixel. These provide consistent layout and sizing for different device . By defining UI elements, font sizes, and image dimensions in logical pixels, developers can achieve a consistent appearance across various screen sizes and resolutions. The logical pixel values are then translated into the appropriate number of physical pixels based on the device's pixel density. Physical pixel :- They are the individual dots or points of light that make up the screen's resolution. These dots together help us in seeing the vedio , images etc. 3) Following are the things that should be in mind for making a responsive website :- a) All the units should be relative like em , rem etc. b)Use media queries. c) use CSS techniques like flexbox or grid to rearrange and stack content. d)It's crucial to test your website on various devices, browsers, and screen sizes to ensure it renders correctly and functions as intended.

[@ashish-su1em]

Home work::: Physical pixels refer to the actual individual dots that make up a display screen, while logical pixels are a virtual measurement used for consistent layout and scaling in software development across different devices. PPI refers to the number of pixels per inch on a digital display, while DPI refers to the number of dots per inch that a printer can produce. PPI is relevant for screens and displays, while DPI is relevant for printed materials.

[@askvishaljha]

Lecture aate hi notebook open hojati hai bhaiya...❤thanks bhaiya

[@Mylife013]

1st question :- Difference between physical pixel and logical pixel. 2 nd question :- Difference between ppi and Dpi. 3 rd question :- How to create a responsive design?

[@sushantravate4820]

Wow, this video on CSS size units is incredibly informative! I've always been confused about which unit to use for different elements, but this video has really clarified things for me. The detailed explanations of px, %, vw, vh, em, and rem were extremely helpful.❤

[@Engineering_student_2026]

Bhaiya, today's lecture was amazing and we learnt about CSS Size Units in Depth. Bhaiya, your teaching style is amazing for us. Everyone want you to upload lectures on regular basis like this. Thank You so much.💓💓💓💓

[@shauravbhatt6718]

Physical Pixel: Physical pixels are the actual dots of light on a screen that create images. They are the individual elements you can see on the screen. Logical Pixel: Logical pixels are a virtual unit used in software to ensure consistent rendering across different devices. They help maintain visual consistency on screens with varying resolutions and pixel densities.

[@shashankkumarpandey4184]

on mdn i didn't understood em, but after watching your explanation it was clr, thanks

[@mohammadrahi2044]

Home work Diffrence between logical px and physical px 1: Logical pixels are the size of the visual area across devices, while physical pixels are the size of the actual hardware pixels on a device. 2: Logical pixels are what you see when you look at your device, and what your browser sees. Physical pixels are the actual number of pixels a device has. 3: The ratio between the physical pixel density of a device and its logical pixel density is called the Device Pixel Ratio (DPR). Diffrence between of PPI and DPI 1: PPI describes the resolution in pixels of a digital image whereas DPI describes the amount of ink dots on a printed image. 2: Though PPI largely refers to screen display, it also affects the print size of your design and thus the quality of the output.

[@mdamanhassan4451]

boht hi helpful video hai ye aaj tak kisi bhi channel pe aisa concept ni samjhaya gya aur even paid course main bhi pw ke ye ni batya gya amazing love babbar bhaiya thank you for this video

[@munishkumar7213]

Physical pixels (px) aur logical pixels (px) me ek chhota sa difference hota hai. Physical pixels actual screen ke physical units hote hai, jabki logical pixels screen ke resolution aur density ke hisab se calculate hote hai. Jab aap responsive design banate hai, aap logical pixels ka istemal karte hai taaki design har screen size par consistent dikhe.thankyou bhaiya😊😊

[@SazzadurRahmanAyan]

Homework: 1) The main difference between physical pixels and logical pixels is that physical pixels are the actual pixels on the screen, while logical pixels are an abstract unit of measurement that is used to represent the size of objects on the screen. - Physical pixels are the actual pixels that make up a display. They are measured in terms of their physical dimensions, such as width and height. The number of physical pixels on a display is referred to as its resolution. - Logical pixels are an abstract unit of measurement that is used to represent the size of objects on a display. They are not physically real, but are instead used to make it easier to develop and design user interfaces. Logical pixels are typically defined as being 1/96th of an inch in size. 2) PPI and DPI are both measures of resolution, but they refer to different things. - PPI stands for Pixels Per Inch and refers to the number of pixels in one inch of a digital image. This is the resolution of the image on the screen, and it determines how sharp the image appears. - DPI stands for Dots Per Inch and refers to the number of dots that a printer can print in one inch. This is the resolution of the printed image, and it determines how sharp the image appears on paper. 3) The best tool or framework we can use is actually depend on our specific needs and preferences. Though we are new to web development, we should start with HTML and CSS. Once we have a basic understanding of these two languages, then explore other options, such as CSS frameworks or JavaScript frameworks. Here are some additional tips for creating a responsive website design: - Use media queries to change the layout of the page based on the size of the device. - Use flexbox or grid layout to create layouts that are flexible and can adapt to different screen sizes. - Use responsive images to ensure that your images look good on all devices. woow.. it is a interesting lecture. Thank you so much bhaia. Get well soon. Lots of love from Bangladesh. ❤

[@ShabbirYahya]

Love, i was literally confused till the date in these units after watched many videos.but ,your explanation is smooth. Love ❤ to Love Babbar

[@BhaveshMulchandani1]

Bhaiya, today's lecture was amazing and we learnt about CSS Size Units in Depth. Bhaiya, your teaching style is amazing for us. Everyone want you to upload lectures on regular basis like this. Thank You so much.

[@sagardabhi7125]

Mza agaya bhaiya , waps on the track, sb shi chalra h ese hi lectures dete rehna time to time ❤

[@yatindradeo1692]

Thanks for continuing this course. You are boosting our hopes to achieve something good in life.

[@priyeshgupta8234]

The topics discussed in this video were really explained in detailed way.

[@chiragvarshney250]

Revision of the topics make you different from others 😊

[@MArslanTayyab]

Home works: 1): Physical Pixels: Physical pixels, also known as device pixels or hardware pixels, are the smallest physical units of a display. logical pixel: Logical pixels, also known as CSS pixels or reference pixels, are a unit of measurement used in web development and CSS. It is used to help web designers know about rendering web content across different devices. 2): PPI (Pixels Per Inch): PPI refers to the number of pixels (or dots) that are present within one inch of a digital image or display. DPI (Dots Per Inch): DPI, on the other hand, traditionally refers to the number of ink dots that can be printed within one inch on a physical medium, such as paper.

[@MrKiranKumar20]

I was watching apna college css tutorial but your video is very easy to understand than apna college. Thank you so much bro ..i think i will be a software developer soon.

[@hetpatel7399]

Happy Guru Purnima teacher+bhaiya :)

[@ShazebAli-w2g]

PPI is the no. of pixel per inch . Higher the ppi higher will be the resolution of image on digital screen. DPI is the no. of dots per inch. This term is used for printed image, higher dpi will be more clear . For making a responsive website :- 1.) All the units should be relative like em , rem etc. 2.)Use media queries. 3.) use CSS techniques like flexbox or grid to rearrange and stack content. 4.)It's crucial to test your website on various devices, browsers, and screen sizes to ensure it renders correctly and functions as intended.

[@neyogill9825]

so effortless but effective...thank you so much, lots of prayers for you SIR From Pakistan

[@HardikChouhan1901]

With you bhaiya completed all the videos till here ❤️🙌🏻

[@HardikChouhan1901]

I am having a good revision of html css after 2 years 😁

[@Educate-Advise-Zone]

​@@HardikChouhan1901bro guide me im in csit branch how to follow from where to start these playlist🙏🙏

[@theaesthiticravi]

A physical pixel is the actual hardware dot on a screen, while a logical pixel (CSS pixel) is a software unit used to display content, with the device pixel ratio (DPR) determining how many physical pixels represent one logical pixel for sharper visuals on high-resolution displays.

[@Aspirantonmission25]

Am i unlucky that i found your webdev course lately or else i am lucky i found atleast now. You are the Best Among Everyone 🙌🙏🙏🙏

[@munishkumar7213]

Maja aaya😊😊 thankyou bhaiya aap bahut jada hardwork kar rahe h so again thankyou so much 😊

[@mjkmediahouse]

Very helpful dear respectful sir May Allah give the success in this life and in herafter.Ameen

[@tejabhaiyt4244]

00:03 Understanding different CSS size units 01:56 Using size units provides clarity in design 05:50 Understanding the depth of child elements and percentage calculation 08:57 Using CSS size units to control element dimensions 12:41 Understanding the impact of pixel density on image quality. 14:55 CSS size units in depth 18:19 Using different size units for font sizes and their impact 20:12 Units in CSS are relative to the parent element and root element. 24:13 Use relative units for responsive design. 26:00 Use relative units for responsive design

[@Abhishekkumar-xn2ef]

Geart Teach....Finally ab main css sikh paya....

[@nadimsanadi1419]

Physical pixels refer to the actual individual dots that make up a display screen, while logical pixels are a virtual measurement used for consistent layout and scaling in software development across different devices. PPI refers to the number of pixels per inch on a digital display, while DPI refers to the number of dots per inch that a printer can produce. PPI is relevant for screens and displays, while DPI is relevant for printed materials.

[@grow1st]

maza aa gaya bhaiya 🥰 , everything is clear no doubts is remaining now , your way of teaching is amazing bhaiya , whenever i learn from it's like my friend is teaching me something very interactive and friendly Thanks a lot bhaiya 🙏🙏🙏🙏

[@theaesthiticravi]

PPI (Pixels Per Inch) refers to the pixel density in digital displays, while DPI (Dots Per Inch) measures the number of ink dots in printed materials; PPI applies to screens, and DPI applies to print quality.

[@ECE_Pratyush]

Logical pixels are a unit of measurement used in software interfaces and web development to ensure consistent layout and sizing across different devices, while physical pixels are the actual discrete elements that make up a display and determine its resolution and clarity. PPI refers to the number of pixels per inch in a digital display, indicating pixel density and clarity, while DPI refers to the number of dots per inch in printed materials, indicating the print resolution and quality.

[@smit_XD]

11:55 Physical pixels are the actual pixels on a screen that light up to display an image. Logical pixels are like mathematical points that specify a location but are assumed to occupy no area.

[@theaesthiticravi]

On a low-DPI screen (standard monitor with DPR = 1), 1 logical pixel equals 1 physical pixel. On a high-DPI screen (like a Retina display with DPR = 2), 1 logical pixel equals 4 physical pixels (2x2). This ensures that the visual content looks sharp on higher resolution devices.

[@tusharkumar9868]

Factor for responsive design 1. Consistency 2. Compatibility 3. Whitespace 4. Intuitive navigation 5. Optimized images

[@Visheshsainiii]

In Padding it always set 16px in multiply so 2em is equal to 2*16=32px. even if you set parent padding 10,12 or something.

[@relaxingvideosssssss]

for responsive we can also use: media query grid

[@rohittiwari1365]

@CodeHelp Thank you for this consistency sir🙏🙏❣️

[@norendermoody6509]

21:04 Observation, depending on what font-size we set in the parent container, the child container padding will be multiplied with the font size only. Even if we declared padding on parent container the padding will be applied only on parent and there is no effect on child. .parentcontainer{ font-size: 10px; padding: 8px; } .childcontainer{ font-size:10em; padding: 5em; /* Total font size will be 50px */ /* Total padding will be 500px = 10px*10em*5em (parent font size, child fontsize, child padding) */ While padding of parent container will be applied only on parent }

[@veerrajuannamdevula9939]

bhaiyya overall font-size will be 100px(parent font-size*child em) and not 50px

[@Rohitkumar-bx8ne]

best course on web dev

[@anshujain5020]

Love bhaiya please release more videos as soon as possible , so that we can continue with this course , your lectures was very amazing

[@shantanu8880]

To increase responsive property we can use: media queries property. (We always try to develop in low dimension let's say mob view, the using min width we can break down.) display : flexbox unit will also help us, as it will give us a chance to display divs in row or column wise using wrap or no wrap. Using of relative property like %, vw, vh. By giving a height a width in html and fix width by max() or min() function, and height : auto property, using calc() function will also help us in this case,

[@jiya8016]

I got the end sems but I couldn't stop myself from learning new topics.

[@mdsameerali7500]

Aap kahan se hain

[@jiya8016]

@@mdsameerali7500 pdhai pr dhyan dijiye, in sb mai kuch nahi rakha.

[@NikunjKumarGupta]

​@@jiya8016Hindu Ladki Respect 😌😌

[@fit_tubes_365]

Episode - 08 : 04-11-2024 Episode - 09 : 14-11-2024 Episode - 10 : 14-11-2024 Episode - 11 : 19-11-2024 Episode - 12 : 21-11-2024 Episode - 13 : 21-11-2024 Episode - 14 : 22-11-2024 Episode - 15 : 23-11-2024 Episode - 16 : 23-11-2024 Episode - 17 : 23-11-2024 Episode - 18 : 23-11-2024

[@studentchampion718]

Unit Description cm centimeters mm millimeters in inches (1in = 96px = 2.54cm) px * pixels (1px = 1/96th of 1in) pt points (1pt = 1/72 of 1in) pc picas (1pc = 12 pt)

[@siddhant5345]

Bhaiya course bohat interesting hai. Thank you so much

[@user-jee5pj7yg543h]

literally mja aa gya bhaiya..thx alot plz continue bhaiya

[@shantanu8880]

I have searched a lot nd came up a solution that ppi means pixels per inch, if we increase more no. of pixels in a particular dimension , the resolution will increase. More ppi ,more clarity, dpi means dopts per inch, if we increase dpi more , more no. of dots will increase and it will also increase clarity.

[@Arixxxverse]

Ppi is relevant with digital image and Dpi is relevant with printer

[@mohi1974]

Thanks a lot brother helping us know about CSS Units in-depth, graceful to you.

[@surajmhaske3058]

Most detailed and in depth web dev course on KZbin ❤️ .Thanks Love bhaiya🥰🥰 BUT please tell the solution of given HOMEWORK in Next lecture ....Only REQUEST 😞🙏🙏 Plz reply me...

[@Btechwala2124]

what a amazing class ! i have learnt to much from this lecture

[@ayushraj5821]

Thank you Bhaiya, Great session & I am also in your DSA Supreme Batch. Enjoyed++ 😊😊 IKYK

[@OdiapilaRitesh]

Love u bro ap ne kya Samjhaya he mera dil khus ho gya khas kar ke mereko ek and rem me bht doubt tha par ap ko dil se Thanks❤🙏 abhi subscribe karta hu ❤🎉

[@rrcgaming47]

Thanks for this amazing wed dev course

[@AkhilKumar-p3j]

Bhaiya ji tussi great ho majja aa gaya units padna mai

[@studentchampion718]

Hw question solution :-PPI describes the resolution in pixels of a digital image whereas DPI describes the amount of ink dots on a printed image.

[@Sham_Dravid_03]

Thank You for continuing this amazing web dev course for us ❤.

[@CoderKaran]

Bhaiya tq so much to continue this web development course ❤

[@specificgyan-adarshmishra7857]

Bhaiya keep continue upload videos daily ❤❤

[@gauravmishra940]

maza aa gya bhaiya ,best video ,bhaiya get well soon

[@Anonymousyr]

"To kaise hai saare k saare " ....firse aag lagane aa gye h babbar bhiya 🔥🔥🔥🔥

[@coding7535]

Thank you bhaiya you're back ❤

[@vishv179]

Thankyou guruji ❤

[@divyanshunegi3808]

episode 18 completed thanks bhaiya

[@aakashkumarmishra5377]

Sir i am very happy you very easyly studies in all student

[@AmarjeetKumar-wc6jl]

Hlo there your video was so lovely and infornative I'm enjoying your video and more than that I'm glad that I'm learning with you every concept or topic is getting cleared and I can see changes in me thank you so much for the change So much love to *Love Babbar*

[@abhishekmathur1042]

Top-notch quality content 👏👏👏

[@changed217]

Thank you for this amazing lecture, it was crystal clear. Thank you, for providing this content on youtube.

[@rahulsinghaswal07]

bahut maza aa rha hai bhaiya apse sikhne mein

[@AkashSharma-r5j]

00:03 Understanding different CSS size units 01:56 Using size units provides clarity in design 05:50 Understanding the depth of child elements and percentage calculation 08:57 Using CSS size units to control element dimensions 12:41 Understanding the impact of pixel density on image quality. 18:19 Using different size units for font sizes and their impact 20:12 Units in CSS are relative to the parent element and root element. 26:00 Use relative units for responsive design

[@problemsolver3226]

child container padding=parant font size*child font size*child padding; the child container padding is not only depent on parent container font size ,it also depent on child container font size also

[@UmeshTechnique]

Mind-blowing bhaiya ❤❤

[@kartikeybhatt4629]

Better than Harry's lecture on this topic.

[@Ironnman0803]

Done!, Maja Aagya! Thank you for video! see you in next lecture ==>>

[@shubbhamarya]

Physical pixel is the actual physical unit of a screen Logical pixel is the unit used in web designs .

[@kakshat22]

Bhaiya majaa aa gaya......mast samjhaaye aap❤

[@raj14318]

bhaiya maza aa gaya😍

[@DipsOfficial802]

Thank u so much bhaiya 🔥🔥🔥🔥

[@adityagoswami8144]

such a nice tutor we are unable to interact with him live so he himself ask question and answers them to clear the question that's the reason he teaches so nicely by the way answers to questions asked in this video are : physical pixel: most basic size unit for digital images. logical pixel: when an logo is viewed on a higher resolution device its size automatically adjusts according to the resolution this is due to logical pixel. ppi: pixels per inch means the no. of pixels contained in one inch of the display. dpi: dots per inch means the no. of dots the printer uses in one inch to print the image these terms are mostly used interchangably. while using em with padding it is respective to the element's font size and not parent's font size.

[@RajaswaAnand]

thank you so much sir...... today's lecture was amazing

[@satyamojha2315]

Physical pixels refer to the actual physical unit logical pixel that Customize its dimension according to the device like laptop ,mobile phone , tablet etc.

[@naveensingh_0735]

wow that was really cool ............as much you teach us these things i get more ideas on how to use it in different different manners with different ideas

[@Coderraunak1749]

Lecture was amazing bhaiya 👍👍

[@masteradarshsingh4924]

You are doing GREAT sessions👍

[@jagdishjena9058]

Bhai sach me bahut mazza aa gaya sach me, bahut easily explain kar dia apne,Thank you so much bhai. (27-09-2024)

[@Urahara25]

Bhaiya waiting for Android development and AI course ..Hope you are gonna excel as always!!.

[@himanshupatil4976]

maaza aa gya........LoveBabbarBhai

[@Tejaswi-xd4re]

Pls launch supreme 2.0 by tomorrow... Pls need it fast

[@AshishSharma-vg3qf]

yes

[@anshuraj2102]

Please sir

[@anshuraj2102]

Has sir said that something about supreme 2.0 batch

[@krrish7587]

Is supreme 2.0 for DSA?

[@indrajeeta3314]

Continue sir please

[@SonuKumar-e4o6k]

Maja aa gya bhaiya, I will do my last comment once I finish this playlist... It's my Commitment to mySelf!!

[@NeerajKumar-lw7dg]

hii bhaiya this is Neeraj Kumar and i love your all courese

[@arunabha09]

ppi besically its for display(laoptop,mobile,calculator any thing include screen). dpi its for the printed page by printer or xrox machine. Having more ppi the picture u see in screen will be good. besically 320ppi is enough for human eye,

[@gautam4916]

Bhaiya your style of teaching is very nice thanku bhaiya but Bhaiya pls videos daily upload kijiye

[@mrefii6104]

Thanks for consistency❤🌹🌹👍🏻

[@atin01335]

in case of padding observation is that: if font size is not set then : child * default font size(16px) if font size is set then : child * (default font size) * (font size that is set)