CSS • Chapter 13 • Foundations to Production
Sizing Elements
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
13.1 width and height
width and height is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For width and height in Chapter 13, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for width and height, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 13, topic 1.
Concept in plain language
width and height is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal search form for width and height. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 13, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the dashboard example for width and height. Predict the visual difference before reloading the page. Chapter 13, topic 1, example 2.
Example 3: Narrow-screen test
Test width and height in the photo gallery at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 13, topic 1, example 3.
Example 4: Translated-text test
Translate the pricing table into a language with longer labels while using width and height. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 13, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the lesson sidebar to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 13, topic 1, example 5.
Example 6: Accessibility test
Check width and height in the contact form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 13, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the button group and determine why the declaration for width and height wins or loses using the browser's Styles and Computed panels. Chapter 13, topic 1, example 7.
Example 8: Content-stress test
Fill the data table with very long words, URLs, translated text, images, and nested controls. Adjust width and height without hiding meaningful content. Chapter 13, topic 1, example 8.
Example 9: Refactoring test
Rewrite the media player so width and height uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 13, topic 1, example 9.
Example 10: Production review
Review width and height in the notification for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 13, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="box">Responsive box</div>
<style>
.box { width: min(100%, 30rem); min-height: 8rem; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate width and height.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The box can shrink to fit the viewport while retaining a useful minimum block size.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates width and height without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 13, topic 1.
Practice exercise
Build a fresh example for width and height from Chapter 13. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
13.2 min-width and max-width
min-width and max-width is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For min-width and max-width in Chapter 13, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for min-width and max-width, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 13, topic 2.
Concept in plain language
min-width and max-width is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal pricing table for min-width and max-width. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 13, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the lesson sidebar example for min-width and max-width. Predict the visual difference before reloading the page. Chapter 13, topic 2, example 2.
Example 3: Narrow-screen test
Test min-width and max-width in the contact form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 13, topic 2, example 3.
Example 4: Translated-text test
Translate the button group into a language with longer labels while using min-width and max-width. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 13, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the data table to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 13, topic 2, example 5.
Example 6: Accessibility test
Check min-width and max-width in the media player with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 13, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the notification and determine why the declaration for min-width and max-width wins or loses using the browser's Styles and Computed panels. Chapter 13, topic 2, example 7.
Example 8: Content-stress test
Fill the language selector with very long words, URLs, translated text, images, and nested controls. Adjust min-width and max-width without hiding meaningful content. Chapter 13, topic 2, example 8.
Example 9: Refactoring test
Rewrite the course card so min-width and max-width uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 13, topic 2, example 9.
Example 10: Production review
Review min-width and max-width in the navigation bar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 13, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<article class="article">Long article content</article>
<style>
.article { width: 100%; max-width: 70ch; min-width: 0; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate min-width and max-width.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- max-width caps growth while min-width:0 allows a grid or flex item to shrink.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates min-width and max-width without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 13, topic 2.
Practice exercise
Build a fresh example for min-width and max-width from Chapter 13. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
13.3 min-height and max-height
min-height and max-height is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For min-height and max-height in Chapter 13, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for min-height and max-height, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 13, topic 3.
Concept in plain language
min-height and max-height is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal button group for min-height and max-height. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 13, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the data table example for min-height and max-height. Predict the visual difference before reloading the page. Chapter 13, topic 3, example 2.
Example 3: Narrow-screen test
Test min-height and max-height in the media player at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 13, topic 3, example 3.
Example 4: Translated-text test
Translate the notification into a language with longer labels while using min-height and max-height. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 13, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the language selector to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 13, topic 3, example 5.
Example 6: Accessibility test
Check min-height and max-height in the course card with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 13, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the navigation bar and determine why the declaration for min-height and max-height wins or loses using the browser's Styles and Computed panels. Chapter 13, topic 3, example 7.
Example 8: Content-stress test
Fill the article with very long words, URLs, translated text, images, and nested controls. Adjust min-height and max-height without hiding meaningful content. Chapter 13, topic 3, example 8.
Example 9: Refactoring test
Rewrite the profile panel so min-height and max-height uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 13, topic 3, example 9.
Example 10: Production review
Review min-height and max-height in the search form for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 13, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="panel">Scrollable panel</div>
<style>
.panel { min-height: 10rem; max-height: 60dvh; overflow: auto; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate min-height and max-height.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- Min/max block sizing can preserve usable size without exceeding the viewport.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates min-height and max-height without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 13, topic 3.
Practice exercise
Build a fresh example for min-height and max-height from Chapter 13. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
13.4 Intrinsic Sizing
Intrinsic Sizing is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Intrinsic Sizing in Chapter 13, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Intrinsic Sizing, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 13, topic 4.
Concept in plain language
Intrinsic Sizing is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal notification for Intrinsic Sizing. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 13, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the language selector example for Intrinsic Sizing. Predict the visual difference before reloading the page. Chapter 13, topic 4, example 2.
Example 3: Narrow-screen test
Test Intrinsic Sizing in the course card at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 13, topic 4, example 3.
Example 4: Translated-text test
Translate the navigation bar into a language with longer labels while using Intrinsic Sizing. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 13, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the article to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 13, topic 4, example 5.
Example 6: Accessibility test
Check Intrinsic Sizing in the profile panel with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 13, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the search form and determine why the declaration for Intrinsic Sizing wins or loses using the browser's Styles and Computed panels. Chapter 13, topic 4, example 7.
Example 8: Content-stress test
Fill the dashboard with very long words, URLs, translated text, images, and nested controls. Adjust Intrinsic Sizing without hiding meaningful content. Chapter 13, topic 4, example 8.
Example 9: Refactoring test
Rewrite the photo gallery so Intrinsic Sizing uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 13, topic 4, example 9.
Example 10: Production review
Review Intrinsic Sizing in the pricing table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 13, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<span class="badge">Intrinsic width badge</span>
<style>
.badge { inline-size: max-content; max-inline-size: 100%; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Intrinsic Sizing.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- max-content sizes to content while max-inline-size prevents viewport overflow.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Intrinsic Sizing without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 13, topic 4.
Practice exercise
Build a fresh example for Intrinsic Sizing from Chapter 13. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
13.5 Aspect Ratio
Aspect Ratio is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Aspect Ratio in Chapter 13, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Aspect Ratio, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 13, topic 5.
Concept in plain language
Aspect Ratio is part of the CSS system covered in Chapter 13. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal navigation bar for Aspect Ratio. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 13, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the article example for Aspect Ratio. Predict the visual difference before reloading the page. Chapter 13, topic 5, example 2.
Example 3: Narrow-screen test
Test Aspect Ratio in the profile panel at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 13, topic 5, example 3.
Example 4: Translated-text test
Translate the search form into a language with longer labels while using Aspect Ratio. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 13, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the dashboard to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 13, topic 5, example 5.
Example 6: Accessibility test
Check Aspect Ratio in the photo gallery with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 13, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the pricing table and determine why the declaration for Aspect Ratio wins or loses using the browser's Styles and Computed panels. Chapter 13, topic 5, example 7.
Example 8: Content-stress test
Fill the lesson sidebar with very long words, URLs, translated text, images, and nested controls. Adjust Aspect Ratio without hiding meaningful content. Chapter 13, topic 5, example 8.
Example 9: Refactoring test
Rewrite the contact form so Aspect Ratio uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 13, topic 5, example 9.
Example 10: Production review
Review Aspect Ratio in the button group for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 13, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<img class="media" src="photo.webp" alt="">
<style>
.media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Aspect Ratio.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- aspect-ratio reserves predictable proportions.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Aspect Ratio without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 13, topic 5.
Practice exercise
Build a fresh example for Aspect Ratio from Chapter 13. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 13 review — 10 questions and answers
1. What should you inspect first when width and height does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for width and height. Then reduce the example until the winning declaration is clear.
2. How should width and height be checked before publishing?
Answer: Test width and height on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when min-width and max-width does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for min-width and max-width. Then reduce the example until the winning declaration is clear.
4. How should min-width and max-width be checked before publishing?
Answer: Test min-width and max-width on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when min-height and max-height does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for min-height and max-height. Then reduce the example until the winning declaration is clear.
6. How should min-height and max-height be checked before publishing?
Answer: Test min-height and max-height on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when Intrinsic Sizing does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Intrinsic Sizing. Then reduce the example until the winning declaration is clear.
8. How should Intrinsic Sizing be checked before publishing?
Answer: Test Intrinsic Sizing on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when Aspect Ratio does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Aspect Ratio. Then reduce the example until the winning declaration is clear.
10. How should Aspect Ratio be checked before publishing?
Answer: Test Aspect Ratio on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.