Some CSS Tricks

Just some simple CSS examples I want to remember 😊

▶ Tables

Odd/Even Rows:

tr:nth-child(odd) {background: #FFF} tr:nth-child(even) {background: #CCC}

bla bla	bla bla	bla bla	bla bla	bla bla	bla bla
bla bla	bla bla	bla bla	bla bla	bla bla	bla bla
bla bla	bla bla	bla bla	bla bla	bla bla	bla bla
bla bla	bla bla	bla bla	bla bla	bla bla	bla bla

Odd/Even Columns:

First yellow, then from 3, every second column grey:

td:first-child {background: #FF0} td:nth-child(2n+3) {background: #CCC}

bla bla	bla bla	bla bla	bla bla	bla bla	bla bla
bla bla	bla bla	bla bla	bla bla	bla bla	bla bla
bla bla	bla bla	bla bla	bla bla	bla bla	bla bla

Spacing/Padding:

cellpadding="10" → padding: 10px;
cellspacing="10" → border-spacing: 10px;

▶ Lists

Ordered:

Space between list items with margin-bottom:

li {margin-bottom: 5px;} li::marker {font-weight: bold; color: red}

bla bla
bla bla
bla bla
bla bla

Un-ordered:

Unicode bullets: • = "\2022", ◦ = \25E6" and ▪ = "\25AA"

ul {list-style: none} li::before {display: inline-block; width: 1.2em; margin-left: -1em; content: "\2022"; color: red}

bla bla
bla bla
bla bla
bla bla

▶ HTML Symbols

✅ ✅
❎ ❎
❌ ❌
✓ ✓
✗ ✗
✔ ✔
✘ ✘
▶ ▶
➤ ➤
➜ ➜
→ →

▶ Table cells

Remove all styles for element: all: unset;

table.mytable td:nth-child(1) {width:220px;} table.mytable td:nth-child(2) {all:unset;}

Remove font style for element: font: unset;

table td:nth-child(1) {vertical-align: middle;} table td:nth-child(2) {font: unset;color:unset}

▶ Vertical text

.vertical {writing-mode: vertical-rl; text-orientation: sideways;} .upright {writing-mode: vertical-rl; text-orientation: upright;}

This is vertical This upright

▶ Light/Dark Image

The first <source> element matching the media query is used.
The <img> tag is a fallback if no match is found.

▶ Light/Dark Div

dark

light

.light {display: block;} .dark {display: none;} @media (prefers-color-scheme: dark) { .light {display: none;} .dark {display: block;} } <div class="dark">dark <img src="dark.png"></div> <div class="light">light <img src="light.png"></div>

▶ Fit background image to div

Scale background image to fit inside the div:

background-size: contain;

Scale background image to cover the whole div:

background-size: cover;

▶ Insert spaces/tabs

Some Text Tabbed Text

tab {display: inline-block; margin-left: 40px;}

eg: Some Text <tab>Tabbed Text