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 📚

Happy coding! 🚀

Command Palette

Comments

More from this blog

CSS Mastery Guide 🔥

Text Styles

Color

Font

Text Alignment

Text Decoration

Line Height

Letter Spacing

Box Model

Width & Height

Margin

Padding

Border

Positioning

Position

Top, Right, Bottom, Left

Layout

Display

Visibility

Float

Clear

Flexbox

Flex

Flex Direction

Flex Wrap

Justify Content

Align Items

Grid Layout

Grid Template Columns & Rows

Grid Column & Row

Grid Column & Row Gap

Colors and Background

Background Color

Background Image

Background Repeat

Background Position

Background Size

Opacity

Transitions and Animations

Transition

Animation

Others

z-index

Box Sizing

Overflow

Cursor

Box Shadow

Learning Resources 📚