Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>CSS - Snippets [AR]New to Visual Studio Code? Get it now.
CSS - Snippets [AR]

CSS - Snippets [AR]

Angelo Rafael

|
502 installs
| (0) | Free
Full CSS Snippets with auto-completion
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

CSS Snippets [AR]

Support to [ .css | .scss | .sass | .vue ]

Use Ctrl + F to find your properties faster

Features

  1. Snippets
  2. Auto-completions
  3. Sort properties

Sort properties

Auto-completions

Most properties have autocomplete

After typing a property, and pressing Space, a list of options will be suggested, just for this property. Unlike the result when pressing Ctrl + Space.

  • font-weight:
    • 100|200|300|400|500|600|700|800|900|normal|bold|bolder|lighter|number|initial|inherit
  • flex-direction:
    • row|row-reverse|column|column-reverse|initial|inherit
  • font-size:
    • 1px...99px|medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit

Table os Snippets

Property Snippets
& ..e
& { } ..ef
&__ ..eb ..ebem
.className { } ...
::after ..a ..aft ..after
::before ..b ..bef ..before
::marker ..mk ..marker
::selection ..sl ..selection
:active ..ac ..act ..active
:any-link ..al ..any-link
:autofill ..af ..autofill
:blank ..blk ..blank
:checked ..c ..chk ..check ..checked
:default ..d ..df ..default
:defined ..dfn ..defined
:dir(ltr/rtl) ..dir
:disabled ..ds ..dis ..disabled
:empty ..emp ..empty
:enabled ..eni ..enb ..enabled
:first ..fs ..first
:first-child ..fsc ..ftch ..first-child
::first-letter ..fsl ..ftlt ..first-letter
::first-line ..fsln ..ftln ..first-line
:first-of-type ..fst ..fstp ..first-of-type
:focus ..fc ..focus
:focus-visible ..fcv ..fcvis ..focus-visible
:focus-within ..fcw ..fcwit ..focus-within
:fullscreen ..fus ..fullscreen
:has() ..ha ..has
:host() ..ht ..host
:host-context() ..htc ..host-context
:hover ..h ..hv ..hover
:in-range ..ir ..in-range
:indeterminate ..ind ..indeterminate
:invalid ..inv ..invalid
:is() ..is
:lang() ..l ..lng ..lang
:last-child ..lsc ..last-child
:last-of-type ..lstp ..last-of-type
:left ..lf ..left
:link ..lk ..link
:not() ..n ..not
:nth-child() ..nthc ..nth-child
:nth-last-child() ..nthlc ..nth-last-child
:nth-last-of-type() ..nthlot ..nth-last-of-type
:nth-of-type() ..nthot ..nth-of-type
:only-child ..oc ..only-child
:only-of-type ..oot ..only-of-type
:optional ..opt ..optional
:out-of-range ..or ..out-of-range
:placeholder ..ph ..placeholder
:placeholder-shown ..phs ..placeholder-shown
:read-only ..ro ..read-only
:read-write ..rw ..read-write
:required ..rq ..required
:right ..rt ..right
:root ..ro ..root
:scope ..sc ..scope
:target ..tg ..target
:valid ..vl ..valid
:visited ..vis ..visited
:where ..w ..where
align-content: ; ac
align-items: ; ai
align-self: ; as
all: ; al all
all: inherit; alh allh
all: initial; ali alli
all: unset; alu allu
animation: ; ani animation
animation-delay 1s; anidl animation-delay
animation-direction: ; anidir animation-direction
animation-duration: 1s; anid animation-duration
animation-fill-mode: ; anifm animation-fill-mode
animation-iteration-count: ; anic animation-iteration-count
animation-name: ; anin animation-name
animation-play-state: ; anips animation-play-state
animation-timing-function: ; anitf animation-timing-function
attr() at attr
backface-visibility: ; bv backface-visibility
background: ; bk back background
background-attachment: ; bka backa background-attachment
background-blend-mode: ; bkb bkbm backbm background-blend-mode
background-clip: ; bkcp backcp background-clip
background-color: ; bkc backc background-color
background-image: ; bki backi background-image
background-origin: ; bko backo background-origin
background-position: ; bkp backp background-position
background-repeat: ; bkr backr background-repeat
background-size: ; bks backs background-size
border: 1px solid #000; bd border
border-bottom: 1px solid #000; bdb border-bottom
border-bottom-color: ; bdbc border-bottom-color
border-bottom-left-radius: ; bdblr border-bottom-left-radius
border-bottom-right-radius: ; bdbrr border-bottom-right-radius
border-bottom-style: ; bdbs border-bottom-style
border-bottom-width: ; bdbw border-bottom-width
border-collapse: ; bdcp border-collapse
border-color: ; bdcl border-color
border-image: ; bdi border-image
border-image-outset: ; bdio border-image-outset
border-image-repeat: ; bdir border-image-repeat
border-image-slice: ; bdisl border-image-slice
border-image-source: ; bdisr border-image-source
border-image-width: ; bdiw border-image-width
border-left: 1px solid #000; bdl border-left
border-left-color: ; bdlc border-left-color
border-left-style: ; bdls border-left-style
border-left-width: ; bdlw border-left-width
border-radius: 10px; bdr border-radius
border-radius: 10px; bdr1 border-radius-1
border-radius: 10px 10px; bdr2 border-radius-2
border-radius: 10px 10px 10px; bdr3 border-radius-3
border-radius: 10px 10px 10px 10px; bdr4 border-radius-4
border-right: 1px solid #000; bdr border-right
border-right-color: ; bdrc border-right-color
border-right-style: ; bdrs border-right-style
border-right-width: ; bdrw border-right-width
border-spacing: ; bdsp border-spacing
border-style: ; bdst bdstl border-style
border-top: 1px solid #000; bdt border-top
border-top-color: ; bdtc border-top-color
border-top-left-radius: ; bdtlr border-top-left-radius
border-top-right-radius: ; bdtrr border-top-right-radius
border-top-style: ; bdts border-top-style
border-top-width: ; bdtw border-top-width
border-width: ; bdw border-width
bottom: ; bt btt bottom
box-after: ; bxa box-after
box-decoration-break: ; bxdb box-decoration-break
box-shadow: ; bxs box-shadow
box-sizing: ; bxz box-sizing
break-before: ; brb break-before
break-inside: ; bri break-inside
calc() calc
caption-side: ; cps caption-side
caret-color: : ccl caret-color
@charset "UTF-8"; ch charset
clear: ; clr clear
clip: ; cp clip
clip-path: ; cpth clip-path
color: ; cl color
column-count: ; colc column-count
column-fill: ; colf column-fill
column-gap: ; colg column-gap
column-rule: ; colrl column-rule
column-rule-color: ; colrc column-rule-color
column-rule-style: ; colrst colrstl column-rule-style
column-rule-width: ; colrw column-rule-width
column-span: ; colsp column-span
column-width: ; colwd column-width
columns: ; cols columns
conic-gradient() conic conic-gradient
content: ; ctt content
counter() counter
counter-increment: ; cti counter-increment
counter-reset: ; ctr counter-reset
cubic-bezier(n,n,n,n) cubic cubic-bezier
cursor: default; cr cursor
cursor: alias; cral cursor-alias
cursor: auto; cra cursor-auto
cursor: ceils; crc cursor-ceils
cursor: col-resize; crcr cursor-col-resize
cursor: context-menu; crcm cursor-context-menu
cursor: copy; crcp cursor-copy
cursor: crosshair; crch cursor-crosshair
cursor: default; crd cursor-default
cursor: help; crh cursor-help
cursor: inherit; crh cursor-inherit
cursor: initial; cri cursor-initial
cursor: move; crm cursor-move
cursor: none; crn cursor-none
cursor: pointer; crp cursor-pointer
cursor: progress; crpg cursor-progress
cursor: text; crt cursor-text
cursor: vertical-text; crvt cursor-vertical-text
cursor: wait; crw cursor-wait
cursor: zoom-in; crzi cursor-zoom-in
cursor: zoom-out; crzo cursor-zoom-out
direction: ; dir direction
direction: inherit; dirh direction-inherit
direction: initial; diri direction-initial
direction: ltr; dirr direction-ltr
direction: rtl; dirl direction-rtl
display: ; d dis display
display: block; db display-block
display: contents; dc display-contents
display: flex; df display-flex
display: grid; dg display-grid
display: inherit; dh display-inherit
display: initial; di display-initial
display: inline; di display-inline
display: inline-block; dib display-inline-block
display: inline-flex; dif display-inline-flex
display: inline-grid; dig display-inline-grid
display: inline-table; dit display-inline-table
display: list-item; dli display-list-item
display: none; dn display-none
display: run-in; dri display-run-in
display: table; dt display-table
display: table-caption; dtc display-table-caption
display: table-cell dtc display-table-cell
display: table-column; dtcl display-table-column
display: table-column-group; dtcg display-table-column-group
display: table-footer-group; dtfg display-table-footer-group
display: table-header-group; dthg display-table-header-group
display: table-row; dtr display-table-row
display: table-row-group; dtrg display-table-row-group
em em
empty-cells: ; empc empty-cells
filter: ; ft filter
filter: blur(10px); ftb ftbl filter-blur
filter: brightness(10%); ftbr filter-brightness
filter: contrast(10%); ftc filter-contrast
filter: drop-shadow(); ftds filter-drop-shadow
filter: grayscale(10%); ftg ftgs filter-grayscale
filter: hue-rotate(10deg); fthr filter-hue-rotate
filter: inherit; fth filter-inherit
filter: initial; fti filter-initial
filter: invert(10%); fti filter-invert
filter: none; ftn filter-none
filter: opacity(10%); fto filter-opacity
filter: saturate(10%); ftst filter-saturate
filter: sepia(10%); fts ftsp filter-sepia
filter: url(); ftu filter-url
flex: ; f fx flex
flex-basis: ; fb flex-basis
flex-direction: ; fd flex-direction
flex-direction: column; fdc flex-direction-column
flex-direction: column-reverse; fdcr flex-direction-column-reverse
flex-direction: inherit; fdh flex-direction-inherit
flex-direction: initial; fdi flex-direction-initial
flex-direction: row; fdr flex-direction-row
flex-direction: row-reverse; fdrr flex-direction-row-reverse
flex-flow: ; ff flex-flow
flex-grow: ; fg flex-grow
flex-shrink: ; fs flex-shrink
flex-wrap: ; fw flex-wrap
flex-wrap: inherit; fwh flex-wrap-inherit
flex-wrap: initial; fwi flex-wrap-initial
flex-wrap: nowrap; fwn flex-wrap-nowrap
flex-wrap: wrap; fww flex-wrap-wrap
flex-wrap: wrap-reverse; fwr flex-wrap-wrap-reverse
float: ; fl float
float: inherit; flh float-inherit
float: initial; fli float-initial
float: left; fll float-left
float: none; fln float-none
float: right; flr float-right
font: ; fn font
font-face: ; fnfa font-face
font-family: ; fnf font-family
font-family-generic: ; fnfg font-family-generic
font-feature-settings: ; fnfs font-feature-settings
font-kerning: ; fnk font-kerning
font-size: ; fns font-size
font-size-adjust: ; fnsa font-size-adjust
font-size: 1em; fnse font-size-em
font-size: 16%; fnsp font-size-percentual
font-size: 16px; fnsx font-size-pixel
font-size: 1rem; fnsr font-size-rem
font-stretch: ; fnst font-stretch
font-style: ; fnstl font-style
font-variant: ; fnv font-variant
font-variant-caps: ; fnvc font-variant-caps
font-weight: ; fnw font-weight
gap: ; gp gap
gap: column-gap; gpc gap-column-gap
gap: row-gap; gpr gap-row-gap
grid: ; gd grid
grid-area: ; gda grid-area
grid-auto-columns: ; gdac grid-auto-columns
grid-auto-flow: ; gdaf grid-auto-flow
grid-auto-rows: ; gdaf grid-auto-rows
grid-column: ; gdcl grid-column
grid-column-end: ; gdcle grid-column-end
grid-column-gap: ; gdclg grid-column-gap
grid-column-start: ; gdcla grid-column-start
grid-gap: ; gdg grid-gap
grid: inherit; gdh grid-inherit
grid: initial; gdi grid-initial
grid: none; gdn grid-none
grid-row: ; gdr grid-row
grid: grid-template-rows / grid-template-columns; gdrc grid-row-column
grid-row-end: ; gdre grid-row-end
grid-row-gap: ; gdrg grid-row-gap
grid-row-start: ; gdrs grid-row-start
grid-template: ; gdt grid-template
grid-template-area: ; gdta grid-template-area
grid-template-columns: ; gdtc grid-template-columns
grid-template-rows: ; gdtr grid-template-rows
hanging-punctuation: ; hp hanging-punctuation
height: ; h ht height
height: auto; hta height-auto
height: inherit; hth height-inherit
height: initial; hti height-initial
height: 100%; htp height-percentual
height: 10px; htx height-pixel
hsl() hsl
hyphens: ; hy hyphens
hyphens: auto; hya hyphens-auto
hyphens: inherit; hyh hyphens-inherit
hyphens: initial; hyi hyphens-initial
hyphens: manual; hym hyphens-manual
hyphens: none; hyn hyphens-none
image-rendering: ; imgr image-rendering
@import ; i import
@import ; il import-list-of-mediaqueries
@import '0'; is import-string
@import url(); iu import-url
isolation: ; iso isolation
isolation: auto; isa isolation-auto
isolation: inherit; ish isolation-inherit
isolation: initial; isi isolation-initial
isolation: isolate; iss isolation-isolate
justify-content: ; jc justify-content
justify-content: center; jcc justify-content-center
justify-content: flex-end; jcfe justify-content-flex-end
justify-content: flex-start; jcfs justify-content-flex-start
justify-content: inherit; jch justify-content-inherit
justify-content: initial; jci justify-content-initial
justify-content: space-around; jcsa justify-content-space-around
justify-content: space-between; jcsb justify-content-space-between
justify-content: space-evenly; jcse justify-content-space-evenly
@keyframes mymove { from { } to { } } kf1 key-frames1
@keyframes mymove { 0% { } 100% { } } kf2 key-frames2
@keyframes mymove { 0% { } 50% { } 100% { } } kf3 key-frames3
left: ; l lf left
left: auto; lfa left-auto
left: inherit; lfh left-inherit
left: initial; lfi left-initial
left: percentual; lfp left-percentual
left: pixel; lfx left-pixel
letter-spacing: ; lts letter-spacing
line-height: ; lnh line-height
line-height: inherit; lnhh line-height-inherit
line-height: initial; lnhi line-height-initial
line-height: normal; lnhn line-height-normal
line-height: 20px; lnhx line-height-pixel
linear-gradient() linear linear-gradient
list-style: ; ltst ltstl list-style
list-style-image: ; ltsi list-style-image
list-style-position: ; ltsp list-style-position
list-style-type: ; ltst list-style-type
margin: ; mg margin
margin: auto; mga margin-auto
margin-bottom: ; mgb margin-bottom
margin: inherit; mgh margin-inherit
margin: initial; mgi margin-initial
margin-left: ; mgl margin-left
margin: 100%; mgp margin-percentual
margin: 10px; mgx margin-pixel
margin-right: ; mgr margin-right
margin-top: ; mgt margin-top
margin: 0; mg0 margin-zero
mask-image: ; mki mask-image
mask-mode: ; mkm mask-mode
mask-origin: ; mko mask-origin
mask-position: ; mkp mask-position
mask-repeat: ; mkr mask-repeat
mask-size: ; mks mask-size
matrix(a, b, c, d, tx, ty) mtx matrix
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) mtx3 matrix3d
max() max
max-height: ; maxh max-height
max-width: ; maxw max-width
@media ... { } md media
min() min
min-height: ; minh min-height
min-width: ; minw min-width
mix-blend-mode: ; mixbm mix-blend-mode
object-fit: ; obf object-fit
object-position: ; obp object-position
opacity: ; op opacity
order: ; od order
orphans: ; oph orphans
outline: ; otl outline
outline-color: ; otlc otlcl outline-color
outline-offset: ; otlo outline-offset
outline-style: ; otls outline-style
outline-width: ; otlw outline-width
overflow: ; of overflow
overflow-wrap: ; ofw overflow-wrap
overflow-x: ; ofx overflow-x
overflow-y: ; ofy overflow-y
padding: ; pd padding
padding-bottom: ; pdb padding-bottom
padding-left: ; pdl padding-left
padding: 2%; pdp padding-percentual
padding: 16px; pdx padding-pixel
padding-right: ; pdr padding-right
padding-top: ; pdt padding-top
page-break-after: ; pba page-break-after
page-break-before: ; pbb page-break-before
page-break-inside: ; pbi page-break-inside
perspective(d) prp perspectiva
perspective: ; pp perspective
perspective-origin: ; ppo perspective-origin
px x px pixel
pointer-events: ; pe pointer-events
position: ; ps position
quotes: ; qt quotes
radial-gradient() radial radial-gradient
rem rem
repeating-conic-gradient() rconic rptcg repeating-conic-gradient
repeating-linear-gradient() rlinear rptlg repeating-linear-gradient
repeating-radial-gradient() rradial rptrg repeating-radial-gradient
resize: ; rs resize
rgb(255, 255, 255) rgb
rgba(0,0,0,0.5) rgba
right: ; r rt right
rotate(45deg) rtt rotate
rotate3d(0, 1, 0, 60deg) rtt3 rotate3d
rotateX(45deg) rttx rotateX
rotateY(45deg) rtty rotateY
rotateZ(90deg) rttz rotateZ
row-gap: ; rgp row-gap
row-gap: inherit; rgph row-gap-inherit
row-gap: initial; rgpi row-gap-initial
row-gap: normal; rgn row-gap-normal
row-gap: 10%; rgpp row-gap-percentual
row-gap: 10px; rgpx row-gap-pixel
scale(x) scl scl1 scale
scale(x, y) scl2 scale2
scaleX(x) sclx scaleX
scaleY(y) scly scaleY
scaleZ(z) sclz scaleZ
scroll-behavior: ; sb scroll-behavior
skew(10deg) skw skw1 skew
skew(10deg, 10deg) skw2 skew2
skewX(10deg) skwx skewx
skewY(10deg) skwy skewy
tab-size: ; tbs tab-size
table-layout: ; tbl table-layout
text-align: ; tta text-align
text-align-last: ; ttal text-align-last
text-decoration: ; ttd text-decoration
text-decoration-color: ; ttdc text-decoration-color
text-decoration-line: ; ttdl text-decoration-line
text-decoration-style: ; ttds text-decoration-style
text-decoration-thickness: ; ttdt text-decoration-thickness
text-indent: ; tti text-indent
text-justify: ; ttj text-justify
text-overflow: ; tto text-overflow
text-shadow: ; tts text-shadow
text-transform: ; ttt text-transform
top: ; t tp top
transform: ; trf transform
transform-origin: ; trfo transform-origin
transform-style: ; trfs transform-style
transition: all 0.2s ease; trs transition
transition-delay: ; trsdl transition-delay
transition-duration: ; trsd transition-duration
transition-property: ; trsp transition-property
transition-timing-function: ; trstf transition-timing-function
translate3d(10px, 0, 0px) tlt3d translate-3d
translateX(50%) tltxp translate-x-percentage
translateX(-50%) tltxpm translate-x-percentage-minus
translateX(10px) tltxx translate-x-pixel
translateX(-10px) tltxxm translate-x-pixel-minus
translateY(50%) tltyp translate-y-percentage
translateY(-50%) tltypm translate-Y-percentage-minus
translateY(10px) tltyx translate-y-pixel
translateY(-10px) tltyxm translate-y-pixel-minus
translateZ(50%) tltzp translate-z-percentage
translateZ(-50%) tltzpm translate-Z-percentage-minus
translateZ(10px) tltzx translate-z-pixel
translateZ(-10px) tltzxm translate-z-pixel-minus
translate(50%) tltp tltp1 translate-percent
translate(50%, 50%) tltp2 translate-percent-2
translate(-50%) tltpm tltpm1 translate-percent-minus-1
translate(-50%, -50%) tltpm2 translate-percent-minus-2
translate(10px) tltx tltx1 translate-pixel
translate(10px, 10px) tltx2 translate-pixel-2
translate(-10px) tltxm tltxm1 translate-pixel-minus
translate(-10px, -10px) tltxm2 translate-pixel-minus-2
unicode-bidi: ; unib unicode-bidi
user-select: ; us user-select
&::v-deep { } ..vd ..v-deep
var(--name, value) var
$name: value; svar vars
vertical-align: ; vta vertical-align
visibility: ; vs vis visibility
white-space: ; ws white-space
widows: ; ww widows
width: ; w wd width
width: auto; wda width-auto
width: inherit; wdh width-inherit
width: initial; wdi width-initial
width: 100%; wdp width-percentual
width: 10px; wdx width-pixel
word-break: ; wdb word-break
word-wrap: ; wdw word-wrap
writing-mode: ; wtm writing-mode
z-index: ; zi z-index

Enjoy It!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft