CSS Cheat Sheet

There is no formal topic called ‘Cheat Sheet’ and this topic compiles all important topics in CSS into a single page.

Refer this ‘CSS Cheet Sheet’ for complete elements and style properties of CSS.

CSS Backgrounds

background-color:Red;
background-color:#fff;
background-image:url(imagename.png);
background-repeat:repeat|repeat-x|repat-y|no-repeat;
background-position:top|center|bottom|left|right;

CSS Text

color:colorname|hex_code|rgb(rr,gg,bb)|rgba(rr,gg,bb,Alpha),hsl(h,s,l);
text-shadow:horizontal-offset vertical-offset blur-radius color|initial|inherit|none;
direction:ltr(default)|rtl|inherit|initial|unset;
word-wrap-|normal|break-word|initial|inherit;
-webkit-text-stroke-1.5px red;
Individual stroke property:
-webkit-text-stroke-width:3px;
-webkit-text-stroke-color:blue;
text-transformation:none|uppercase|lowercase|capitalize|full-width|initial|inherit|unset;

CSS Table

border-collapse:separate|collapse;
border-spacing:15px;
caption-side:top|bottom;
empty-cells:show|hide;
table-layout:auto|fixed;

CSS Font Alignment

letter-spacing:9px|-1.5em|normal|initial|inherit|unset;
text-align:left|center|right|justify;
text-indent:bold|50px|-4%|3em|initial|inherit|unset;
text-decoration:none|underline|overline|line-through;
line-height:2px|o.8em|2.5|50%|normal|inherit|initial|unset;
word-spacing:2px|-0.3em|normal|initial|inherit| unset;
white-space:normal|no-wrap|pre|pre-line|pre-wrap;
tab-size:3px;
vertical-align:2px|baseline|sub|super|top|middle|bottom|text-top|text-bottom;
font-size-adjust:0.70|initial|inherit|unset|none;
font-weight:900|normal|lighter|thick|thin|length|bold;
font-size:14px|1.2em|4vw|60%|small|smaller|x-small|xx-small|medium|large|larger|x-large|xx-large|inherit|unset|initial;
font-family:arial;
font-style:normal;
font-variant:normal|small-caps;
font-height:3px;

Selectors

Positioning

Position:static|absolute|relative|fixed;
top:12px|auto;
right:12px|auto;
left:12px|auto;
bottom:12px|auto;
overflow:visible|hidden|scroll|auto;
overflow-x:hidden;
overflow-y:scroll;
clip-path:url(image.jpg)|shape|auto;
z-index:-4|auto|initial|inherit;
overflow-wrap:normal|break-word;
text-overflow:clip|ellipsis;

Borders

border:12px;
border-width:12px|thin|medium|thick;
border-color:green;
border-top:2px solid  black;
border-right:3px dashed black;
border-bottom:4px dotted black;
border-left:5px double black;
border:2px solid black;
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Lists

list-style-type:disc|circle|square|none;
list-style-image:url(image.jpg);
list-style-position:inside|outside;

Outlines

outline:black solid 12px;
outline-color:black;
outline-style:solid;
ouline-width:12px|thin|medium|thick;
outline-offset:10px;

Mouse Cursors

cursor:alias;
cursor:all-scroll;
cursor:auto;
cursor:cell;
cursor:context-menu;
cursor:col-resize;
cursor:copy;
cursor:crosshair;
cursor:default;
cursor:e-resize;
cursor:ew-resize;
cursor:help;
cursor:move;
cursor:n-resize;
cursor:ne-resize;
cursor:nesw-resize;
cursor:ns-resize;
cursor:nw-resize;
cursor:nwse-resize;
cursor:no-drop;
cursor:none;
cursor:not-allowed;
cursor:pointer;
cursor:progress;
cursor:row-resize;
cursor:s-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:text;
cursor:url(image.jpg);
cursor:vertical-text;
cursor:w-resize;
cursor:wait;
cursor:zoom-in;
cursor:zoom-out;
cursor:initial;
cursor:inherit;

Flexbox

Flex Container – parent

display:flex|inline-flex;
flex-direction:row|row-reverse|column|column-reverse;
flex-wrap:nowrap|wrap|wrap-reverse;
flex-flow:row wrap|row nowrap|row wrap-reverse|row-reverse wrap|row-reverse nowrap|row-reverse wrap-reverse|column wrap|column nowrap|column wrap-reverse|column-reverse wrap|column-reverse nowrap|column-reverse wrap-reverse;
justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly;
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
align-items:flex-start|flex-end|center|baseline|stretch;

Flex Items – Children

flex-grow:0;
flex-shrink:1;
flex-basis:3px|auto;
align-self:center|stretch|start|flex-start|end|flex-end|auto|self-start|self-end|baseline|inherit|initial|unset;
order: 3;

Margins

margin-top:50px|initial|inherit|auto;
margin-right:80px|initial|inherit|auto;
margin-bottom:60px|initial|inherit|auto;
margin-left:45px|initial|inherit|auto;

margin:50px; (Value for all four margins)
margin:50px 80px; (top&bottom right&left)
margin:50px 80px 60px; (top right&left bottom)
margin:50px 80px 60px 45px; (top right bottom left)

Padding

padding-top:50px|initial|inherit;
padding-right:60px|initial|inherit;
padding-bottom:45px|initial|inherit;
padding-left:80px|initial|inherit;

padding:50px; (Value for all four paddings)
padding:50px 80px; (top&bottom right&left)
padding:50px 80px 60px; (top right&left bottom)
padding:50px 80px 60px 45px; (top right bottom left)

Columns

columns:50px 4; (width count)
column-count:4|auto|inherit|initial;
column-width:50px|auto|inherit|length;
column-gap:20px;
column-fill:auto|inherit|initial|balance;
column-span:all|inherit|initial|none;
column-rule:4px solid green; (width style color)
column-rule-color:Green;
column-rule-width:4px;
column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Width and Height

width:400px|initial|inherit|auto;
max-width:600px;
min-width:400px;
height:250px|initial|inherit|auto;
max-height:600px;
min-height:400px;

Media Queries

@media all and(min-width:480px) {}
@media all and(min-width:480px) and (max-width:768) {}
@media all and(min-width:768px) and (max-width:1024px) {}
@media all and(min-width:1025px) and (max-width:1280px) {}

Desktop	
@media only screen and(min-width:1025px) {}

Phone(Landscape)	
@media only screen and(min-width:321px) and (max-width:580px) {}

Phone(Portrait)
@media only screen and(max-width:320px) {}

Tablet(Landscape)	
@media only screen and(min-width:1025px) and (max-width:1024) {}

Tablet(Portrait)	
@media only screen and(min-width:581px) and (max-width:768px) {}

CSS Grid Properties

display: grid;
display: inline-grid;
display: subgrid;

grid-template Property

Defines Rows and Columns along width

grid-template-columns: 25px 35px 46px;
grid-template-rows: 32px 44px 52px;
grid-template-columns: repeat(2, 25px);
grid-template-rows: repeat(2, auto);
grid-template-columns: 20px auto 20px;
grid-template-rows: 20px auto 32px;
grid-template-columns: 18% 18% auto;
grid-template-rows: 18% auto 18%;

grid-column Property

Defines Columns location on grid items

grid-column-start: 2;
grid-column-end: 5;
grid-column-start: span 4;
grid-column-start: 3;
grid-column-end: 5;
grid-column: 2 / 4
grid-column: 2 / span 4

grid-row Property

Defines Rows location on grid items

grid-row-start: 3;
grid-row-end: 5;
grid-row-start: span 2;
grid-row-start: 3;
grid-row-end: 5;
grid-row: 1 / 4;
grid-row: 1 / span 4;

grid-gap Property

Gives space between column and row

grid-row-gap: 2px;
grid-column-gap: 4px;
grid-gap: 2px 8px;
grid-gap: 8px;

grid-row + grid-column Property

grid rows plus grid columns

grid-row: 2 / span 3;
grid-column: 2 / span 3;
grid-row: 4 / span 4;
grid-column: 4 / span 4;

justify-items Property

Aligns Row content of Grid item

justify-items: start;
justify-items: center;
justify-items: stretch;
justify-items: end;

justify-content Property

Justifies grid content on row

justify-content: start;
justify-content: center;
justify-content: stretch;
justify-content: end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

justify-self Property

Aligns Exact Row content of Grid item

justify-self: start;
justify-self: center;
justify-self: stretch;
justify-self: end;

grid-auto-flow Property

Defines Auto spacing grid items

grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;

align-items Property

Aligns Column content of grid item

align-items: start;
align-items: center;
align-items: stretch; 
align-items: end;

align-content Property

Justifies grid content on Column

align-content: start;
align-content: center;
align-content: stretch;
align-content: end;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;

align-self Property

Aligns Exact Column content of Grid item

align-self: start;
align-self: center;
align-self: stretch; 
align-self: end;