CSS Default Values and Entities
1. CSS Default Property Values
Every CSS property has an initial value defined by the specification. Understanding defaults helps you know when a rule is actually needed versus when you're just confirming the default.
Most Important Defaults
| Property | Default Value | Notes |
|---|---|---|
display | inline | Most elements; block for divs, headings, sections |
position | static | top/left have no effect on static |
visibility | visible | Element and children show |
opacity | 1 | Fully opaque |
overflow | visible | Content flows outside the box |
z-index | auto | No stacking context created |
float | none | No floating |
box-sizing | content-box | Width doesn't include padding/border |
color | Browser-defined | Usually black or system UI color |
background-color | transparent | No background fill |
background-image | none | |
border | 0 none currentColor | Invisible by default |
margin | 0 | (Some elements like <p>, <h1> have browser-defined margin) |
padding | 0 | |
width | auto | Fills block-level container |
height | auto | Shrinks to content |
max-width | none | No limit |
min-width | auto | Content-dependent |
font-size | medium (16px in most browsers) | |
font-weight | normal (400) | |
line-height | normal (~1.2) | Browser-dependent |
text-decoration | none | (Links default to underline) |
cursor | auto | Browser-chosen cursor |
transition | none | No animation on property change |
animation | none | |
transform | none | No transformation |
flex-direction | row | Left-to-right |
flex-wrap | nowrap | Single line |
justify-content | flex-start | |
align-items | stretch | |
grid-auto-flow | row | Fills row by row |
object-fit | fill | Image stretches to fill (distorts!) |
Inherited vs Non-Inherited Properties
Inherited (children get parent's value by default):
color,font-*,line-height,letter-spacing,text-align,text-transform,visibility,cursor
Not inherited (must be explicitly set on each element):
margin,padding,border,background,display,position,width,height,opacity
/* Force inheritance */
.child { color: inherit; }
.child { font-size: inherit; }
/* Reset inheritance */
.child { all: initial; } /* Resets EVERY property to its initial value */
.child { all: unset; } /* Resets: inherited properties → inherit, others → initial */
.child { all: revert; } /* Resets to browser stylesheet value */
2. CSS Entities (Unicode Characters in CSS)
CSS content property (used in ::before / ::after) accepts Unicode character codes. Format: \XXXX (backslash + 4–6 hex digits).
Commonly Used Entities
| Character | Symbol | CSS Code | HTML Entity |
|---|---|---|---|
| Copyright | © | \00A9 | © |
| Registered | ® | \00AE | ® |
| Trademark | ™ | \2122 | ™ |
| Checkmark | ✓ | \2713 | ✓ |
| Heavy Check | ✔ | \2714 | ✔ |
| Cross / ✗ | ✗ | \2717 | ✗ |
| Arrow right | → | \2192 | → |
| Arrow left | ← | \2190 | ← |
| Arrow up | ↑ | \2191 | ↑ |
| Double arrow | ⇒ | \21D2 | ⇒ |
| Bullet | • | \2022 | • |
| Em dash | — | \2014 | — |
| En dash | – | \2013 | – |
| Ellipsis | … | \2026 | … |
| Heart | ♥ | \2665 | ♥ |
| Star | ★ | \2605 | ★ |
| Open quote | " | \201C | “ |
| Close quote | " | \201D | ” |
| Non-breaking space | (space) | \00A0 | |
Usage Examples
/* Automatic checkmarks for a feature list */
.feature-list li::before {
content: "\2713 "; /* ✓ + double-space */
color: var(--color-success);
font-weight: 700;
}
/* Arrow decorators on links */
.read-more::after { content: " \2192"; } /* Read more → */
/* Quote decorations */
blockquote::before {
content: "\201C"; /* Opening " */
font-family: Georgia, serif;
font-size: 5rem;
color: var(--color-primary);
}
/* Copyright in footer (dynamic, always current) */
.copyright::before { content: "\00A9 " attr(data-year) " "; }
3. The CSS attr() Function for Dynamic Content
/* Read attribute directly into content */
[data-label]::before { content: attr(data-label) ": "; font-weight: bold; }
[data-tooltip]::after { content: attr(data-tooltip); }
[href]::after { content: " (" attr(href) ")"; } /* Print URLs in printed pages */