Zoom to 120% to make it readable
Here’s a list of the top 100 CSS properties, their functions, and
example values/options:
| CSS Property | Function | Example Values/Options |
|---|---|---|
color |
Sets the text color of an element. |
red, #ff0000,
rgb(255,0,0), hsl(0,100%,50%)
|
background-color |
Sets the background color of an element. |
blue, #00f,
rgba(0,0,255,0.5)
|
width |
Sets the width of an element. |
100px, 50%, auto,
calc(100% - 20px)
|
height |
Sets the height of an element. |
200px, 100%, auto,
vh, vw
|
margin |
Sets the margin area on all sides of an element. |
10px, 1rem, auto,
0 10px 0 5px
|
padding |
Sets the padding area on all sides of an element. |
5px, 2rem, 10px 15px,
inherit
|
border |
Sets the border around an element. |
1px solid black, 2px dashed blue,
none
|
font-size |
Sets the font size of text. |
16px, 1.5rem, 120%,
xx-small, larger
|
font-family |
Specifies the font family for text. |
'Arial', sans-serif,
'Courier New', monospace,
'Times New Roman', serif
|
font-weight |
Specifies the weight (thickness) of the font. |
normal, bold, bolder,
lighter, 400, 700
|
line-height |
Sets the height of a line of text. |
normal, 1.5, 120%,
2rem
|
display |
Specifies how an element should be displayed. |
block, inline, flex,
grid, none,
inline-block
|
position |
Specifies the positioning method of an element. |
static, relative,
absolute, fixed,
sticky
|
top |
Specifies the top position of an element. |
10px, 50%, auto
|
right |
Specifies the right position of an element. |
20px, 15%, auto
|
bottom |
Specifies the bottom position of an element. |
30px, 10%, auto
|
left |
Specifies the left position of an element. |
40px, 25%, auto
|
overflow |
Controls what happens if content overflows an element's box. |
visible, hidden,
scroll, auto
|
z-index |
Specifies the stack order of an element. |
auto, 0, 10,
999
|
background-image |
Sets a background image for an element. |
url('image.jpg'), none,
linear-gradient(red, yellow)
|
background-size |
Specifies the size of the background image. |
cover, contain,
100px 200px, auto,
50%
|
background-repeat |
Specifies if/how the background image is repeated. |
repeat, no-repeat,
repeat-x, repeat-y
|
border-radius |
Rounds the corners of an element's border. |
5px, 50%, 1rem,
0 0 10px 10px
|
box-shadow |
Adds a shadow effect around an element's box. |
10px 10px 5px black, none,
inset 0 0 5px rgba(0,0,0,0.5)
|
text-align |
Specifies the horizontal alignment of text. |
left, right, center,
justify, start, end
|
vertical-align |
Specifies the vertical alignment of inline or table-cell elements. |
baseline, top,
middle, bottom, sub,
super
|
visibility |
Specifies whether an element is visible or hidden. |
visible, hidden,
collapse
|
opacity |
Sets the transparency level of an element. |
1 (opaque), 0 (transparent),
0.5 (semi-transparent)
|
cursor |
Specifies the type of cursor to be displayed when pointing at an element. |
pointer, default,
crosshair, move,
text, not-allowed,
wait
|
float |
Specifies whether an element should float to the left or right. |
left, right, none,
inline-start, inline-end
|
clear |
Specifies the behavior of the floating elements. |
left, right, both,
none
|
flex |
Specifies the flex-grow, flex-shrink, and flex-basis properties in a flex container. |
1, 0 1 auto, none,
2
|
flex-direction |
Specifies the direction of the flexible items. |
row, column,
row-reverse, column-reverse
|
justify-content |
Aligns items horizontally inside a flex container. |
flex-start, center,
space-between, space-around,
space-evenly
|
align-items |
Aligns items vertically inside a flex container. |
stretch, center,
flex-start, flex-end,
baseline
|
align-self |
Aligns a single item inside a flex container. |
auto, stretch,
center, flex-start,
flex-end
|
flex-wrap |
Specifies whether flex items should wrap when they overflow. |
nowrap, wrap,
wrap-reverse
|
grid-template-columns |
Defines the columns of a grid container. |
repeat(3, 1fr), 100px 200px,
auto
|
grid-template-rows |
Defines the rows of a grid container. |
auto, repeat(2, 50px),
min-content, max-content
|
grid-gap |
Specifies the space between grid items. |
10px, 1rem, 20px 10px
|
align-content |
Aligns the flex container's lines when there is extra space. |
flex-start, center,
space-between, space-around,
stretch
|
border-collapse |
Specifies whether table borders should collapse into a single border or be separate. | collapse, separate |
border-spacing |
Sets the distance between the borders of adjacent table cells. | 5px, 10px 20px |
table-layout |
Specifies the table layout algorithm. | auto, fixed |
content |
Inserts generated content (used with
::before and
::after pseudo-elements).
|
"text", attr(data-attribute),
counter(name)
|
transform |
Applies a transformation to an element (rotate, scale, skew, translate). |
rotate(45deg), scale(1.5),
translate(50px, 100px),
skew(20deg)
|
transition |
Specifies the transition between two states of an element. |
all 0.3s ease-in, color 0.2s,
width 0.5s linear
|
transition-duration |
Specifies the duration of the transition. |
0.3s, 500ms, 1s
|
animation |
Specifies keyframes and animation properties for an element. |
slide-in 2s ease-in-out infinite,
none
|
animation-duration |
Specifies how long an animation should take to complete one cycle. |
2s, 500ms, infinite
|
letter-spacing |
Sets the space between characters in text. |
normal, 1px, 0.05em,
0.1rem
|
word-spacing |
Sets the space between words in text. |
normal, 10px, 0.2rem
|
text-transform |
Controls the capitalization of text. |
uppercase, lowercase,
capitalize, none
|
text-decoration |
Specifies the decoration added to text. |
underline, overline,
line-through, none,
dotted, wavy
|
white-space |
Controls how white spaces inside an element are handled. |
normal, nowrap, pre,
pre-wrap, pre-line
|
clip |
Clips an absolutely positioned element. |
rect(0, 100px, 100px, 0), auto
|
outline |
Sets a line around an element outside the border. |
none, 1px solid black,
2px dashed blue, outline-color
|
outline-offset |
Specifies the space between an outline and the border edge. | 0, 5px, 10px |
filter |
Applies graphical effects like blur or contrast to an element. |
blur(5px), brightness(0.5),
contrast(2), grayscale(100%),
none
|
min-width |
Sets the minimum width of an element. |
100px, 50%, auto
|
max-width |
Sets the maximum width of an element. |
600px, 100%, none
|
min-height |
Sets the minimum height of an element. |
200px, 100%, auto
|
max-height |
Sets the maximum height of an element. |
500px, none, 100vh
|
backdrop-filter |
Applies graphical effects like blur or color shifts to the area behind an element. |
blur(5px), brightness(0.5),
contrast(2), grayscale(100%)
|
Komentar
Posting Komentar