CSS • Chapter 5 • Foundations to Production
Attribute Selectors
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
5.1 Attribute Presence
Attribute Presence is part of the CSS system covered in Chapter 5. 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 Attribute Presence in Chapter 5, 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 Attribute Presence, 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 5, topic 1.
Concept in plain language
Attribute Presence is part of the CSS system covered in Chapter 5. 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 lesson sidebar for Attribute Presence. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 5, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the contact form example for Attribute Presence. Predict the visual difference before reloading the page. Chapter 5, topic 1, example 2.
Example 3: Narrow-screen test
Test Attribute Presence in the button group at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 5, topic 1, example 3.
Example 4: Translated-text test
Translate the data table into a language with longer labels while using Attribute Presence. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 5, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the media player to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 5, topic 1, example 5.
Example 6: Accessibility test
Check Attribute Presence in the notification with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 5, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the language selector and determine why the declaration for Attribute Presence wins or loses using the browser's Styles and Computed panels. Chapter 5, topic 1, example 7.
Example 8: Content-stress test
Fill the course card with very long words, URLs, translated text, images, and nested controls. Adjust Attribute Presence without hiding meaningful content. Chapter 5, topic 1, example 8.
Example 9: Refactoring test
Rewrite the navigation bar so Attribute Presence uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 5, topic 1, example 9.
Example 10: Production review
Review Attribute Presence in the article for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 5, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<input required aria-label="Required field">
<style>
input[required] { border-color: #dc2626; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Attribute Presence.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The attribute selector matches controls that contain required.
- 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 Attribute Presence 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 5, topic 1.
Practice exercise
Build a fresh example for Attribute Presence from Chapter 5. 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.
5.2 Exact Attribute Values
Exact Attribute Values is part of the CSS system covered in Chapter 5. 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 Exact Attribute Values in Chapter 5, 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 Exact Attribute Values, 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 5, topic 2.
Concept in plain language
Exact Attribute Values is part of the CSS system covered in Chapter 5. 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 data table for Exact Attribute Values. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 5, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the media player example for Exact Attribute Values. Predict the visual difference before reloading the page. Chapter 5, topic 2, example 2.
Example 3: Narrow-screen test
Test Exact Attribute Values in the notification at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 5, topic 2, example 3.
Example 4: Translated-text test
Translate the language selector into a language with longer labels while using Exact Attribute Values. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 5, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the course card to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 5, topic 2, example 5.
Example 6: Accessibility test
Check Exact Attribute Values in the navigation bar with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 5, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the article and determine why the declaration for Exact Attribute Values wins or loses using the browser's Styles and Computed panels. Chapter 5, topic 2, example 7.
Example 8: Content-stress test
Fill the profile panel with very long words, URLs, translated text, images, and nested controls. Adjust Exact Attribute Values without hiding meaningful content. Chapter 5, topic 2, example 8.
Example 9: Refactoring test
Rewrite the search form so Exact Attribute Values uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 5, topic 2, example 9.
Example 10: Production review
Review Exact Attribute Values in the dashboard for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 5, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<input type="email" aria-label="Email">
<style>
input[type="email"] { background: #eff6ff; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Exact Attribute Values.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The selector matches only the exact attribute value.
- 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 Exact Attribute Values 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 5, topic 2.
Practice exercise
Build a fresh example for Exact Attribute Values from Chapter 5. 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.
5.3 Word Matching
Word Matching is part of the CSS system covered in Chapter 5. 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 Word Matching in Chapter 5, 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 Word Matching, 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 5, topic 3.
Concept in plain language
Word Matching is part of the CSS system covered in Chapter 5. 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 language selector for Word Matching. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 5, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the course card example for Word Matching. Predict the visual difference before reloading the page. Chapter 5, topic 3, example 2.
Example 3: Narrow-screen test
Test Word Matching in the navigation bar at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 5, topic 3, example 3.
Example 4: Translated-text test
Translate the article into a language with longer labels while using Word Matching. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 5, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the profile panel to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 5, topic 3, example 5.
Example 6: Accessibility test
Check Word Matching in the search form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 5, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the dashboard and determine why the declaration for Word Matching wins or loses using the browser's Styles and Computed panels. Chapter 5, topic 3, example 7.
Example 8: Content-stress test
Fill the photo gallery with very long words, URLs, translated text, images, and nested controls. Adjust Word Matching without hiding meaningful content. Chapter 5, topic 3, example 8.
Example 9: Refactoring test
Rewrite the pricing table so Word Matching uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 5, topic 3, example 9.
Example 10: Production review
Review Word Matching in the lesson sidebar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 5, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<article class="card featured">Featured</article>
<style>
[class~="featured"] { outline: 2px solid #7c3aed; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Word Matching.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- ~= matches a whitespace-separated word inside an attribute.
- 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 Word Matching 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 5, topic 3.
Practice exercise
Build a fresh example for Word Matching from Chapter 5. 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.
5.4 Substring Matching
Substring Matching is part of the CSS system covered in Chapter 5. 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 Substring Matching in Chapter 5, 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 Substring Matching, 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 5, topic 4.
Concept in plain language
Substring Matching is part of the CSS system covered in Chapter 5. 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 article for Substring Matching. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 5, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the profile panel example for Substring Matching. Predict the visual difference before reloading the page. Chapter 5, topic 4, example 2.
Example 3: Narrow-screen test
Test Substring Matching in the search form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 5, topic 4, example 3.
Example 4: Translated-text test
Translate the dashboard into a language with longer labels while using Substring Matching. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 5, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the photo gallery to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 5, topic 4, example 5.
Example 6: Accessibility test
Check Substring Matching in the pricing table with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 5, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the lesson sidebar and determine why the declaration for Substring Matching wins or loses using the browser's Styles and Computed panels. Chapter 5, topic 4, example 7.
Example 8: Content-stress test
Fill the contact form with very long words, URLs, translated text, images, and nested controls. Adjust Substring Matching without hiding meaningful content. Chapter 5, topic 4, example 8.
Example 9: Refactoring test
Rewrite the button group so Substring Matching uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 5, topic 4, example 9.
Example 10: Production review
Review Substring Matching in the data table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 5, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<a href="/courses/css/">CSS course</a>
<style>
a[href*="/courses/"] { font-weight: 700; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Substring Matching.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- *= matches when the attribute value contains the given substring.
- 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 Substring Matching 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 5, topic 4.
Practice exercise
Build a fresh example for Substring Matching from Chapter 5. 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.
5.5 Case-Sensitivity Flags
Case-Sensitivity Flags is part of the CSS system covered in Chapter 5. 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 Case-Sensitivity Flags in Chapter 5, 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 Case-Sensitivity Flags, 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 5, topic 5.
Concept in plain language
Case-Sensitivity Flags is part of the CSS system covered in Chapter 5. 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 dashboard for Case-Sensitivity Flags. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 5, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the photo gallery example for Case-Sensitivity Flags. Predict the visual difference before reloading the page. Chapter 5, topic 5, example 2.
Example 3: Narrow-screen test
Test Case-Sensitivity Flags in the pricing table at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 5, topic 5, example 3.
Example 4: Translated-text test
Translate the lesson sidebar into a language with longer labels while using Case-Sensitivity Flags. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 5, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the contact form to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 5, topic 5, example 5.
Example 6: Accessibility test
Check Case-Sensitivity Flags in the button group with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 5, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the data table and determine why the declaration for Case-Sensitivity Flags wins or loses using the browser's Styles and Computed panels. Chapter 5, topic 5, example 7.
Example 8: Content-stress test
Fill the media player with very long words, URLs, translated text, images, and nested controls. Adjust Case-Sensitivity Flags without hiding meaningful content. Chapter 5, topic 5, example 8.
Example 9: Refactoring test
Rewrite the notification so Case-Sensitivity Flags uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 5, topic 5, example 9.
Example 10: Production review
Review Case-Sensitivity Flags in the language selector for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 5, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<input type="EMAIL" aria-label="Email">
<style>
input[type="email" i] { border-color: #2563eb; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Case-Sensitivity Flags.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The i flag requests ASCII case-insensitive matching.
- 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 Case-Sensitivity Flags 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 5, topic 5.
Practice exercise
Build a fresh example for Case-Sensitivity Flags from Chapter 5. 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 5 review — 10 questions and answers
1. What should you inspect first when Attribute Presence does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Attribute Presence. Then reduce the example until the winning declaration is clear.
2. How should Attribute Presence be checked before publishing?
Answer: Test Attribute Presence 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 Exact Attribute Values does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Exact Attribute Values. Then reduce the example until the winning declaration is clear.
4. How should Exact Attribute Values be checked before publishing?
Answer: Test Exact Attribute Values 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 Word Matching does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Word Matching. Then reduce the example until the winning declaration is clear.
6. How should Word Matching be checked before publishing?
Answer: Test Word Matching 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 Substring Matching does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Substring Matching. Then reduce the example until the winning declaration is clear.
8. How should Substring Matching be checked before publishing?
Answer: Test Substring Matching 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 Case-Sensitivity Flags does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Case-Sensitivity Flags. Then reduce the example until the winning declaration is clear.
10. How should Case-Sensitivity Flags be checked before publishing?
Answer: Test Case-Sensitivity Flags 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.