🎨 CSS Complete Guide - Master Styling#

📚 Table of Contents#

What is CSS?
How to Add CSS
Selectors
Colors
Backgrounds
Text Styling
Fonts
Box Model
Borders
Margins and Padding
Width and Height
Display Property
Position
Flexbox
CSS Grid
Transitions
Animations
Transforms
Responsive Design
Pseudo-classes
Pseudo-elements
Variables (Custom Properties)
Best Practices
Complete Examples

1. What is CSS?#

CSS = Cascading Style Sheets

CSS controls how HTML elements look on screen.

CSS Syntax#

1
selector {
2
    property: value;
3
    property: value;
4
}

Example#

1
h1 {
2
    color: blue;
3
    font-size: 24px;
4
}

2. How to Add CSS#

Inline CSS (in HTML tag)#

1
<p style="color: red; font-size: 16px;">Red text</p>

Internal CSS (in `<head>`)#

1
<head>
2
    <style>
3
        p {
4
            color: blue;
5
        }
6
    </style>
7
</head>

External CSS (separate file) ⭐ Best#

1
<head>
2
    <link rel="stylesheet" href="styles.css">
3
</head>

1
p {
2
    color: green;
3
}

3. Selectors#

Basic Selectors#

1
/* Element selector */
2
p { color: blue; }
3

4
/* Class selector (.) */
5
.highlight { background: yellow; }
6

7
/* ID selector (#) */
8
#header { height: 80px; }
9

10
/* Universal selector (*) */
11
* { margin: 0; padding: 0; }

Combining Selectors#

1
/* Multiple elements */
2
h1, h2, h3 { color: navy; }
3

4
/* Descendant (any level) */
5
div p { color: red; }
6

7
/* Child (direct only) */
8
div > p { color: blue; }
9

10
/* Adjacent sibling */
11
h1 + p { margin-top: 0; }
12

13
/* General sibling */
14
h1 ~ p { color: gray; }

Attribute Selectors#

1
/* Has attribute */
2
[disabled] { opacity: 0.5; }
3

4
/* Exact value */
5
[type="text"] { border: 1px solid gray; }
6

7
/* Contains value */
8
[class*="btn"] { cursor: pointer; }
9

10
/* Starts with */
11
[href^="https"] { color: green; }
12

13
/* Ends with */
14
[href$=".pdf"] { color: red; }

Selector Specificity#

1
Inline styles:    1000
2
ID:               100
3
Class/attribute:  10
4
Element:          1

4. Colors#

Color Formats#

1
/* Named colors */
2
color: red;
3
color: blue;
4
color: darkgreen;
5

6
/* Hexadecimal */
7
color: #ff0000;      /* Red */
8
color: #00ff00;      /* Green */
9
color: #0000ff;      /* Blue */
10
color: #fff;         /* Short: white */
11

12
/* RGB */
13
color: rgb(255, 0, 0);       /* Red */
14
color: rgb(0, 255, 0);       /* Green */
15

16
/* RGBA (with transparency) */
17
color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
18

19
/* HSL */
20
color: hsl(0, 100%, 50%);    /* Red */
21
color: hsl(120, 100%, 50%);  /* Green */
22

23
/* HSLA */
24
color: hsla(0, 100%, 50%, 0.5);

Common Colors#

Color	Hex	RGB
Black	#000000	rgb(0,0,0)
White	#ffffff	rgb(255,255,255)
Red	#ff0000	rgb(255,0,0)
Green	#00ff00	rgb(0,255,0)
Blue	#0000ff	rgb(0,0,255)

5. Backgrounds#

1
/* Background color */
2
background-color: #f0f0f0;
3

4
/* Background image */
5
background-image: url('image.jpg');
6

7
/* Background repeat */
8
background-repeat: no-repeat;  /* repeat, repeat-x, repeat-y */
9

10
/* Background position */
11
background-position: center center;  /* top, bottom, left, right */
12

13
/* Background size */
14
background-size: cover;  /* contain, 100%, 200px 100px */
15

16
/* Background attachment */
17
background-attachment: fixed;  /* scroll */
18

19
/* Shorthand */
20
background: #f0f0f0 url('image.jpg') no-repeat center/cover;
21

22
/* Multiple backgrounds */
23
background:
24
    url('top.png') no-repeat top,
25
    url('bottom.png') no-repeat bottom,
26
    #ffffff;
27

28
/* Gradient */
29
background: linear-gradient(to right, red, blue);
30
background: linear-gradient(45deg, #ff0000, #0000ff);
31
background: radial-gradient(circle, red, blue);

6. Text Styling#

1
/* Color */
2
color: #333;
3

4
/* Alignment */
5
text-align: left;    /* right, center, justify */
6

7
/* Decoration */
8
text-decoration: none;        /* Remove underline */
9
text-decoration: underline;
10
text-decoration: line-through;
11
text-decoration: overline;
12

13
/* Transform */
14
text-transform: uppercase;
15
text-transform: lowercase;
16
text-transform: capitalize;
17

18
/* Spacing */
19
letter-spacing: 2px;
20
word-spacing: 5px;
21
line-height: 1.5;
22

23
/* Indent */
24
text-indent: 50px;
25

26
/* Shadow */
27
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
28

29
/* Overflow */
30
white-space: nowrap;
31
overflow: hidden;
32
text-overflow: ellipsis;  /* Shows "..." */

7. Fonts#

Font Properties#

1
/* Font family */
2
font-family: Arial, Helvetica, sans-serif;
3
font-family: 'Times New Roman', serif;
4
font-family: 'Courier New', monospace;
5

6
/* Font size */
7
font-size: 16px;
8
font-size: 1rem;
9
font-size: 1.5em;
10

11
/* Font weight */
12
font-weight: normal;  /* 400 */
13
font-weight: bold;    /* 700 */
14
font-weight: 100;     /* Thin */
15
font-weight: 900;     /* Black */
16

17
/* Font style */
18
font-style: normal;
19
font-style: italic;
20
font-style: oblique;
21

22
/* Shorthand */
23
font: italic bold 16px/1.5 Arial, sans-serif;

Google Fonts#

1
<head>
2
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
3
</head>

1
body {
2
    font-family: 'Roboto', sans-serif;
3
}

Custom Fonts#

1
@font-face {
2
    font-family: 'MyFont';
3
    src: url('myfont.woff2') format('woff2'),
4
         url('myfont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}
8

9
body {
10
    font-family: 'MyFont', sans-serif;
11
}

8. Box Model#

Box Model

Every element is a box with:

Content - The actual content
Padding - Space inside the border
Border - The border
Margin - Space outside the border

1
.box {
2
    /* Content size */
3
    width: 200px;
4
    height: 100px;
5

6
    /* Padding (inside) */
7
    padding: 20px;
8

9
    /* Border */
10
    border: 2px solid black;
11

12
    /* Margin (outside) */
13
    margin: 10px;
14
}
15

16
/* Box-sizing (include padding/border in width) */
17
* {
18
    box-sizing: border-box;  /* Recommended! */
19
}

9. Borders#

1
/* Border shorthand */
2
border: 1px solid black;
3

4
/* Individual sides */
5
border-top: 2px dashed red;
6
border-right: 3px dotted blue;
7
border-bottom: 1px solid green;
8
border-left: none;
9

10
/* Border width */
11
border-width: 1px 2px 3px 4px;  /* top right bottom left */
12

13
/* Border style */
14
border-style: solid;   /* dotted, dashed, double, groove, ridge, inset, outset */
15

16
/* Border color */
17
border-color: red;
18

19
/* Border radius (rounded corners) */
20
border-radius: 10px;
21
border-radius: 50%;           /* Circle */
22
border-radius: 10px 20px;     /* top-left/bottom-right, top-right/bottom-left */
23
border-radius: 10px 20px 30px 40px;
24

25
/* Individual corners */
26
border-top-left-radius: 10px;
27
border-top-right-radius: 20px;

10. Margins and Padding#

1
/* All sides */
2
margin: 20px;
3
padding: 20px;
4

5
/* Vertical | Horizontal */
6
margin: 10px 20px;
7
padding: 10px 20px;
8

9
/* Top | Horizontal | Bottom */
10
margin: 10px 20px 30px;
11

12
/* Top | Right | Bottom | Left (clockwise) */
13
margin: 10px 20px 30px 40px;
14
padding: 10px 20px 30px 40px;
15

16
/* Individual sides */
17
margin-top: 10px;
18
margin-right: 20px;
19
margin-bottom: 30px;
20
margin-left: 40px;
21

22
padding-top: 10px;
23
padding-right: 20px;
24
padding-bottom: 30px;
25
padding-left: 40px;
26

27
/* Auto (center horizontally) */
28
margin: 0 auto;

11. Width and Height#

1
/* Fixed size */
2
width: 200px;
3
height: 100px;
4

5
/* Percentage */
6
width: 50%;
7
height: 100%;
8

9
/* Viewport units */
10
width: 100vw;   /* 100% viewport width */
11
height: 100vh;  /* 100% viewport height */
12

13
/* Min/Max */
14
min-width: 200px;
15
max-width: 800px;
16
min-height: 100px;
17
max-height: 500px;
18

19
/* Auto */
20
width: auto;
21
height: auto;
22

23
/* Fit content */
24
width: fit-content;

12. Display Property#

1
/* Block - takes full width */
2
display: block;
3

4
/* Inline - flows with text */
5
display: inline;
6

7
/* Inline-block - inline but accepts width/height */
8
display: inline-block;
9

10
/* None - hidden */
11
display: none;
12

13
/* Flex - flexbox layout */
14
display: flex;
15

16
/* Grid - grid layout */
17
display: grid;
18

19
/* Hide but keep space */
20
visibility: hidden;

13. Position#

1
/* Static (default) - normal flow */
2
position: static;
3

4
/* Relative - relative to normal position */
5
position: relative;
6
top: 10px;
7
left: 20px;
8

9
/* Absolute - relative to nearest positioned ancestor */
10
position: absolute;
11
top: 0;
12
right: 0;
13

14
/* Fixed - relative to viewport (stays on scroll) */
15
position: fixed;
16
bottom: 20px;
17
right: 20px;
18

19
/* Sticky - switches between relative and fixed */
20
position: sticky;
21
top: 0;
22

23
/* Z-index (stacking order) */
24
z-index: 100;

Position Example#

1
.parent {
2
    position: relative;
3
}
4

5
.child {
6
    position: absolute;
7
    top: 50%;
8
    left: 50%;
9
    transform: translate(-50%, -50%);  /* Center */
10
}

14. Flexbox#

Flexbox

Container Properties#

1
.container {
2
    display: flex;
3

4
    /* Direction */
5
    flex-direction: row;          /* row-reverse, column, column-reverse */
6

7
    /* Wrap */
8
    flex-wrap: wrap;              /* nowrap, wrap-reverse */
9

10
    /* Justify (main axis) */
11
    justify-content: center;      /* flex-start, flex-end, space-between, space-around, space-evenly */
12

13
    /* Align (cross axis) */
14
    align-items: center;          /* flex-start, flex-end, stretch, baseline */
15

16
    /* Align multiple lines */
17
    align-content: center;        /* flex-start, flex-end, space-between, space-around */
18

19
    /* Gap between items */
20
    gap: 20px;
21
    row-gap: 10px;
22
    column-gap: 20px;
23
}

Item Properties#

1
.item {
2
    /* Order */
3
    order: 1;
4

5
    /* Grow */
6
    flex-grow: 1;
7

8
    /* Shrink */
9
    flex-shrink: 0;
10

11
    /* Base size */
12
    flex-basis: 200px;
13

14
    /* Shorthand */
15
    flex: 1 0 200px;  /* grow shrink basis */
16

17
    /* Individual alignment */
18
    align-self: center;
19
}

Flexbox Examples#

1
/* Center everything */
2
.center {
3
    display: flex;
4
    justify-content: center;
5
    align-items: center;
6
}
7

8
/* Space between */
9
.navbar {
10
    display: flex;
11
    justify-content: space-between;
12
}
13

14
/* Equal columns */
15
.row {
16
    display: flex;
17
}
18
.column {
19
    flex: 1;
20
}

15. CSS Grid#

Grid

Container Properties#

1
.grid-container {
2
    display: grid;
3

4
    /* Define columns */
5
    grid-template-columns: 200px 200px 200px;
6
    grid-template-columns: 1fr 1fr 1fr;
7
    grid-template-columns: repeat(3, 1fr);
8
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
9

10
    /* Define rows */
11
    grid-template-rows: 100px 200px;
12
    grid-template-rows: auto;
13

14
    /* Gap */
15
    gap: 20px;
16
    row-gap: 10px;
17
    column-gap: 20px;
18

19
    /* Alignment */
20
    justify-items: center;    /* start, end, stretch */
21
    align-items: center;
22

23
    /* Content alignment */
24
    justify-content: center;
25
    align-content: center;
26
}

Item Properties#

1
.grid-item {
2
    /* Span columns */
3
    grid-column: 1 / 3;       /* Start at 1, end at 3 */
4
    grid-column: span 2;       /* Span 2 columns */
5

6
    /* Span rows */
7
    grid-row: 1 / 3;
8
    grid-row: span 2;
9

10
    /* Shorthand */
11
    grid-area: 1 / 1 / 3 / 3;  /* row-start / col-start / row-end / col-end */
12

13
    /* Self alignment */
14
    justify-self: center;
15
    align-self: center;
16
}

Grid Template Areas#

1
.grid-container {
2
    display: grid;
3
    grid-template-columns: 200px 1fr 200px;
4
    grid-template-rows: auto 1fr auto;
5
    grid-template-areas:
6
        "header header header"
7
        "sidebar main aside"
8
        "footer footer footer";
9
}
10

11
.header { grid-area: header; }
12
.sidebar { grid-area: sidebar; }
13
.main { grid-area: main; }
14
.aside { grid-area: aside; }
15
.footer { grid-area: footer; }

16. Transitions#

1
/* Transition property */
2
transition-property: background-color;
3
transition-duration: 0.3s;
4
transition-timing-function: ease;
5
transition-delay: 0s;
6

7
/* Shorthand */
8
transition: background-color 0.3s ease;
9

10
/* Multiple properties */
11
transition: background-color 0.3s, transform 0.5s;
12

13
/* All properties */
14
transition: all 0.3s ease;
15

16
/* Timing functions */
17
transition-timing-function: ease;        /* default */
18
transition-timing-function: linear;
19
transition-timing-function: ease-in;
20
transition-timing-function: ease-out;
21
transition-timing-function: ease-in-out;
22
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Transition Example#

1
.button {
2
    background-color: blue;
3
    transform: scale(1);
4
    transition: all 0.3s ease;
5
}
6

7
.button:hover {
8
    background-color: darkblue;
9
    transform: scale(1.1);
10
}

17. Animations#

Keyframes#

1
@keyframes slidein {
2
    from {
3
        transform: translateX(-100%);
4
        opacity: 0;
5
    }
6
    to {
7
        transform: translateX(0);
8
        opacity: 1;
9
    }
10
}
11

12
@keyframes pulse {
13
    0% { transform: scale(1); }
14
    50% { transform: scale(1.1); }
15
    100% { transform: scale(1); }
16
}

Animation Properties#

1
.element {
2
    animation-name: slidein;
3
    animation-duration: 1s;
4
    animation-timing-function: ease;
5
    animation-delay: 0s;
6
    animation-iteration-count: 1;      /* infinite */
7
    animation-direction: normal;       /* reverse, alternate, alternate-reverse */
8
    animation-fill-mode: forwards;     /* backwards, both */
9
    animation-play-state: running;     /* paused */
10

11
    /* Shorthand */
12
    animation: slidein 1s ease 0s 1 normal forwards;
13
}
14

15
/* Multiple animations */
16
.element {
17
    animation: slidein 1s ease, pulse 2s infinite;
18
}

Animation Example#

1
@keyframes bounce {
2
    0%, 100% {
3
        transform: translateY(0);
4
    }
5
    50% {
6
        transform: translateY(-20px);
7
    }
8
}
9

10
.ball {
11
    animation: bounce 0.5s ease infinite;
12
}

18. Transforms#

1
/* Translate (move) */
2
transform: translateX(50px);
3
transform: translateY(100px);
4
transform: translate(50px, 100px);
5

6
/* Rotate */
7
transform: rotate(45deg);
8
transform: rotateX(45deg);
9
transform: rotateY(45deg);
10

11
/* Scale */
12
transform: scale(1.5);
13
transform: scaleX(2);
14
transform: scaleY(0.5);
15
transform: scale(2, 0.5);
16

17
/* Skew */
18
transform: skewX(20deg);
19
transform: skewY(20deg);
20
transform: skew(20deg, 10deg);
21

22
/* Multiple transforms */
23
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
24

25
/* Transform origin */
26
transform-origin: center center;  /* default */
27
transform-origin: top left;
28
transform-origin: 50% 50%;
29

30
/* 3D transforms */
31
transform: perspective(500px) rotateY(45deg);

19. Responsive Design#

Media Queries#

1
/* Mobile first approach */
2
.container {
3
    width: 100%;
4
}
5

6
/* Tablet */
7
@media (min-width: 768px) {
8
    .container {
9
        width: 750px;
10
    }
11
}
12

13
/* Desktop */
14
@media (min-width: 1024px) {
15
    .container {
16
        width: 960px;
17
    }
18
}
19

20
/* Large desktop */
21
@media (min-width: 1200px) {
22
    .container {
23
        width: 1140px;
24
    }
25
}
26

27
/* Orientation */
28
@media (orientation: landscape) {
29
    /* Landscape styles */
30
}
31

32
/* Print */
33
@media print {
34
    .no-print {
35
        display: none;
36
    }
37
}

Responsive Units#

1
/* Relative to parent font-size */
2
font-size: 1.5em;
3

4
/* Relative to root font-size */
5
font-size: 1.5rem;
6

7
/* Viewport units */
8
width: 100vw;   /* viewport width */
9
height: 100vh;  /* viewport height */
10
font-size: 5vw; /* 5% of viewport width */
11

12
/* Percentage */
13
width: 50%;
14

15
/* Min/Max with clamp */
16
font-size: clamp(1rem, 2vw, 2rem);
17
width: clamp(200px, 50%, 800px);

Responsive Images#

1
img {
2
    max-width: 100%;
3
    height: auto;
4
}

20. Pseudo-classes#

1
/* Link states */
2
a:link { color: blue; }
3
a:visited { color: purple; }
4
a:hover { color: red; }
5
a:active { color: orange; }
6

7
/* Focus */
8
input:focus { border-color: blue; }
9

10
/* First/Last child */
11
li:first-child { font-weight: bold; }
12
li:last-child { border-bottom: none; }
13

14
/* Nth child */
15
tr:nth-child(odd) { background: #f0f0f0; }
16
tr:nth-child(even) { background: white; }
17
tr:nth-child(3n) { /* Every 3rd */ }
18

19
/* Not selector */
20
p:not(.special) { color: gray; }
21

22
/* Empty */
23
div:empty { display: none; }
24

25
/* Enabled/Disabled */
26
input:enabled { background: white; }
27
input:disabled { background: gray; }
28

29
/* Checked */
30
input:checked + label { font-weight: bold; }
31

32
/* Required/Optional */
33
input:required { border-color: red; }
34
input:optional { border-color: gray; }
35

36
/* Valid/Invalid */
37
input:valid { border-color: green; }
38
input:invalid { border-color: red; }

21. Pseudo-elements#

1
/* Before content */
2
.quote::before {
3
    content: '"';
4
    font-size: 2em;
5
}
6

7
/* After content */
8
.quote::after {
9
    content: '"';
10
    font-size: 2em;
11
}
12

13
/* First letter */
14
p::first-letter {
15
    font-size: 2em;
16
    font-weight: bold;
17
}
18

19
/* First line */
20
p::first-line {
21
    font-weight: bold;
22
}
23

24
/* Selection */
25
::selection {
26
    background: yellow;
27
    color: black;
28
}
29

30
/* Placeholder */
31
input::placeholder {
32
    color: gray;
33
    font-style: italic;
34
}
35

36
/* Marker (list bullet) */
37
li::marker {
38
    color: red;
39
}

22. Variables (Custom Properties)#

1
/* Define variables in :root */
2
:root {
3
    --primary-color: #3498db;
4
    --secondary-color: #2ecc71;
5
    --font-size: 16px;
6
    --spacing: 20px;
7
    --border-radius: 8px;
8
}
9

10
/* Use variables */
11
.button {
12
    background-color: var(--primary-color);
13
    padding: var(--spacing);
14
    border-radius: var(--border-radius);
15
}
16

17
/* Fallback value */
18
color: var(--undefined-color, black);
19

20
/* Override in specific context */
21
.dark-theme {
22
    --primary-color: #2980b9;
23
}
24

25
/* Use in calculations */
26
padding: calc(var(--spacing) * 2);

23. Best Practices#

Do’s ✅#

1
/* Use meaningful class names */
2
.navigation { }
3
.btn-primary { }
4
.card-header { }
5

6
/* Use shorthand */
7
margin: 10px 20px;
8
padding: 10px;
9

10
/* Use CSS variables */
11
:root { --primary: blue; }
12

13
/* Mobile-first approach */
14
/* Base styles for mobile, then media queries for larger */
15

16
/* Use box-sizing */
17
* { box-sizing: border-box; }
18

19
/* Organize your CSS */
20
/* 1. Reset
21
   2. Variables
22
   3. Base styles
23
   4. Components
24
   5. Utilities */

Don’ts ❌#

1
/* Don't use IDs for styling */
2
#header { }  /* Use .header instead */
3

4
/* Don't use !important */
5
color: red !important;
6

7
/* Don't use inline styles */
8
<div style="color: red;">
9

10
/* Don't use magic numbers */
11
margin-top: 37px;  /* Why 37? */

24. Complete Examples#

Card Component#

1
.card {
2
    background: white;
3
    border-radius: 10px;
4
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
5
    overflow: hidden;
6
    transition: transform 0.3s, box-shadow 0.3s;
7
}
8

9
.card:hover {
10
    transform: translateY(-5px);
11
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
12
}
13

14
.card-image {
15
    width: 100%;
16
    height: 200px;
17
    object-fit: cover;
18
}
19

20
.card-body {
21
    padding: 20px;
22
}
23

24
.card-title {
25
    font-size: 1.25rem;
26
    font-weight: bold;
27
    margin-bottom: 10px;
28
}
29

30
.card-text {
31
    color: #666;
32
    line-height: 1.6;
33
}

Button Styles#

1
.btn {
2
    display: inline-block;
3
    padding: 12px 24px;
4
    font-size: 1rem;
5
    font-weight: 600;
6
    text-align: center;
7
    text-decoration: none;
8
    border: none;
9
    border-radius: 5px;
10
    cursor: pointer;
11
    transition: all 0.3s;
12
}
13

14
.btn-primary {
15
    background: #3498db;
16
    color: white;
17
}
18

19
.btn-primary:hover {
20
    background: #2980b9;
21
}
22

23
.btn-outline {
24
    background: transparent;
25
    border: 2px solid #3498db;
26
    color: #3498db;
27
}
28

29
.btn-outline:hover {
30
    background: #3498db;
31
    color: white;
32
}

1
.navbar {
2
    display: flex;
3
    justify-content: space-between;
4
    align-items: center;
5
    padding: 1rem 2rem;
6
    background: #333;
7
    position: sticky;
8
    top: 0;
9
    z-index: 1000;
10
}
11

12
.navbar-brand {
13
    font-size: 1.5rem;
14
    font-weight: bold;
15
    color: white;
16
    text-decoration: none;
17
}
18

19
.navbar-nav {
20
    display: flex;
21
    gap: 20px;
22
    list-style: none;
23
}
24

25
.navbar-nav a {
26
    color: white;
27
    text-decoration: none;
28
    padding: 10px;
29
    transition: color 0.3s;
30
}
31

32
.navbar-nav a:hover {
33
    color: #3498db;
34
}
35

36
/* Mobile responsive */
37
@media (max-width: 768px) {
38
    .navbar {
39
        flex-direction: column;
40
    }
41
    .navbar-nav {
42
        flex-direction: column;
43
        text-align: center;
44
    }
45
}

🎯 Quick Reference#

Property	Description
`color`	Text color
`background`	Background
`font-size`	Text size
`margin`	Outside spacing
`padding`	Inside spacing
`border`	Border
`display`	Display type
`position`	Position type
`flexbox`	Flex layout
`grid`	Grid layout

Created by cat0x01 🥷🏻

🎨 CSS Complete Guide - Master Styling#

📚 Table of Contents#

1. What is CSS?#

CSS Syntax#

Example#

2. How to Add CSS#

Inline CSS (in HTML tag)#

Internal CSS (in <head>)#

External CSS (separate file) ⭐ Best#

3. Selectors#

Basic Selectors#

Combining Selectors#

Attribute Selectors#

Selector Specificity#

4. Colors#

Color Formats#

Common Colors#

5. Backgrounds#

6. Text Styling#

7. Fonts#

Font Properties#

Google Fonts#

Custom Fonts#

8. Box Model#

9. Borders#

10. Margins and Padding#

11. Width and Height#

12. Display Property#

13. Position#

Position Example#

14. Flexbox#

Container Properties#

Item Properties#

Flexbox Examples#

15. CSS Grid#

Container Properties#

Item Properties#

Grid Template Areas#

16. Transitions#

Transition Example#

17. Animations#

Keyframes#

Animation Properties#

Animation Example#

18. Transforms#

19. Responsive Design#

Media Queries#

Responsive Units#

Responsive Images#

20. Pseudo-classes#

21. Pseudo-elements#

22. Variables (Custom Properties)#

23. Best Practices#

Do’s ✅#

Don’ts ❌#

24. Complete Examples#

Card Component#

Button Styles#

Navigation Bar#

🎯 Quick Reference#

Internal CSS (in `<head>`)#