CSS Mastery Guide 🔥

Text Styles

Color

color: #RRGGBB;

Font

font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;

• font-family

  font-family: "Times New Roman", serif;
  

• font-size

  font-size: 18px;
  

• font-weight

  font-weight: bold;
  

Text Alignment

text-align: center;

Text Decoration

• Underline

  text-decoration: underline;
  

• Line-through

  text-decoration: line-through;
  

Line Height

line-height: 1.5;

Letter Spacing

letter-spacing: 2px;

Box Model

Width & Height

width: 200px;
height: 150px;

Margin

margin: 10px 20px 15px 5px;

Padding

padding: 5px 10px;

Border

• Border Width

  border-width: 2px;
  

  • Top

    border-top-width: 2px;
    

  • Right

    border-right-width: 2px;
    

  • Bottom

    border-bottom-width: 2px;
    

  • Left

    border-left-width: 2px;
    

• Border Color

  border-color: #RRGGBB;
  

  • Top

    border-top-color: #RRGGBB;
    

  • Right

    border-right-color: #RRGGBB;
    

  • Bottom

    border-bottom-color: #RRGGBB;
    

  • Left

    border-left-color: #RRGGBB;
    

• Border Radius

  border-radius: 10px;
  

  • Top-Left

    border-top-left-radius: 10px;
    

  • Top-Right

    border-top-right-radius: 10px;
    

  • Bottom-Left

    border-bottom-left-radius: 10px;
    

  • Bottom-Right

    border-bottom-right-radius: 10px;
    

Positioning

Position

position: relative;

Top, Right, Bottom, Left

top: 10px;
right: 20px;
bottom: 15px;
left: 5px;

Layout

Display

display: block;

Visibility

visibility: hidden;

Float

float: left;

Clear

clear: both;

Flexbox

Flex

display: flex;

Flex Direction

flex-direction: row;

Flex Wrap

flex-wrap: nowrap;

Justify Content

justify-content: space-between;

Align Items

align-items: center;

Grid Layout

Grid Template Columns & Rows

grid-template-columns: 100px 200px;
grid-template-rows: 50px 100px;

Grid Column & Row

grid-column: 1 / span 2;
grid-row: 1 / span 2;

Grid Column & Row Gap

grid-column-gap: 10px;
grid-row-gap: 15px;

Colors and Background

Background Color

background-color: #RRGGBB;

Background Image

background-image: url('path/to/image.jpg');

Background Repeat

background-repeat: no-repeat;

Background Position

background-position: center top;

Background Size

background-size: cover;

Opacity

opacity: 0.7;

Transitions and Animations

Transition

transition: property duration timing-function delay;

• Transition Property

  transition-property: width;
  

• Transition Duration

  transition-duration: 0.5s;
  

• Transition Timing Function

  transition-timing-function: ease-in-out;
  

• Transition Delay

  transition-delay: 0.2s;
  

Animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• Animation Name

  animation-name: slide;
  

• Animation Duration

  animation-duration: 2s;
  

• Animation Timing Function

  animation-timing-function: ease-in-out;
  

• Animation Delay

  animation-delay: 0.5s;
  

• Animation Iteration Count

  animation-iteration-count: infinite;
  

• Animation Direction

  animation-direction: alternate;
  

• Animation Fill Mode

  animation-fill-mode: forwards;
  

• Animation Play State

  animation-play-state: running;
  

Others

z-index

z-index: 1;

Box Sizing

box-sizing: border-box;

Overflow

overflow: hidden;

• Overflow X

  overflow-x: auto;
  

• Overflow Y

  overflow-y: scroll;
  

Cursor

cursor: pointer;

Box Shadow

box-shadow: 5px 5px 10px #888888;

Learning Resources 📚

1. MDN
2. W3Schools
3. freeCodeCamp
4. CSS-Tricks
5. Flexbox Froggy
6. Grid Garden

Happy coding! 🚀