John Duckett’s book on HTML and CSS is a great reference for CSS sizing units. In CSS, there are two main types of units: absolute and relative.
Absolute Units in CSS
A pixel in CSS (Cascading Style Sheets) measures 1/96 of an inch. This means that 96 pixels equal one inch. By default, dimensions in WordPress theme builders, such as Divi, are measured in pixels, which we abbreviate as px. Most people using technology likely know or have heard of a pixel. We measure screen sizes on mobile phones and screen resolutions on televisions or computer monitors in pixels. A pixel represents one dot on the screen for both phones and computers.
In addition to pixels, the Divi builder can use other absolute units. For example, I have used points (pt) before. A point in CSS measures 1/72 of an inch. Another unit called a pica, abbreviated as, equals 12 points. We also have self-explanatory units like centimeters (cm), millimeters (mm), and inches (in).
To clarify, a centimeter is 1/100 of a meter. A millimeter is 1/1000 of a meter, meaning 10 millimeters equals one centimeter. An inch measures 2.54 centimeters. In school, we learned that one meter is approximately 3.3 feet. A foot consists of 12 inches.
Relative Units in CSS
Units in CSS can also measure relative lengths. These units relate to the size of HTML elements, viewports, default units that every browser has, or specific elements like the letter x or the number 0. However, these relative units are rarely used in WordPress. You will find these units more commonly in tutorials on website design, which tend to be more advanced.
The em unit is relative to the current font size being used. For instance, if the font size is 16 pixels, then 1 em equals 16 pixels. Conversely, the unit is relative to the font size of the root element, which is typically the <html> element. This means that if the root font size is 16 pixels, then 1 rem also equals 16 pixels.
The ex unit is not commonly used, but it is relative to the x-height of the current font size. The ch unit measures the width of the numeral 0 in the current font. The vw unit refers to 1% of the viewport’s width or the browser window size. Similarly, the vh unit is relative to 1% of the viewport’s height or the browser window size. You can also use the % sign to assign units relative to the parent element.
Practical Applications
Understanding these units is crucial for web design. For example, when you create a responsive website, you want elements to resize based on the screen size. Using relative units like vw and vh allows you to achieve this. If you set a div with a width of 50vw, it will take up half the viewport’s width, regardless of the device used. This flexibility is essential for modern web design.
When you use absolute units like pixels, you may find that your design does not adapt well to different screen sizes. For instance, if you set a button to be 200px wide, it will always be 200 pixels wide, regardless of whether the user is on a mobile phone or a desktop computer. This can lead to a poor user experience, as the button may appear too small or too large on different devices.
On the other hand, using relative units allows for a more fluid design. If you set the same button to be 20% of its parent container, it will adjust its size based on its width. This approach ensures that your design remains consistent and user-friendly across various devices.
Example: Absolute Units
Example: Relative Units
Learning More About CSS Units
If you want to dive deeper into optimizing your online presence, including strategies like Google ad groups, fill out our contact form now to contact us. We offer a FREE website analysis that can provide valuable insights into your current marketing strategies.
Additionally, if you want to explore more blog posts related to SEO, Divi, CSS, HTML, WordPress, WordPress plugins, digital marketing, computer science topics, or other related subjects, visit our website’s blog section.
Conclusion
In summary, understanding CSS sizing units is essential for anyone in web design. Knowing the difference between absolute and relative units can significantly impact how your website looks and functions across different devices. Using the right units, you can create a responsive design that enhances user experience and accessibility.
Whether you are a beginner or an experienced web designer, mastering these units will help you build better websites. Remember to consider the context in which you are using these units. Absolute units may work well for fixed designs, while relative units are better suited for responsive layouts.
By applying this knowledge, you can improve your web design skills and create visually appealing but also functional and user-friendly websites. So, take the time to learn about CSS sizing units; you will see the difference it makes in your web projects.
0 Comments