THE REFERENCE ROOM
A working reference for the properties that shape a page. Read the highlighted code, edit the values and run your own variation.
A selector chooses elements. Each declaration pairs a property with a value inside braces.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
<p class="note" id="special">A more specific rule.</p>h1 {
color: #FF1493;
font-size: 40px;
}Try this → Change the selector or value, then run the preview.
Comments are ignored by the browser. Keep CSS in a separate file and link it from the HTML head.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
<p class="note" id="special">A more specific rule.</p>/* A display heading */
h1 {
font-weight: 700;
}Try this → Change the selector or value, then run the preview.
@import loads another stylesheet and must come before ordinary rules. This self-contained demo imports a small data stylesheet; in your project use @import url("reset.css").
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
<p class="note" id="special">A more specific rule.</p>@import url("data:text/css,h1%7Bcolor%3A%23ff1493%7D");
p {
line-height: 1.6;
}Try this → Change the selector or value, then run the preview.
For ordinary author rules in the same layer, an ID is more specific than a class, and a class is more specific than an element. Equal specificity falls back to source order.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
<p class="note" id="special">A more specific rule.</p>p { color: black; }
p { color: #FF1493; }
.note { color: green; }
#special { color: blue; }Try this → Change the selector or value, then run the preview.
Some properties, such as color and font-family, pass from parent to child. Margins and borders do not normally inherit.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
<p class="note" id="special">A more specific rule.</p>body {
color: #FF1493;
font-family: Georgia, serif;
}
p {
color: black;
}Try this → Change the selector or value, then run the preview.
A CSS pixel is a fixed CSS measurement, useful for small details.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-size: 40px; }Try this → Double the value and resize the preview/browser.
Percentages depend on a reference size, often the parent width.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p { width: 70%; background: #7FFF00; }Try this → Double the value and resize the preview/browser.
For font-size, em is relative to the parent font size. For padding, it follows the element’s own font size.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-size: 2em; padding: .5em; }Try this → Double the value and resize the preview/browser.
rem follows the root font size, making a consistent document scale.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-size: 3rem; }Try this → Double the value and resize the preview/browser.
One vw is one percent of viewport width. In these previews the iframe is the viewport.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 { font-size: 8vw; }Try this → Double the value and resize the preview/browser.
One vh is one percent of viewport height.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p { min-height: 40vh; background: #7FFF00; }Try this → Double the value and resize the preview/browser.
One ch approximates the width of the zero glyph, useful for controlling line length.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p { max-width: 30ch; }Try this → Double the value and resize the preview/browser.
Choose a typeface and fallbacks.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
font-family: Georgia, "Times New Roman", serif;
}Try this → Change this property and compare the paragraph with the heading.
Set the size of the letters.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
font-size: 32px;
}Try this → Change this property and compare the paragraph with the heading.
400 is normal; 700 is bold. The font must provide the requested weight.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
font-weight: 700;
}Try this → Change this property and compare the paragraph with the heading.
Use italic for a different emphasis.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
font-style: italic;
}Try this → Change this property and compare the paragraph with the heading.
A unitless value multiplies the element’s font size.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
line-height: 1.8;
}Try this → Change this property and compare the paragraph with the heading.
Positive values open tracking; negative values tighten it.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
letter-spacing: 2px;
}Try this → Change this property and compare the paragraph with the heading.
Adjust gaps between words without changing gaps inside words.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
word-spacing: 6px;
}Try this → Change this property and compare the paragraph with the heading.
Align text inside its box. Try left, center, right or justify.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
text-align: center;
}Try this → Change this property and compare the paragraph with the heading.
Change visual case without changing the source text.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
text-transform: uppercase;
}Try this → Change this property and compare the paragraph with the heading.
Underline, overline or strike through text.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
text-decoration: underline;
}Try this → Change this property and compare the paragraph with the heading.
Values are horizontal offset, vertical offset, blur and colour.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
text-shadow: 3px 3px 0 #7FFF00;
}Try this → Change this property and compare the paragraph with the heading.
Indent the first line of a paragraph.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
text-indent: 2em;
}Try this → Change this property and compare the paragraph with the heading.
Add an outline as an enhancement; keep a readable fill as a fallback.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
-webkit-text-stroke: 1px #FF1493;
}Try this → Change this property and compare the paragraph with the heading.
Six hex digits describe red, green and blue.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
color: #FF1493;
}Try this → Change the colour or transparency; keep the text legible.
Each RGB channel ranges from 0 to 255.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
color: rgb(255, 20, 147);
}Try this → Change the colour or transparency; keep the text legible.
Alpha controls colour transparency; 0 is transparent and 1 opaque.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background-color: rgba(127, 255, 0, .4);
}Try this → Change the colour or transparency; keep the text legible.
Hue is an angle; saturation and lightness are percentages.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
color: hsl(328, 100%, 54%);
}Try this → Change the colour or transparency; keep the text legible.
The background fills the content and padding area.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background-color: #7FFF00;
color: #000000;
}Try this → Change the colour or transparency; keep the text legible.
Opacity affects the whole element, including its text and children.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
opacity: .5;
}Try this → Change the colour or transparency; keep the text legible.
Define named values on :root and read them with var().
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>:root {
--accent: #FF1493;
}
h1, p {
color: var(--accent);
}Try this → Change --accent and watch both elements update.
Space outside the box.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background: #7FFF00;
margin: 20px;
}Try this → Increase the value and compare the space inside and outside the box.
Space inside the box.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background: #7FFF00;
padding: 24px;
}Try this → Increase the value and compare the space inside and outside the box.
The preferred width of the content box unless border-box is used.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background: #7FFF00;
width: 240px;
}Try this → Increase the value and compare the space inside and outside the box.
A ceiling that still allows the box to shrink.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background: #7FFF00;
max-width: 28ch;
}Try this → Increase the value and compare the space inside and outside the box.
A minimum width can cause overflow when the viewport is narrower.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background: #7FFF00;
min-width: 260px;
}Try this → Increase the value and compare the space inside and outside the box.
border-box includes padding and borders in the specified width.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>p {
background: #7FFF00;
box-sizing: border-box;
}Try this → Increase the value and compare the space inside and outside the box.
Blocks start new lines; inline boxes flow with text.
<div class="layout">
<div>HTML</div>
<div>CSS</div>
<div>TYPE</div>
</div>.layout div {
display: inline;
background: #7FFF00;
}Try this → Change the gap, track count or box size.
Flexbox arranges content along one main axis. Wrap handles extra items.
<div class="layout">
<div>HTML</div>
<div>CSS</div>
<div>TYPE</div>
</div>.layout {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
}Try this → Change the gap, track count or box size.
Grid defines rows and columns. minmax(0, 1fr) permits shrinking tracks.
<div class="layout">
<div>HTML</div>
<div>CSS</div>
<div>TYPE</div>
</div>.layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}Try this → Change the gap, track count or box size.
Absolute positioning uses the nearest positioned ancestor. z-index controls stacking within stacking contexts.
<div class="layout">
<div>HTML</div>
<div>CSS</div>
<div>TYPE</div>
</div>.layout { position: relative; height: 140px; }
.layout div { position: absolute; padding: 20px; background: #7FFF00; }
.layout div:nth-child(2) { left: 50px; top: 30px; z-index: 2; background: #FF1493; }Try this → Change the gap, track count or box size.
Overflow controls content extending beyond a box. auto provides scrollbars when needed.
<div class="layout">
<div>HTML</div>
<div>CSS</div>
<div>TYPE</div>
</div>.layout {
width: 150px;
height: 90px;
overflow: auto;
}
.layout div { padding: 30px; background: #7FFF00; }Try this → Change the gap, track count or box size.
Start with narrow-screen rules, then add a min-width media query. clamp() sets a minimum, preferred value and maximum.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 {
font-size: clamp(2rem, 6vw, 5rem);
}
p {
max-width: 60ch;
}
@media (min-width: 600px) {
body { padding: 40px; }
}Try this → Resize the browser; the iframe has its own viewport width. Change 600px to 400px.
A transition connects states; keyframes define a sequence. The paragraph has a 1s duration, .2s delay and ease-out timing.
<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>h1 {
transition: color .3s ease, transform .3s ease;
}
h1:hover {
color: #FF1493;
transform: rotate(-3deg) scale(1.05);
}
p {
animation: enter 1s ease-out .2s both;
}
@keyframes enter {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
h1 { transition: none; }
p { animation: none; }
}Try this → Hover over the title or rerun the preview. Change the delay.