CSS Cheat Sheet

Ready to build responsive websites? These are CSS must-knows. refer to this cheatsheet throughout the course and also for the rest of your lifetime! You will be glad you did.

FlexBox Row

Use these three properties to create a Flexbox row layout. 

 
                .row {
                  display: flex;  
                  flex-direction: row;
                  flex-wrap: wrap;
                }

FlexBox Column

Use this to create a Flexbox column layout. 

 
                .column {
                  display: flex;  
                  flex-direction: column;
                }

CSS Grid Layout

Build a 12 column layout using CSS Grid. 

 
                .grid {
                  display: grid;  
                  width: 100%;
                  grid-template-columns: 
                repeat(12, lfr);
                }

Linear Gradients

This will create a background linear gradient from top to bottom. 

 
                .linear-gradient-background {
                  background-image: linear-
                gradient{
                    rgba(232, 102, 236, 0,3) 0%,
                    rgba(232,102,236,0,6) 100%
                  );
                }

Box Transition Glow

Use transition and box shadows to glow on hover. 

 
                .code-card .card-header {
                  border-radius: 8px;
                  transition: all 0.5s ease-in-
                out;
                }
            
                .code-card:hover,
                .code-card:hover .card-header {
                  box-shadow: inset 0px 0px 8px
                rgba(232,102, 236, 1), 0 0 15px
                rgba(232, 102, 236, 1);       
                }

Overlay Card with Title

Use position properties and negative margins to raise elements higher than their natural starting point. 

 
                .card-header {
                  position: relative;  
                  margin-top: -20px;
                
                }