Pinktra
Learn
Products
Services
Roadmap ↗
About
Ctrl
K
Close
🔎 Enter at least 1 characters to search
Menu
Learn
Products
Services
Roadmap ↗
About
CSS
CSS Foundations
Intro of CSS
-
The Cascade
Cascade layers (@layer)
Specificity
Inheritance
The cascade order
!important
@import
@scope
all, revert, revert-layer, unset
CSS Reset ( Normalize )
-
CSS Rules & Selectors
Simple Selectors
Combinator Selectors
Attribute Selectors
Pseudo Class Selectors
Pseudo element Selectors
where()
has()
-
CSS Nesting
CSS Nesting
& nested selectors
@media nested rules
VARIABLES & FUNCTIONS
-
Custom Properties
--variable-name
var()
-
Math Functions
calc()
clamp()
min()
max()
-
Color Functions
rgb(), rgba(), hsl(), hsla()
oklab(), oklch()
lab(), lch()
color-mix()
color()
light-dark()
-
Gradient Functions
linear-gradient()
repeating-linear-gradient()
radial-gradient()
repeating-radial-gradient()
conic-gradient()
repeating-conic-gradient()
-
System & Attr Functions
env()
attr()
url()
UNITS
Absolute: px, cm, mm, in, pt, pc
Relative: em, rem
Percentage
Viewport: vw, vh, vmin, vmax
Dynamic viewport: dvh, dvw
Modern viewport: svh, svw, lvh, lvw
Typography: ch, ex, cap, ic, lh, rlh
Angles: deg, rad
Time: s, ms
Grid: fr
Container query units: cqw, cqh, cqi, cqb, cqmin, cqmax
LAYOUT
-
Display & Box Model
display
box-sizing
box-decoration-break
float
clear
overflow
overscroll-behavior
overscroll-behavior-inline
overscroll-behavior-block
visibility
z-index
aspect-ratio
-
Standard spacing
margin
Margin Collapse
padding
-
Logical Properties
margin-inline, margin-block
padding-inline, padding-block
inset-inline, inset-block
border-inline, border-block
block-size
inline-size
min-block-size
max-block-size
min-inline-size
max-inline-size
-
Positioning
position
top, right, bottom, left
inset
object-fit
object-position
isolation
-
Multi-column Layout
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-width
columns
break-after, break-before, break-inside
-
Contain
contain
FLEXBOX
Intro of Flex Box
Advantage of FlexBox
Vertical Center
Architecture of Flex
Flex Box Properties
Flex Box Container Properties
Flex Box Items Properties
-
Container Properties
display: flex
display: inline-flex
flex-direction
flex-wrap
flex-flow
justify-content (flex)
align-items (flex)
align-content (flex)
Flex Gap
-
Items Properties
flex-grow
flex-shrink
flex-basis
flex
order
align-self (flex)
GRID
Intro of Grid
Advantage of Grid
Grid Properties
Grid Container Properties
Grid Items Properties
-
Container Properties
display: grid
display: inline-grid
grid-template-columns
grid-template-rows
grid-template
Grid Gap
justify-items
align-items (grid)
place-items
justify-content (grid)
align-content (grid)
place-content
grid-auto-flow
grid-auto-flow dense
grid-auto-columns
grid-auto-rows
-
Items Properties
grid-column
grid-row
justify-self
align-self (grid)
place-self
-
Grid Areas
grid-template-areas
-
Additional
minmax()
repeat()
auto-fill, auto-fit
fit-content() (grid)
subgrid
Nested Grid
RESPONSIVE QUERIES
-
Media Queries
@media
Level 4 syntax (range queries)
-
Container Queries
@container
container-type
container-name
-
Feature Queries
@supports
SIZING
width, min-width, max-width
height, min-height, max-height
fit-content() fn
fit-content
TYPOGRAPHY
-
Core Typography
font
font-family
font-size
font-style
font-weight
font-stretch
font-variant-numeric
letter-spacing
word-spacing
line-height
line-clamp
text-align
text-align-last
color
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration
text-underline-offset
text-underline-position
text-transform
text-indent
text-wrap
text-overflow
white-space
word-break
line-break
overflow-wrap
text-wrap vs white-space vs word-break vs overflow-wrap
hyphens
hyphenate-character
list-style-image
list-style-position
list-style-type
list-style
vertical-align
unicode-range
-
Typography Enhancements
font-smoothing
font-display
-
Writing Modes & Direction
writing-mode
direction
unicode-bidi
text-orientation
text-combine-upright
-
Drop Caps
initial-letter
BACKGROUND & COLORS
background-color
background-image
background-repeat
background-size
background-position
background-attachment
background-clip
background-origin
background
BORDERS & OUTLINE
border-radius
border-width
border-color
border-style
border
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image
outline-width
outline-color
outline-style
outline-offset
outline
TABLES
border-collapse
border-spacing
table-layout
caption-side
empty-cells
EFFECTS
box-shadow
text-shadow
opacity
mix-blend-mode
background-blend-mode
mask-image
mask-repeat
mask-position
mask-size
mask-origin
mask-clip
mask-mode
mask-type
mask-composite
clip-path
shape-outside
shape-image-threshold
shape-margin
drop-shadow()
FILTERS
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
filter
backdrop-filter
TRANSITIONS & ANIMATIONS
transition-property
transition-duration
transition-timing-function
transition-delay
transition-behavior
transition
animation
animation-name
animation-duration
animation-timing-function
animation-direction
animation-delay
animation-iteration-count
animation-fill-mode
animation-play-state
@keyframes
view-transition-name
@scroll-timeline
animation-timeline
view-timeline-name
animation-composition
offset-path
offset-distance
offset-rotate
TRANSFORMS & 3D
transform
transform-origin
transform-style
rotate
scale
perspective
perspective-origin
backface-visibility
INTERACTION & UI
-
Core Interaction & UI
accent-color
appearance
caret-color
color-scheme
cursor
pointer-events
resize
scroll-behavior
scroll-margin
scroll-padding
scroll-padding-inline, scroll-padding-block
scroll-margin-inline, scroll-margin-block
scroll-snap-align
scroll-snap-stop
scroll-snap-type
touch-action
user-select
will-change
scrollbar-color
scrollbar-width
scrollbar-gutter
scrollbar pseudo elements
field-sizing
forced-color-adjust
SVG & Web Graphics
fill
stroke
CONTENT & GENERATED ELEMENTS
content
quotes
counter-reset
counter-increment
counter()
counter-set()
string-set
PRINTING
@page
@media print
unicode-range
Previous
Next