CSS Cheat Sheet

Flexbox

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

Perfect Centering

div {
 display: flex;
 height: 300px;
 justify-content: center;
 align-items: center;
}

Gradient

background-image: linear-gradient(direction, color1, color2);
background-image: linear-gradient(to right/to left, white, grey);

Reference – https://www.w3schools.com/css/css3_gradients.asp

Border-Radius

border-bottom-right/bottom-left/top-right/top-left: 10px;

Image Maps

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Box-Shadow

box-shadow: 5px(down) 10px(right) red(color);

CSS Media Queries

@media screen and (min-width: 480px) {
 body {
       background-color: blue;
 }
}

If viewport/view area is larger than 480px in the case above, background-color will change to blue.

max-width: 480px will change the color when viewing area is lesser than mentioned.

Published by Jayesh

I code and energize, loves sharing my journey.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s