CSS Basics
1. Inline CSS — Client Summary
Name: John Smith • DOB: 1978-06-22 • SSN (last 4): 4532 • Gender: Male • Race: Black/African American
2. CSS Gradient — Emergency Shelter Intake
Project: Downtown ES • Entry Date: 2025-10-05 • Prior Living: Place not meant for habitation • Household Size: 1
3. Box Shadow — Income at Entry
Earned Income: $0 • SSI: $914/mo • SSDI: $0 • Total Monthly: $914 • Source: SSI
4. RGBA — Non-Cash Benefits
SNAP: Yes • WIC: No • TANF Childcare: No • TANF Transportation: No • Other: No
5. Border-Left — Data Quality Error
Missing: Disabling Condition • Client ID: CL-33102 • Project: ESG-RRH Crossroads • Days since entry: 14
6. Styled HR — End of Entry Assessment / Begin Annual Review

Layout
7A. Housed: 94
7B. Active: 218
7C. Returned: 12
8A. PSH Retention Rate: 91%
8B. Returns to Homelessness: 6%
324
Clients Served
1,247
Services Logged
96%
DQ Score
10. Table — Bed Inventory Summary
Project TypeTotal Beds
PSH — Metro Housing64
ES — Downtown Shelter120
11. Position Relative — Occupancy Badge Overlay
12. Max-Width — By-Name List Notice
13. External Image — Agency Logo Placeholder
Agency Logo Placeholder
14. Link Button — Export Action
Export APR to CSV
15. Emoji — Workflow Status
✅ Housed | 📋 Annual Due | 📈 APR Ready | 🏠 Move-In Pending | 📋 Intake Open | ✅ Exit Complete
16. HTML Entities — HUD Reporting Notation
© 2025 HUD CoC • Chronic: > 12 months • Income < $1,000/mo • Completeness: ½ • “Client Refused” ✓ Valid ✗ Error
SVG
17. Static SVG — Housing Placement Confirmed
18. SVG Shimmer — Dashboard Banner
CASEWORTHYCASEWORTHY
19. SVG Pulse — Active Client Indicator
Client actively enrolled in RRH program.
20. SVG Rotation — Report Generation Spinner
Generating LSA report for FY2025...
21. SVG Staggered — CSV Export Progress
22. SVG Linear Gradient — Completeness Bar
DQ: 96% COMPLETE
23. SVG Radial Gradient — Acuity Score Badge
24. SVG Drop Shadow — LSA Summary Card
LSA FY2025
25. SVG Blur — SSN Redaction Demo
VISIBLEREDACTED
26. SVG foreignObject — System Alert Banner
APR Submission Deadline — October 31, 2025
All CoC-funded projects must complete data cleanup and submit APR via Sage before the deadline.
Character Limit
27. Enrollment Narrative: Client entered Emergency Shelter on 2025-10-05 after sleeping in a vehicle for approximately three weeks. Prior to that, client was staying with family members but was asked to leave. Client reports no income at entry, receives SNAP benefits. Disabling condition: Yes (mental health disorder, documented). Chronic homeless status confirmed via HMIS enrollment history showing four episodes in three years.
CHECKPOINT ~8K (mid-enrollment data)
28. Exit Summary: Client exited to Permanent Housing (rental with ongoing subsidy) on 2025-12-20. Housing Choice Voucher secured through local PHA. Income at exit: $914/mo (SSI approved during enrollment). Non-cash benefits at exit: SNAP, Medicaid. Health insurance at exit: Medicaid. Destination: Rental by client with HCV. Case manager completed exit interview and housing stability plan review.
CHECKPOINT ~10K (exit data complete)
29. Follow-Up Notes: 30-day post-exit check-in completed 2026-01-19. Client reports stable housing, no risk of eviction. Income unchanged at $914/mo SSI. Client connected to outpatient mental health services through community health center. 60-day follow-up scheduled for 2026-02-18. Housing retention confirmed. No returns to homelessness. Data quality review passed — all required HMIS fields complete for APR reporting period.
FINAL ~12K+. If visible, full HMIS client lifecycle rendered. No practical limit.
Results — Dashboard Tool
CSS: 1-6 (Inline, Gradient, Shadow, RGBA, Border-Left, HR)
Layout: 7-16 (Flex, Wrap, Inline-Block, Table, Position, Max-Width, Image, Button, Emoji, Entities)
SVG: 17-26 (Static, Shimmer, Pulse, Rotation, Staggered, LinGrad, RadGrad, Shadow, Blur, foreignObject)
Limit: 27-29 (note last checkpoint)
NOT SUPPORTED: Style blocks, CSS classes, :hover, transitions, @media, transform on hover