CSS Cheatsheet

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.

:root {
    --blue: #1e90ff;
    --white: #ffffff;
    }

.container {
    color: var(--blue);
    background-color: var(--white);
    padding: 15px;
    }

margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

p {
    margin: 25px 50px 75px 100px;
    }

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    }

margin: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

div {
      padding: 25px 50px 75px 100px;
      }
  
div {
      padding-top: 50px;
      padding-right: 30px;
      padding-bottom: 50px;
      padding-left: 80px;
      }

margin: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

.hero-image {
    background-image: url("photographer.jpg"); 
    background-color: #cccccc; 
    height: 500px; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    }

Use these three properties to create a Flexbox row layout.

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

Use this to create a Flexbox column layout.

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

Build a 12-column layout using CSS Grid

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

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%
  );
}

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);
}

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

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

Offset-X Offset-Y Blur-Radius Color

box {
box-shadow: 10px 5px 5px rgba(0,0,0,0.2);
}

Radius is set for all 4 sides
Top-Left-and-Bottom-Right | Top-Right-and-Bottom-Left
Top-Left | Top-Right | Bottom-Right | Bottom-Left

box {
      border: 2px solid red;
      border-radius: 10px;
}
      
box {
      border: 2px outset red;
      border-radius: 50px 20px;
}

box {
      border: 2px inset red;
      border-radius: 50px 20px 45px 15px;
}

Float a div to a certain direction
Use clear to force an item to move below a floated element.

box {
  /* Keyword values (one) */
  float: left;
  float: right;
  float: none;
  float: inline-start;
  float: inline-end;
}

Float a div to a certain direction
Use clear to force an item to move below a floated element.

a {
    background-color: powderblue;
    transition: background-color .5s;
    }
    
a:hover {
    background-color: gold;
    }

Find face will allow you to define the name of your custom font and then src: to the file location.

@font-face {
      font-family: 'digital-7';
      src: url(digital-7-mono.ttf);
    }
  
  body {
      font-family: digital-7;
      color: white;
  }

media query is Used to establish different parameters when the browser window is sized differently

 
    /* media query for larger screens */
    @media screen and (min-width: 992px) {
        header {
          width: 75%;
        }
      
        .card-column {
          flex: 0 0 33.333%;
          max-width: 33.333%;
        }
      }