Property Valid Values Example

Font Properties
font-family font name or type font-family: Arial;
font-variant:small-
font-variant normal | small-caps
caps;
font-style normal | italic font-style:italic;
font-weight normal | bold font-weight:bold;
xx-large | x-large | large | medium | small | x-small | xx-
font-size font-size:12pt;
small] | larger | smaller | percentage | length
font-style | font-variant | font- weight | font-size | line-
font font: bold 12pt Arial;
height | font-family
Text Properties
color color color: red;
direction ltr | rtl direction: ltr;
line-height normal | number | length | percentage line-height:15pt;
letter-spacing normal | length letter-spacing:5pt;
word-spacing normal | length word-spacing:5pt;
vertical-align sub | super vertical-align:sub;
white-space normal | nowrap | pre | pre-line | pre-wrap white-space: nowrap;
text-
text-transform capitalize | uppercase | lowercase | none
transform:lowercase;
text-align left | right | center | justify text-align:center;
text-indent length | percentage text-indent:25px;
text-
text-
none | underline | overline | line-through decoration:underline
decoration
overline;
text-
text-decoration-
decoration- none | dashed | dotted | double | wavy
style:wavy;
style
text-
text-decoration-
decoration- none | color
color:red;
color
Color and Background Properties
background- background-color:
color | transparent
color yellow;
background- background-
url | none
image image:url(house.jpg);
 top -- left | center | right
background- background-position:
center -- left | center | right
position top center;
bottom -- left | center | right
background- background-repeat:
no-repeat | repeat-x | repeat-y | space | round
repeat no-repeat;
background- background-size:
auto | contain | cover | 50% | length (70px)
size cover;
background- normal | multiply | screen | overlay | darken | lighten | background-blend-
blend-mode color-dodge | saturation | color | luminosity mode: overlay;
background- background-clip:
border-box | padding-box | content-box
clip padding-box;
background- background-origin:
border-box | padding-box | content-box
origin border-box;
background: silver
background transparent | color | url | repeat | scroll | position url(house.jpg) repeat-
y;
Gradient colors ( background property values )
background: linear-
linear-gradient degree | color | percentage | top | left | bottom | right gradient(45deg , blue ,
red);
background: radial-
degree | color | percentage | ellipse at top | closest-side | gradient(circle at
radial-gradient
closest-corner | farthest-side | farthest-corner center , blue 0 , purple
, red 100%);
background: conic-
degree | color | percentage | top | left | bottom | right |
conic-gradient gradient(red , orange ,
from | to
yellow , green , blue);
background:
repeating- repeating-linear-
degree | color | percentage | top | left | bottom | right
linear-gradient gradient(to left top ,
purple , white 20px);
background:
repeating-radial-
repeating- degree | color | percentage | top | left | bottom | right | gradient(farthest-
radial-gradient from | to corner at 25% 25% ,
yellow 0 , orange , red
45%);
background:repeating-
conic-gradient(purple ,
repeating- degree | color | percentage | top | left | bottom | right |
#a6ffa6 , #2dbbff ,
conic-gradient from | to
#97ffff , #c4c4ff
50%);
List Properties
disk | circle | square | decimal | lower-roman | upper- list-style-type:upper-
list-style-type
roman | lower-alpha | upper-alpha | none alpha;
list-style- list-style-
url | none
image image:url(icFile.gif);
list-style- list-style-
inside | outside
position position:inside;
list-style: square
list-style keyword | position | url outside
url(icFolder.gif);
Table Properties
border- border-
separate | collapse
collapse collapse:collapse;
border- (left,right,top,bottom),length (10px),(20px 10px -- row
border-spacing: 20px;
spacing wise left and right | top and bottom)
table-layout auto | fixed table-layout: fixed;
caption-side top | bottom caption-side: bottom;
empty-cells show | hide empty-cells: hide;
Box Properties
height length | auto height:200px;
width length | percentage | auto width:80%;
max-height length | auto max-height:700px;
max-width length | percentage | auto width:70%;
min-height length | auto min-height:300px;
min-width length | percentage | auto min-width:50%;
margin-top length | percentage | auto margin-top:5px;
margin-right length | percentage | auto margin-right:5px;
margin-
length | percentage | auto margin-bottom:1em;
bottom
margin-left length | percentage | auto margin-left:5pt;
margin: 10px 5px
10px 5px;
(top, right, bottom,
left)
margin: 10px 5px
margin length | percentage | auto{1,4}
10px;
(top, left and right,
bottom)
margin: 10px 5px;
(top and bottom, left
 and right)
margin: 10px;
(All sides)
padding-top length | percentage padding-top:10%;
padding-right length | percentage padding-right:15px;
padding-
length | percentage | auto padding-bottom:1em;
bottom
padding-left length | percentage | auto padding-left:5pt;
padding: 10px 5px
10px 5px;
(top, right, bottom,
left)
padding: 10px 5px
10px;
padding length | percentage | auto{1,4} (top, left and right,
bottom)
padding: 10px 5px;
(top and bottom, left
and right)
padding: 10px;
(All sides)
overflow-x visible | hidden | scroll | auto overflow-x: hidden;
overflow-y visible | hidden | scroll | auto. overflow-y: scroll;
overflow visible | hidden | scroll | auto. overflow: auto;
box-sizing: content-
box-sizing border-box | content-box
box;
Border Properties
border-top- border-top-width:
thin | medium | thick | length | length
width 10px;
border-right- border-right-
thin | medium | thick | length
width width:medium;
border- border-bottom-
thin | medium | thick | length
bottom-width width:thick;
border-left- border-left-
thin | medium | thick | length
width width:15px;
border-width: 3px 5px
border-width thin | medium | thick | length {1,4}
3px 5px;
border-top- border-top-
color
color color:purple;
border-right- border-right-
color
color color:whitesmoke;
border- border-bottom-
color
bottom-color color:black;
border-left- border-left-
color
color color:#C0C0C0;
border-color color {1,4} border-color: #ff000;
border-top-
none | solid | double | groove | ridge | inset | outset border-top-style:solid;
style
border-right- border-right-
none | solid | double | groove | ridge | inset | outset
style style:double;
border- border-bottom-
none | solid | double | groove | ridge | inset | outset
bottom-style style:groove;
border-left-
none | solid | double | groove | ridge | inset | outset border-left-style:none;
style
border-style none | solid | double | groove | ridge | inset | outset border-style:ridge;
border-top: medium
border-top border-width | border-style | border-color
outset red;
border-right: thick
border-right border-width | border-style | border-color
inset maroon;
border-bottom: 10px
border-bottom border-width | border-style | border-color
ridge Gray;
border-left: 1px
border-left border-width | border-style | border-color
groove red;
border border-width | border-style | border-color border: thin solid blue;
border-radius: 25px;
(The value applies to
all four corners)
border-radius: 15px
50px;
(The value applies to
top-left and bottom-
right corners)
border-radius: 15px
border-radius top | right | bottom | left 50px 40px;
(The value applies to
top-left corner, second
value applies to top-
right and bottom-left
corners, and third
value applies to
bottom-right corner)
border-radius: 15px
50px 30px 5px;
 (first value applies to
top-left corner, second
value applies to top-
right corner, third
value applies to
bottom-right corner,
and fourth value
applies to bottom-left
corner)
Outline Properties
outline-width thin | medium | thick | length {1,4} outline-width: 7px;
outline-style none | solid | double | groove | ridge | inset | outset outline-style:double;
outline-color color outline-color:purple;
outline:7px double
outline width style color
#00d793;
Positioning Properties
position absolute | relative | static position:absolute;
top length | percentage | auto top:0px;
right length | percentage | auto right:10px;
bottom length | percentage | auto bottom:20px;
left length | percentage | auto left:0px;
clip:rect(0px 200px
clip shape | auto
200px 0px);
visibility visible | hidden | inherit visibility:visible;
display none | block | inline | inline-block | list-item display:none;
float none | left | right float:none;
auto | crosshair | default | hand | move | e-resize | ne-
cursor resize | nw-resize | n- resize | se-resize | sw- resize | s- cursor:hand;
resize | w-resize | text | wait | help
clear none | left | right | both clear:left;
z-index auto | integer z-index:-1;
Pseudo Classes
p:active {
active using other properties
float:left;color:blue; }
p:hover {
hover using other properties
float:left;color:blue; }
p:link {
link using other properties background:pink;color
:blue; }
visited using other properties p:visited {color:blue; }
p:focus {color:orange;
focus using other properties
}
ul li:first-child
first-child using other properties {border-top:2px solid
purple; }
ol:nth-child(2n)
nth-child(2n) using other properties li{background: purple;
}
Pseudo-elements
p::first-line {
first-line using other properties
color:#8080ff}
p::first-letter { font-
first-letter using other properties
size:20px;}
p::before { content:
before using content property
url("img/logo.png"); }
p::after { content:
after using content property url("img/logo2.png");
}
Media Types
@media all{ body {
all Used for all media type devices. background: #e0e0e0;
}}
@media screen{ body
screen Used primarily for color computer screens. { background:
#0Ed453; } }
@media screen{ body
print Used for printers. { background:
#0Ed453; } }
Printing Properties
page-break- page-break-
auto | always | left | right
before before:always;
page-break- page-break-
auto | always | left | right
after before:auto;
Attribute Selectors
input[type="te input[type="text"] {
using all other properties
xt"] color:red;}
Text Overflow
text-overflow clip | ellipsis text-overflow: clip;
 word-wrap: break-
word-wrap normal | break-word | initial | inherit
word;
word-break normal | break-all | keep-all | initial | inherit word-break: break-all;
Flexbox Properties
display :flex;
display flex | inline-flex
display :inline-flex;
flex-direction: row;
flex-direction: row-
reverse;
flex-direction row | row-reverse | column | column-reverse
flex-direction: column;
flex-direction:
column-reverse;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap nowrap | wrap | wrap-reverse
flex-wrap: wrap-
reverse;
flex-flow: row
nowrap;
flex-flow: row wrap;
flex-flow: row wrap-
reverse;
row | row-reverse | column | column-reverse | nowrap |
flex-flow flex-flow: column
wrap | wrap-reverse
nowrap;
flex-flow: column
wrap;
flex-flow: column
wrap-reverse;
row-gap length | normal | inherit | initial | unset row-gap:20px;
column-gap length | normal | inherit | initial | unset column-gap:20px;
gap:20px 40px;
gap row-gap | column-gap
gap: 40px;
justify-content: flex-
start;
justify-content: flex-
end;
justify-content: center;
flex-start | flex-end | center | space-between | space-
justify-content justify-content: space-
around | space-evenly
around;
justify-content: space-
evenly;
justify-content: space-
between;
 align-items: stretch;
align-items: flex-start;
align-items stretch | flex-start | flex-end | center | baseline align-items: flex-end;
align-items: center;
align-items: baseline;
align-content: stretch;
align-content:flex-start
;
align-content:center;
stretch | flex-start | flex-end | center | space-between |
align-content align-content:flex-end;
space-around | space-evenly
align-content:space-
between;
align-content:space-
around;
order length | normal | inherit | initial | unset order: 4;
flex-grow length | normal | inherit | initial | unset flex-grow: 4;
flex-shrink length | normal | inherit | initial | unset flex-shrink: 3;
flex-basis length | normal | inherit | initial | unset | auto flex-basis:400px;
flex Flex-grow , flex-shrink , flex-basis flex:0 1 auto;
align-self: auto;
align-self: flex-start;
align-self stretch | flex-start | flex-end | center | baseline | auto align-self: flex-end;
align-self: center;
align-self: stretch;
Grid Properties
display :grid;
display grid | inline-grid
display :inline-grid;
grid-template-
columns: 100px 200px
300px;
grid-template-
columns: 2fr 2fr 1fr;
grid-template-
grid-template- columns:repeat(3,200p
length
columns x);
grid-template-
columns:repeat(3,1fr)
300px;
grid-template-
columns: repeat(3,
minmax(200px, 1fr));
grid-template- grid-template-rows:
length
rows 100px 200px 300px;
 grid-template-rows:
2fr 2fr 1fr;
grid-template-
rows:repeat(3,200px);
grid-template-
rows:repeat(3,1fr);
grid-template:
grid-template grid-template-columns | grid-template-rows repeat(3,1fr) /
repeat(4,1fr);
row-gap length | normal | inherit | initial | unset row-gap:20px;
column-gap length | normal | inherit | initial | unset column-gap:20px;
gap:20px 40px;
gap row-gap | column-gap
gap: 40px;
justify-items:stretch;
justify-items:start;
justify-items start | end | center | stretch | baseline
justify-items:end;
justify-items:center;
align-items: stretch;
align-items: start;
align-items start | end | center | stretch | baseline
align-items: end;
align-items: center;
place-items: center
align-items justify-items
place-items start;
start | end | center | stretch | baseline
place-items: center;
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-
start | end | center | space-between | space-around |
justify-content around;
space-evenly
justify-content: space-
evenly;
justify-content: space-
between;
align-content: stretch;
align-content:flex-start
;
align-content:center;
stretch | start | end | center | space-between | space-
align-content align-content:flex-end;
around | space-evenly
align-content:space-
between;
align-content:space-
around;
 align-content justify-content place-content: end
place-content stretch | start | end | center | space-between | space- center;
around | space-evenly place-content: center;
grid-auto-flow: row;
grid-auto-flow row | column grid-auto-flow:
column;
grid-auto-rows length grid-auto-rows: 100px;
grid-auto- grid-auto-columns:
length
columns 100px;
grid-column-
length | span grid-column-start: 1;
start
grid-column-end: 4;
grid-column-
length | span grid-column-end: span
end
3;
start end grid-column: 1 / span
grid-column
length | span 2;
grid-row-start length | span grid-row-start: 1;
grid-row-end: 4;
grid-row-end length | span
grid-row-end: span 3;
start end
grid-row grid-row: 1 / span 2;
length | span
justify-self: stretch;
justify-self: start;
justify-self start | end | center | stretch | baseline
justify-self: end;
justify-self: center;
align-self: stretch;
align-self: start;
align-self start | end | center | stretch | baseline
align-self: end;
align-self: center;
align-self justify-self place-self: start;
place-self
start | end | center | stretch | baseline place-self: start center;
grid-template-areas:
'nav nav nav'
'head head head'
grid-template- 'sidebar content
specific name
areas: content'
'aside1 aside2 aside3'
'footer footer footer'
;
grid-area specific name grid-area: head;
Transform Properties
 transform:
translate(20px,200px);
/* x,y */
transform translate() | translateX() | translateY() | translateZ() transform:
translateY(250px);
transform:
translateZ(250px);
transform:
rotate(250deg);
transform:
rotateX(250deg);
transform rotate() | rotateX() | rotateY()| rotateZ()
transform:
rotateY(250deg);
transform:
rotateZ(250deg);
transform: scale(2,1);
/* width,height */
transform scale() | scaleX() | scaleY()
transform: scaleX(2);
transform: scaleY(1);
transform:
skew(40deg,60deg);/*
x,y */
transform skew() | skewX() | skewY() transform:
skewX(30deg);
transform:skewY(10de
g);
matrix() - transform:
transform matrix(scaleX(),skewY(),skewX(),scaleY(),translateX() matrix(1.5,0,0.7,0.5,0,
,translateY()) 2);
Transitions Properties
transition-
Time transition-duration: 2s;
delay
transition-
Time transition-duration: 2s;
duration
transition-property:
background transform;
transition- transition-property:
Property name
property all;
transition-property:
background;
transition- linear | ease | ease-in | ease-out | ease-in-out | step-start | transition-timing-
timing- step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | function: linear;
function initial | inherit transition-timing-
 function: ease-in;
transition-timing-
function:ease-out ;
transition-timing-
function: ease-in-out;
transition-timing-
function:cubic-
bezier(0.075, 0.82,
0.165, 1) ;
transition: all 2s linear
transition property duration timing-function delay
0s;
Animation Properties
animation will gradually change from the current style to the new style at
@keyframes
certain times.
animation- animation-name:
Specific Name
name example;
animation- animation-duration:
Time
delay 2s;
animation- animation-duration:
Time
duration 2s;
animation- animation-iteration-
length | infinite
iteration-count count: infinite;
animation-
direction:normal
animation-
direction:reverse
animation-
normal | reverse | alternate | alternate-reverse animation-
direction
direction:alternate
animation-
direction:aleternate-
reverse
animation-timing-
function: linear;
animation-timing-
function: ease-in;
animation-timing-
animation- linear | ease | ease-in | ease-out | ease-in-out | step-start |
function:ease-out ;
timing- step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) |
animation-timing-
function initial | inherit
function: ease-in-out;
animation-timing-
function:cubic-
bezier(0.075, 0.82,
0.165, 1) ;
 animation-fill-mode:
forwards
animation-fill-mode:
animation-fill- backwards
forwards | backwards | both
mode animation-fill-mode:
none
animation-fill-mode:
both
animation: example 5s
name duration timing-function delay iteration-count
animation linear 2s infinite
direction fill-mode
alternate;