Visual CSS

Basics

CSS Color

COLOR picker
Color Names RGB Color #ffa500 HSL Color hsl(51 100 50)
OPACITY

Font

Text Decoration

Text Shadow
Outline Text

Underline • Overline • Line-Through

Letter Spacing • Word Spacing

First letter
First-line of an essay sets out the thesis and tone.
add text before/after

Line Wrap

white-space ↩
Line Wrap
overflow↩
wrap
Text Alignment, Justification

Border box

margin
padding
Margin vs Padding
Box Sizing
Border
Outline
Round Corners
Box Shadow

Layout

Flexbox
2
3
Table Layout
3 Columns Layout

Multi-Column Layout

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, «and what is the use of a book,» thought Alice «without pictures or conversation?».

Position and Layers

DISPLAY Hide
Position
position: fixed
overlap
z-index
Center
OverFlow, Scrollbar. Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, «and what is the use of a book,» thought Alice «without pictures or conversation?».
text overlay img alice 2022-03-15-s250
Text Over Image
tile B-s64 Text Flow Around Image. xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
• Flowing • List • Items

background

Background image Linear Gradient Repeating Linear Gradient Radial Gradient Conic Gradient

CSS Effects

Image Rollover 2D Transform
CSS Animation ♥
Transition

CSS Misc