CSS Properties Reference: Tap Values and See the Change Live

What is it?

The CSS Properties Reference explains the most used CSS properties simply. Open a property and tap its values to see the change live: colours, spacing, borders, shadows, flexbox, transforms, text and more.

Who is it for?

Beginners learning CSS, Blogger owners customising themes, designers communicating with developers, and anyone who forgets what a property does.

How to use it

  1. Type in Search (margin, shadow, center, bold…) or pick a Group.
  2. Open a property and tap values to see the demo change.
  3. Tap Copy to take the CSS.

Most useful for beginners

  • box-sizing: border-box: widths include padding, so layouts don’t overflow.
  • margin: 0 auto: centres a block with a set width.
  • max-width: 100% on images: they never overflow the screen.

Errors and how to fix them

  • Property works here but not on my site: another rule overrides it; check specificity with the CSS Specificity Calculator.
  • Searching “center” shows several properties: centring needs different properties for text, blocks and flex items; pick the one for your case.
  • No change in the demo: some values only work together (e.g. text-overflow: ellipsis needs overflow hidden and white-space nowrap).

Questions people ask

  • Does it cover flexbox and grid? Yes, the main layout properties are included.
  • Can I copy several properties? Copy each one you need.

Practical tip

Open your browser’s Inspect panel next to the reference and try the same values on your own page; seeing them on real content makes them stick.

Open the tool: CSS Properties Reference

Still stuck?

Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.

Questions, or an error not listed here?

Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.