Learn how to set HTML page width and height settings in CSS to achieve a full screen size. Setting CSS Height and Width properties can be confusing when working with the html and body elements. This quick tutorial explains root elements, how the html and body element interact, and when to use viewport units as well as when to avoid them.

• (0:00) Intro
• (0:35) Initial set up and CSS values
• (1:50) Viewing Computed Styles in Dev Tools
• (2:26) The CSS Reset
• (3:40) The root element of your webpage
• (4:00) The body element
• (4:35) Starting with percentages
• (6:15) The root pseudo-selector
• (7:15) What is the best solution for a full page height?
• (8:25) The problem with 100% height on html and body
• (9:20) The solution that has worked for years
• (10:53) A more recent solution for full page height
• (12:17) What about html page width?
• (12:44) Setting html page width with percentages
• (13:19) Why you may get a horizontal scroll bar and how to prevent it
• (15:33) What styles should be set on the html element?

#html #css #web-development #programming #developer