Some CSS Tricks
Just some simple CSS examples I want to remember 😊
▶ Tables
Odd/Even Rows:
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:
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:
- bla bla
- bla bla
- bla bla
- bla bla
Un-ordered:
Unicode bullets: • = "\2022", ◦ = \25E6" and ▪ = "\25AA"
- bla bla
- bla bla
- bla bla
- bla bla
▶ HTML Symbols
- ✅ ✅
- ❎ ❎
- ❌ ❌
- ✓ ✓
- ✗ ✗
- ✔ ✔
- ✘ ✘
- ▶ ▶
- ➤ ➤
- ➜ ➜
- → →
▶ Table cells
Remove all styles for element: all: unset;
Remove font style for element: font: unset;
▶ Vertical text
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
Fit background image to div
Scale background image to fit inside the div:
Scale background image to cover the whole div: