CSS Properties

Definition and Usage

CSS properties are the style settings inside a rule. Each one controls one aspect of how an element looks or lays out—text color, spacing, size, flex alignment, animation, and more.

Property vs value

A property is the name (color, margin). A value is what you assign (#334155, 1rem). Together they form a declaration: property: value;.

What should beginners learn first?

Master color, font-size, font-family, margin, padding, border, width, height, and display first. Those cover typography, the box model, and basic layout before you dive into Flexbox or Grid.

Hub vs single-property pages

This page teaches how properties work in a CSS tutorial. Each name in the index links to a focused guide (for example CSS color Property). For targeting elements before you style them, see CSS Selectors; for responsive rules, see Media Queries.

CSS Syntax

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

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

/* shorthand sets several longhands */
.card {
  margin: 1rem;
  padding: 1.25rem;
}

Core CSS Concepts

How properties are grouped when you style real pages:

The CSS box model

Every element is a box. Properties control each layer:

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

Prefer box-sizing border-box so width includes padding and border—sizing becomes predictable.

Shorthand vs longhand

Starter properties by job

How to Use CSS Properties

A practical workflow for this tutorial track:

1. Write valid HTML first so you have elements to style.
2. Choose a selector that targets those elements (selectors hub).
3. Add declarations for the job: text, spacing, layout, then polish.
4. Prefer shorthand (margin, padding, border) until you need one side.
5. Use DevTools to inspect which properties actually apply.
6. Open a single-property page from the index when you need values, examples, and FAQs.

Live Preview

Toggle extra padding on the sample box—same idea as writing padding: 1.75rem 2rem; in CSS.

CSS Examples

Five starter patterns from a CSS tutorial: text, box model, sizing, background, and flex. Open each property’s guide 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;
}

CSS Property Tutorial Index

Search by property name or browse by category. Every row links to a full guide with syntax, try-it examples, and FAQs (335 tutorials).

Key Takeaways