css-cheatsheet

CSS Cheatsheet

CSS Declarations

Ada banyak sekali deklarasi CSS yang tersedia untuk digunakan. Namun, tidak semuanya diperlukan dalam pekerjaan sehari-hari. Sebenarnya, kalian dapat membuat situs web yang menarik hanya dengan memahami sebagian dari css declarations tersebut. Itulah kegunaan bootcamp Web Programming Hack, dimana kita akan mempersingkat waktu belajar kalian dengan membuang sebagian besar hal yang tidak terpakai.

Berikut ini adalah css declarations yang akan benar-benar kalian pakai:

Color and Background

1. color

   color: #000000; /* black */
   color: rgb(0, 0, 0); /* black */
   color: rgba(0, 0, 0, 1); /* black with full opacity */

2. background-color

   background-color: #ffffff; /* white */

3. background-image

   background-image: url('image.jpg');

4. background-repeat

   background-repeat: repeat; /* default */
   background-repeat: no-repeat;

5. background-position

   background-position: center;
   background-position: top right;

6. background-size

   background-size: cover;
   background-size: contain;

7. background-attachment

   background-attachment: scroll; /* default */
   background-attachment: fixed;

Text

1. font-family

   font-family: 'Arial', sans-serif;

2. font-size

   font-size: 16px;
   font-size: 1em;

3. font-weight

   font-weight: normal;
   font-weight: bold;
   font-weight: 700;

4. font-style

   font-style: normal;
   font-style: italic;

5. line-height

   line-height: 1.5;

6. letter-spacing

   letter-spacing: 2px;

7. text-align

   text-align: left;
   text-align: center;
   text-align: right;

8. text-decoration

   text-decoration: none;
   text-decoration: underline;
   text-decoration: line-through;

9. text-transform

   text-transform: none;
   text-transform: capitalize;
   text-transform: uppercase;
   text-transform: lowercase;

Box Model

1. width

   width: 100px;
   width: 50%;

2. height

   height: 100px;
   height: auto;

3. padding

   padding: 10px;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;

4. margin

   margin: 10px;
   margin-top: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   margin-left: 10px;

5. border

   border: 1px solid #000;
   border-top: 1px solid #000;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   border-left: 1px solid #000;

6. border-radius

   border-radius: 5px;

7. box-shadow

   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

Positioning

1. position

   position: static; /* default */
   position: relative;
   position: absolute;
   position: fixed;
   position: sticky;

2. top, right, bottom, left

   top: 10px;
   right: 10px;
   bottom: 10px;
   left: 10px;

3. z-index

   z-index: 10;

4. float

   float: left;
   float: right;
   float: none;

5. clear

   clear: left;
   clear: right;
   clear: both;
   clear: none;

Display and Visibility

1. display

   display: none;
   display: block;
   display: inline;
   display: inline-block;
   display: flex;
   display: grid;

2. visibility

   visibility: visible;
   visibility: hidden;

3. overflow

   overflow: visible; /* default */
   overflow: hidden;
   overflow: scroll;
   overflow: auto;

4. opacity

   opacity: 1; /* fully visible */
   opacity: 0.5; /* 50% visible */
   opacity: 0; /* fully transparent */

Flexbox

1. display

   display: flex;

2. flex-direction

   flex-direction: row; /* default */
   flex-direction: row-reverse;
   flex-direction: column;
   flex-direction: column-reverse;

3. justify-content

   justify-content: flex-start; /* default */
   justify-content: flex-end;
   justify-content: center;
   justify-content: space-between;
   justify-content: space-around;
   justify-content: space-evenly;

4. align-items

   align-items: stretch; /* default */
   align-items: flex-start;
   align-items: flex-end;
   align-items: center;
   align-items: baseline;

5. flex-wrap

   flex-wrap: nowrap; /* default */
   flex-wrap: wrap;
   flex-wrap: wrap-reverse;

6. align-content

   align-content: stretch; /* default */
   align-content: flex-start;
   align-content: flex-end;
   align-content: center;
   align-content: space-between;
   align-content: space-around;

7. flex-grow

   flex-grow: 0; /* default */
   flex-grow: 1;

8. flex-shrink

   flex-shrink: 1; /* default */
   flex-shrink: 0;

9. flex-basis

   flex-basis: auto; /* default */
   flex-basis: 100px;
   flex-basis: 0%;

10. flex

    flex: 1;
    /*
    shorthand for:
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    */

11. order

    order: 0; /* default */
    order: 1;

Grid

1. display

   display: grid;

2. grid-template-columns

   grid-template-columns: 1fr 1fr;
   grid-template-columns: 100px auto 100px;

3. grid-template-rows

   grid-template-rows: 1fr 2fr;
   grid-template-rows: 100px auto 100px;

4. grid-column-gap

   grid-column-gap: 10px;

5. grid-row-gap

   grid-row-gap: 10px;

6. grid-gap

   grid-gap: 10px;

7. grid-column

   grid-column: 1 / 3;

8. grid-row

   grid-row: 1 / 2;

CSS Variables

1. Defining Variables

   :root {
     --main-color: #06c;
     --padding: 10px;
   }

2. Using Variables

   element {
     color: var(--main-color);
     padding: var(--padding);
   }

Transitions and Animations

1. transition

   transition: all 0.3s ease;

2. animation

   animation: mymove 5s infinite;

3. @keyframes

   @keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
   }

Responsive Design

1. Media Queries

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

Other Useful Properties

1. cursor

   cursor: pointer;
   cursor: default;
   cursor: move;

2. visibility

   visibility: visible;
   visibility: hidden;

3. white-space

   white-space: normal; /* default */
   white-space: nowrap;
   white-space: pre;

4. overflow-x

   overflow-x: hidden;
   overflow-x: scroll;

5. overflow-y

   overflow-y: hidden;
   overflow-y: scroll;

Filters

1. filter

   filter: none; /* default */
   filter: blur(5px);
   filter: brightness(0.5);
   filter: contrast(200%);
   filter: grayscale(100%);

Ini adalah referensi lengkap tentang css declaration (property: value) yang sering digunakan. Tentunya kita akan mempelajarinya throughout the classes.