Also check : HTML CHEAT SHEET
Note: The options are
mentioned using or. You should choose any one of the options.
BACKGROUND
background-color: lightblue or rgba(0,0,0,0.3) or hsl(120,
100%,50%) ; opacity : 0.6;
background-image:
url(“smile.gif”);
background-image:
linear-gradient (to right, red, yellow);
background-repeat:
repeat-x or repeat-y or no-repeat;
background-position:
right top;
background-attachment:
fixed;
BORDER
border-style: solid;
border-width: 5px or
medium or 2px 10px 4px 20px;
border-color: red or
red green blue yellow;
border-top-style:
dotted;
border-right-style:
solid;
border-bottom-style:
dotted;
border-left-style:
solid;
OUTLINE
outline-style: solid
or double or outset;
outline-color: red or
green or yellow or invert;
outline-width: thin
or medium or thick or 4px;
outline-offset: 15px;
MARGIN
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 25px;
margin: 0 0 50px 0;
PADDING
Padding-top: 50px;
Padding-right: 30px;
Padding-bottom: 50px;
Padding-left: 80px;
TEXT
text-align: center or
right or left or justify;
text-decoration: none
or overline or underline or line-through;
text-transform:
uppercase or lowercase or capitalize;
text-indent: 50px;
text-overflow: clip
or ellipsis or inherit;
text-shadow: 0 0 3px
#FF0000;
word-wrap:
break-word;
word-break: break-all
or keep-all ;
word-spacing: 10px 0r
-5px;
white-space: nowrap;
letter-spacing: 3px
or -3px;
line-height: 0.8 or
1.8
direction: rtl;
FONT
font-family: “Times
New Roman”, Times, Serif;
font-style: normal;
or italic or oblique;
font-size: 40px or
2.5em or 100% or 10vw;
font-weight: bold;
font-variant: normal
or small-caps or overflow or visible or hidden or scroll or auto;
ANIMATION
animation-name:
example;
animation-duration:
4s;
animation-iteration-count:
3;
animation-direction:
alternate-reverse or infinite or reverse or alternate;
COLUMN
column-count: 3;
column-gap: 40px;
column-rule-style:
solid;
column-rule-width:
1px;
column-rule-color:
lightblue;
TABLE
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
width: 100%
height:30px;
text-align: left;
}
HYPERLINKS
a: link {color: red;}
a: visited {color:
green;
text-decoration: none;}
a: hover {color:
hotpink;
text-decoration: underline;
background-color:
light green;
display:
inline-block;
}
a: active {color:
blue;
background-color:
lightgreen;
}
LIST
ul.a {
list-style-type: circle or square or
none;
list-style-image: url(‘smile.gif’);
list-style-position: outside or inside;
ol.c {
list-style-type: upper-roman or
lower-alpha;
}
PAGINATION
. pagination {display:
inline-block;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
MEDIA
@media screen and (min-width:
480px)
{
#leftsidebar {width:200px;
float: left;}
#main {margin-left:216px;}
}
KEYFRAMES FOR ANIMATIONS
@keyframes example {
from {background-color: red;}
to {background-color:
yellow;}
25% {background-color:
yellow;}
50% {background-color:
red;}
100% {background-color:
green;}
}
OTHER
height:200px;
width: 300px or 50%;
max-width: 500px;
color: blue or green;
resize: horizontal or
vertical;
display: inline or
block or none;
position: static or
relative or fixed or absolute or sticky;
box-sizing:
border-box;
box-shadow: 10px
10px;
-webkit-transition-delay:
1s;
transition-delay:1s;
SHORTHAND PROPERTIES
background: #ffffff
url (“tree.png”) no-repeat right top;
border: 5px solid
red;
margin: 25px 50px
75px 100px;
padding: 25px 50px
75px 100px;
list-style: square
inside url (“smile.gif”);
More Engineering Blogs : CLICK HERE