MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 6! 📏
In web development, you are constantly specifying sizes: How wide is this card? How thick is this border? How far apart are these two buttons?
To answer these questions, CSS provides Units of Measurement. CSS units fall into two major categories:
In this lesson, you will master Absolute Units and learn exactly when they are useful and when they should be avoided.
Think of the 15-centimeter plastic or wooden ruler in your geometry box:
+-------------------------------------------------------------------------+ | THE RIGID WOODEN RULER (ABSOLUTE) | +-------------------------------------------------------------------------+ | • If you draw a line of 5 cm on your school notebook, it is 5 cm. | | • If you take that notebook inside a car, it is STILL 5 cm. | | • If you view it under a magnifying glass, the drawn line is STILL 5 cm.| | • Absolute units are rigid, fixed, and locked in stone! | +-------------------------------------------------------------------------+
An Absolute Unit is tied directly to physical measurements or screen pixels. The most common absolute units are:
| Unit | Name | Real-World Equivalence | Common Use on Web |
|---|---|---|---|
px | Pixels | 1 device pixel dot on standard displays (1/96th of an inch) | Extremely Common ⭐ |
pt | Points | 1/72 of an inch | Used for Print Style Sheets (@media print) |
cm | Centimeters | Physical centimeter | Rare (Print stylesheets only) |
mm | Millimeters | Physical millimeter | Rare (Print stylesheets only) |
in | Inches | 1 inch = 2.54 cm = 96px | Rare (Print stylesheets only) |
px)?The pixel (px) is by far the most famous and widely used absolute unit in web design.
Every digital screen (computer monitor, smartphone, iPad, television) is composed of millions of tiny microscopic colored light dots called pixels:
+---+---+---+---+ | R | G | B | R | ◄── A grid of microscopic screen dots +---+---+---+---+ | G | B | R | G | +---+---+---+---+
When you write border: 1px solid black;, you are telling the computer: "Draw a line exactly 1 screen pixel thick!"
pt): The Print UnitIf you have ever used Microsoft Word or Google Docs, you probably chose font sizes like 12pt or 14pt.
In CSS, pt (point) is defined as 1/72nd of an inch. While pt is popular in desktop publishing and printed textbooks, it is NOT recommended for screen styling.
12pt font might look comfortably readable on one monitor, but tiny on an Android smartphone! Use pt strictly when styling printable documents (like school report cards).px)?Pixels are not evil! They are essential when you need millimeter precision that should never stretch or warp:
border: 1px solid #cbd5e1; (You almost always want a crisp 1px border, not a stretchy border!).
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); (Shadow blurs are best defined in fixed pixels).
width: 40px; height: 40px; border-radius: 50%; (Profile avatar circles).
border-radius: 6px; (Soft curves on buttons and inputs).
Here are the two major scenarios where absolute pixels cause severe problems:
If a student opens this website on their 375px mobile phone, the 900px box is wider than the phone screen! An ugly horizontal scrollbar appears, and the user must scroll left and right to read every sentence.
If an elderly user or visually impaired student changes their device settings to "200% Large Text" for easier reading, hardcoded 14px text may ignore their preference! Relative units like rem solve this.
| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
Leaving a space between number and unit: width: 200 px; | Write unit immediately: width: 200px;. | In CSS, spaces between numbers and units make the value invalid. |
Using pt or cm for website button sizes. | Use px or rem for digital screens. | Physical units (cm, pt) are meant for printers, not mobile screens. |
| Building full page layouts using only fixed pixels. | Use relative units (%, rem, vw) for layout structure. | Relative units ensure pages adapt seamlessly across phones, tablets, and laptops. |
px) is the primary absolute unit on the web (1/96th of an inch).pt), centimeters (cm), and inches (in) are intended for print stylesheets.px for crisp borders (1px), small corner radiuses (8px), and subtle box shadows.px for overall container widths and full page layouts.Test your understanding with these multiple-choice questions:
pt) defined as?width: 950px; on a main content container risky for mobile users?px) the ideal industry choice?border-radius: 12 px;?pixel-precision.html.In the next lesson, we will continue your web styling journey with Relative Units: %, rem, em, vh, vw (CSS Units and Measurements).
👉 Continue to Next Lesson: Relative Units: %, rem, em, vh, vw →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Text Alignment, Decoration, Transform, and Spacing | Relative Units: %, rem, em, vh, vw |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.