• skip to content

CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

  • Log In

Site Tools

  • Media Manager
  • Sitemap
Trace:

start

Backlinks

This is a list of pages that seem to link back to the current page.

  • 20. Closing Notes — The Quiet Skills That Make Collaboration Work
  • 15. How to Ask for Multiple Options
  • 16. How to Ask AI to Compare Its Own Options
  • 09. How to Ask AI to Explain Its Choices
  • 17. How to Ask AI to Explain Trade‑Offs
  • 19. How to Ask AI to Identify Missing Information
  • 18. How to Ask AI to Reveal Its Assumptions
  • 08. How to Ask for Safe Changes
  • 13. How to Communicate Style, Tone, and Restraint
  • 14. How to Communicate Uncertainty
  • 10. How to Decline and Redirect
  • 04. How to Describe Layout Intentions Clearly
  • 07. How to Describe Relationships Between Elements
  • 05. How to Describe Visual Intentions Clearly
  • 12. How to Describe What Must Not Change
  • 06. How to Express Constraints and Limits
  • 01. How to Describe What You Want (The Core Skill)
  • 03. How to Name the Boundaries of a Change
  • 02. How to Point to the Right Parts of the Code
  • 11. How to Shrink the Window
  • 2- The Cascade — How CSS Decides
  • 6- Context — Why CSS Is Never Absolute
  • 0- HTML Semantics — The Structure CSS Depends On
  • 4- Inheritance — How Styles Pass Down the Tree
  • 5- Normal Flow — How Elements Arrange Themselves
  • 3- Specificity — The Weight of a Selector
  • 1- How CSS Thinks
  • 01.Layout — Extending the Baseline of Normal Flow
  • 02. Flexbox — Alignment and Distribution
  • 03. Grid — Structure and Composition
  • 04. Positioning — Exceptions and Overlays
  • 1. About This Wiki
  • 04. Attribute Selectors — Targeting Elements by Their Properties
  • 02. Basic Selectors — Elements, Classes, and IDs
  • 03. Combinators — Describing Relationships Between Elements
  • 08. Combining Pseudo‑classes and Pseudo‑elements
  • 06. Pseudo‑elements — Styling Parts of an Element
  • 07. Pseudo‑elements in Practice (Simple Examples)
  • 09. Accessibility Notes for content:
  • 01. Selectors — How We Point to What We Mean
  • 11. Selectors — A Summary of What They Can and Cannot Do
  • 05. State Selectors — Targeting Elements by Their Conditions
  • 10. When Pseudo‑elements Should Not Be Used
  • 01. What Components Are and Why They Matter
  • 02. HTML + CSS + Behavior — The Three Layers of an Interface
  • 03. Blocks, Elements, and Modifiers — A Mental Model for Components
  • 04. Naming and Shape — How Structure Supports Style
  • 05. Nested Components — When Structure Helps and When It Hurts
  • 06. Structural Patterns — Cards, Lists, Media Objects, Forms
  • 07. Structure Summary — What It Can and Cannot Do
  • 05. Borders and Radius — Edges and Softness
  • 02. Color — Contrast, Palettes, and Meaning
  • 01. Visual Style — Color, Typography, and Rhythm
  • 08. Density — Breathing Room and Compression
  • 07. Motion — Subtle Transitions and Intent
  • 04. Rhythm — Margin, Padding, and the Flow of Space
  • 06. Shadows — Depth and Atmosphere
  • 03. Typography — Size, Line‑Height, and Readability
  • 09. Visual Style Summary — What It Can and Cannot Do
  • Communication Phrases
  • 01- CSS Essential Concepts
  • CSS Alignment
  • CSS Containment
  • CSS Density
  • Flow
  • CSS Visual Hierarchy
  • CSS Parent / Child
  • CSS Rhythm
  • CSS Siblings
  • CSS Spacing
  • Styling Tone
  • CSS Layout Patterns
  • Units of Measure
  • CSS Visual Vocabulary
  • Typographic Case Contrast
  • Color Contrast
  • Styling Contrast
  • Visual Expression
  • Editorial Expression
  • Minimal Expression
  • Playful Expression
  • Technical Expression
  • Font Pairing Contrast
  • Hue Contrast
  • Lightness Contrast
  • Loudness
  • Restraint
  • Saturation Contrast
  • Scale Contrast
  • Typographic Size Contrast
  • Visual Softness
  • Color Softness
  • Edge Softness
  • Motion Softness
  • Shadow Softness
  • Typographic Spacing Contrast
  • Spatial Contrast
  • Typographic Style Contrast
  • Typographic Contrast
  • Visual Tone
  • Calm vs. Energetic Tone
  • Formal vs. Informal Tone
  • Neutral Tone
  • Warm vs. Cool Tone
  • Visual Weight
  • Typographic Weight Contrast
  • Visual Density
  • Shadow Weight
  • Stroke Weight
  • Surface Weight
  • The age of writing code is ending
  • Vocabulary — the shared language of CSS collaboration
  • Welcome to your new DokuWiki
  • 05. When AI Suggests a Refactor (How to Decide What to Accept)
  • 02. How AI Sees Code (and What It Cannot See)
  • 19. When AI Overgeneralizes (How to Bring the Work Back to the Specific)
  • 16. When AI Over‑Explains (How to Bring the Work Back to Clarity)
  • 11. When AI Misunderstands a Pattern (How to Correct the Shape and Preserve the Intent)
  • 06. Safe Refactoring — How to Guide AI Toward Minimal, Predictable Changes
  • 35. When AI Misreads the Context of the Change (How to Keep the Work Aligned With the Situation Around It)
  • 32. When AI Misreads the Intent of the Code (How to Keep the Work Aligned With What the Code Is For)
  • 26. When AI Misreads the Level of Risk (How to Keep Changes Safe and Proportionate)
  • 34. When AI Misreads the History of the Code (How to Keep the Work Aligned With Why the Code Became What It Is)
  • 31. When AI Misreads the Boundaries (How to Keep Components Separate and Responsibilities Clear)
  • 25. When AI Over‑Documents (How to Keep Comments Useful, Minimal, and Honest)
  • 24. When AI Over‑Explains the Obvious (How to Keep the Work Focused and Respectful of the Reader)
  • 20. When AI Over‑Corrects (How to Keep the Work Stable and Minimal)
  • 23. When AI Invents a Convention (How to Keep the System Grounded in Reality)
  • 18. When AI Misjudges Priority (How to Keep the Work Aligned With What Matters)
  • 30. When AI Misreads the Dependencies (How to Keep the Work Coherent Across the System)
  • 27. When AI Misreads the Cost of Change (How to Keep the Work Efficient and Sustainable)
  • 28. When AI Misreads the Impact of a Change (How to Keep the Work Focused on What Actually Improves the System)
  • 29. When AI Misreads the Stability of a Change (How to Keep the Work Future‑Proof and Maintainable)
  • 33. When AI Misreads the Constraints (How to Keep the Work Within the Real Limits of the System)
  • 21. When AI Misreads the Audience (How to Match the Explanation to the Reader)
  • 14. When AI Invents Features (How to Prevent Hallucinated Behavior)
  • 13. When AI Breaks the Architecture (How to Re‑Assert the System’s Rules)
  • 15. When AI Misreads Intent (How to Re‑Center the Goal)
  • 09. When AI Gets Lost (How to Reset, Re‑Anchor, and Regain Control)
  • 12. When AI Over‑Refactors (How to Restore Simplicity)
  • 22. When AI Misses the Hidden Dependency (How to Reveal What the System Relies On)
  • 17. When AI Misses the Edge Case (How to Reveal the Hidden Risk)
  • 04. Temporary Hacks (Like !important) — How to Use Them Without Creating Noise
  • 36. Closing — Working With Existing Code Is an Act of Stewardship
  • 01. Preface: This is a long topic, but easy to read
  • 03. Showing AI the Right Parts of the Code (and Only the Right Parts)
  • 10. When AI Misunderstands the System (How to Reveal the Missing Context)
  • 07. Working With Legacy Code (How to Guide AI Through Older Patterns)
  • 08. Working With Themes and Plugins (How to Keep AI Inside the Boundaries)
start.txt · Last modified: 2026/05/19 21:51 by editor

Page Tools

  • Show page
  • Backlinks
  • Back to top
Topics ▼Latest•Oldest•A–Z•Other Navigator Demos
  • Css Communication Toolkit
  • Foundations
  • Layout
  • Selectors
  • Structure
  • Visual Style
  • Vocabulary
  • Working With Existing Code
Other Navigator Demos
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki
Theme: Navigator | Tony de Araujo (New York | Lisbon)