CSS Shorthand Property Cheat Sheet PDF

1). Background Shorthand

background-color: #e65b00;
background-image: url(user.jpg);
background-repeat: no-repeat;
background-position: right top;

Shorthand

background: #e65b00 url(user.jpg) no-repeat right top;


2). Font Shorthand

font-style: italic;
font-weight: bold;
font-size: 20px;
line-height: 1.4;
font-family: 'Poppins', sans-serif;

Shorthand

font: italic bold 20px 1.4 'Poppins', sans-serif;


3). Border Shorthand

border-width: 2px;
border-style: solid;
border-color: #e65b00;

Shorthand

border: 2px solid #e65b00;


4). Margin Shorthand

margin-top: 20px;
margin-right: 25px;
margin-bottom: 10px;
margin-left: 2px;

Shorthand

margin: 20px 25px 10px 2px;


5). Padding Shorthand

padding-top: 20px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 2px;

Shorthand

padding: 20px 25px 10px 2px;


6). List Style Shorthand

list-style-type: square;
list-style-position: inside;
list-style-image: url(square.png);

Shorthand

list-style: disc inside url(circle.png);


7). Position Shorthand

top: 10px;
right: 20px;
bottom: 30px;
left: 4px;

Shorthand

inset: 10px 20px 30px 4px;


8). Outline Shorthand

outline-width: 1px;
outline-style: solid;
outline-color: #000;

Shorthand

outline: 1px solid #000;


9). Animation Shorthand

animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 3s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: forwards;

Shorthand

animation: move 2s ease-in-out 3s 4 alternate forwards;


CSS Shorthand Property Cheat Sheet PDF: Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad