CSS Properties

What You’ll Learn

CSS properties control every visual aspect of HTML elements — color, spacing, layout, typography, animation, and more. This hub links to 335 property tutorials, each with syntax, four try-it examples, and FAQs.

Introduction

CSS properties are the building blocks of styling. Each property controls one aspect of an element’s appearance or layout. Explore the most commonly used properties to style HTML elements effectively — covering text, layout, box model, color, and positioning.

What Is a CSS Property?

A property is the name in a CSS declaration. The browser reads the property, applies the value, and renders the result. Hundreds of properties exist; you do not need to memorize all of them — learn the essentials, then search this index when you need a specific one.

The CSS Box Model

Understanding the box model helps you use sizing and spacing properties correctly:

• Content — The text or image inside the element.
• Padding — Space inside the border (padding).
• Border — Line around padding (border).
• Margin — Space outside the border (margin).

📝 Syntax

A CSS rule pairs a selector with one or more property declarations:

p {
  color: #334155;
  font-size: 1rem;
  margin-bottom: 1rem;
}

Property groups

When to Use Which Properties

• Typography — color, font-*, text-* for readable text.
• Spacing — margin and padding to separate elements.
• Layout — display, flex, grid for structure.
• Sizing — width, height, max-width for dimensions.
• Visual effects — border, box-shadow, opacity for polish.

Examples Gallery

Five starter snippets using the most common CSS properties. Open linked tutorials for live try-it editors.

p {
  color: #334155;
  font-size: 1.125rem;
  font-family: system-ui, sans-serif;
}

.card {
  margin: 1rem;
  padding: 1.25rem;
  border: 1px solid #e2e8f0;
}

.box {
  width: 200px;
  height: 80px;
  display: block;
}

.panel {
  background-color: #eff6ff;
  border: 2px solid #2563eb;
  border-radius: 0.5rem;
}

.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

💬 Usage Tips

• Shorthand first — Learn margin, padding, border, and font shorthands before longhands.
• DevTools inspect — Right-click any element to see which properties apply.
• One change at a time — When learning, change one property per save to see its effect.
• Use rem for fonts — font-size: 1rem scales with user preferences.
• Search this index — Jump directly to any of 335 property pages.

⚠️ Common Pitfalls

• Missing semicolons — Every declaration needs property: value;
• Margin collapse — Vertical margins between blocks can merge unexpectedly.
• width: 100% overflow — Padding and border can push past the parent without box-sizing: border-box.
• Invalid values — Browsers ignore declarations with wrong value types.
• Over-specificity — Too many overrides make debugging harder.

♿ Accessibility

• Color contrast — Use the color property with sufficient contrast ratios.
• Readable font-size — Avoid tiny fixed sizes; prefer rem.
• Focus outlines — Do not remove outline without a replacement focus style.
• Motion — Respect prefers-reduced-motion when using animation properties.
• Touch targets — Use adequate padding on interactive elements.

💡 Best Practices