ole) Xen
Css
Cheat Sheet@CODE.CLASH
Selectors
ares Universal Selector
#id {} Osa
-class {} SE acs
yee) DES Cela
ere Co ae GIs Sct sg
Tiree Ene s Child Selector
ees General Sibling Sel
ere) Descendant Selecto
div[att="val"]{} Naae ieee tad
Units
eet
Centime’
r
Crepe trai
Pica (1 pica = 12 points)
Fura CS Cee ee a
Pixel (1 pixel = 1/96 inch
Ce cee RC) Oe CR Co ate)
CU amas
X-height of the element's font
ec ieuC ame Cy ites)
eee eC:
NecUie eens
Viewport's width
Smaller of viewport's height or widthPseudo Selectors
ase a Cid
ee cm ees he
Pei res
ieesbe tee ts
Demet
eee
fee ees
Tarek Gy N-th sibling
eee Cesare eG) N-th sibling from the end
peri ec) eta e tT
peerer| lepers rent)
Tree) OTSA E BK
th-of -type(n) mere eer meta
eee teen 71108) SUS Mh me he MR Mee el:
eee (eres ere a aes
eee eres 3 First sibling of its type
Tea Only child of its type
fata eee mete)
Coo Cleats
eae ur mee
cetera Se eC ae rere ae ms
first-letter eee Meets d
ceieee ts Style for the first line of text
las Insert content before an element
erase pCa ae ee ee PCT@CODE.CLASH
5 r
ES ES) Yi Tare |
meta ay
Benen io gC taa (ea ecm meee tg oO TT a a
ie ee ee Cel)
list-style-type: inside | outside;
eae Cry
per Sioa tet re ea @)
Position
ise tl
Postec Pees ys Ces Costa me Cot we eee. SC
eects esc is
top | right | bottom | left
ees
float: left | right | none
varus og
Pas Ul eae eo CL
// Clear Floating
CoC ee Ce a ee a)@CODE.CLASH
Background
background-color: #FFF2EB
background-image: url()
Dr Ee Rie So sae een a ced
(mutate ri
Cereus eect eC cy esc mm C UTS ts
background-position: top | right | bottom | left | center
Font Properties
font-style: normal | italic | oblique
font-variant: normal | small-caps
Pee eee eT ae Pe Te eC
Pete emi re Oa Co eC ee ae BELL)
Betacam
Seo em te aC ee
Cee eA CLC ae cg@CODE.CLASH
Text Properties
pester sete Cade Meet a mca mere t ag
Re eee eee Coe ete em ec)
Re teet aeek) Sa
STL ter eee PBC Ee P eae ML) aL 2
UEC PE Cac eee ae a eee
Rotor vE Leo eae Th eae Mee Cra ee nd
oc eCu mee res Chasm C Uist
text-decoration: none | underline | overline | lint-through
Reet es cen eee Me Chen ie ecard
etter Mime ute ts
text-overflow: clip | ellipsis | string | initial | inherit
Be terol Pa eC Lo Le oe
| initial] inheritTransition
icst metre st hee me ror as meen mci ets
| ease-in-out | cubic-Bezier(num,num,num,num) ;
tet n seem yee
transitions-delay: time;
transitions-duration: time;
Aras CUS Sele) as ae URC eis)
transitions-timing-function transitions-delay;
Animation
Sr eCums ues ue Cee eC osu Ce amc C oS rg
este eas Gn mm Sem Seto
EDP SCE UCea ame Ol) Li
POPC ie Gi tie tet mst
EUFLiS tine Cael
EUs Cire ie ete Taare a Ce a MTL Ca
animation-direction: normal | alternate;
Rte C URC Cres Cube aia ees Cur
PUCiSCib Soci Henin Ori mec
eau!
animations: animation-name animation-duration animation-timing-function
Custer Cau sub atstRac Us Cues)Bi celaciielaa)
ie a la)
Birr
BLE
Re
SCL
RO
See
Rute ae
che Te FED)
PIC Cmna
er eacnr i ecnr)
skewX(angle) :
ro aeuthea is
i La)
auc
ae
MUSCLE
SUSE
RSL
RSL
Deseo C MSC r is
Rotate element around a specified angle
Seale element
CCIE La mCCo Ca
Gti weer CL me ecb
meio mc ocuae CL meme res
translate3d(x, y, z): Translate (move) element
rotateX(angle):
rotateY(angle):
eter yt
scale3d(x, y, z):
Pir case OP es
Rotate element around the X-axis
Rotate element around the Y-axis
Rotate element around the Z-axis
Be lg
Set the perspective viewThanks For Your Attention
396 133K Ria)
Posts ima ley)
Imtiyaz | Coding | Web Developer
ORs
* Web Development | Javascript | React
Se am et ek de aL
* DM/Email Us For [ Collab | Promo |
lor ronnd
Q_ Broadcast channel + 2,736 members
Following ~ Leer
Fy Imtivaz NANDASANIYA