CSS Complete Tutorial – Learn CSS with Simple Explanations | Esikhcha

🎨 CSS Complete Tutorial

Big simple explanations · Clear syntax · Visual examples · Tables

🎨 Colors & Backgrounds 📦 Box Model 📝 Text & Fonts 📍 Positioning 🌊 Float & Layout

CHAPTER 1

CSS Introduction

🎯 Big Simple Explanation: CSS (Cascading Style Sheets) is the language that makes websites beautiful. HTML is the structure (bones), CSS is the style (skin & clothes).

Without CSS, every website would look like a plain white page with black text. CSS adds colors, layouts, fonts, animations, and everything visual!

What CSS can do:

Change colors of text, backgrounds, borders
Control font sizes, families, and styles
Arrange elements on the page (layout)
Add spacing (margins and padding)
Create responsive designs that work on all devices
Add animations and transitions

💡 CSS stands for “Cascading Style Sheets” — “Cascading” means styles can inherit and override each other in a specific order.

CHAPTER 2

CSS Syntax

📝 Big Simple Explanation: CSS syntax is simple: you pick an element (selector), then inside curly braces {}, you write property: value; pairs.

📌 Basic Syntax:

selector {
    property: value;
    property: value;
}

Example

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

p {
    color: #333;
    line-height: 1.5;
    margin-bottom: 10px;
}

🎨 This CSS would make all h1 headings blue, centered, and 32px tall.

CHAPTER 3

CSS Selectors

🎯 Big Simple Explanation: Selectors are how you “target” specific HTML elements to style them.

Selector	Example	What it selects
Element selector	`p { }`	All <p> elements
ID selector (#)	`#header { }`	Element with id=”header”
Class selector (.)	`.box { }`	All elements with class=”box”
Universal (*)	`* { }`	Every single element
Group selector	`h1, h2, p { }`	Multiple elements at once

Selector Examples

/* Element selector */
p {
    color: gray;
}

/* ID selector (unique) */
#main-title {
    font-size: 48px;
}

/* Class selector (reusable) */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* Universal selector */
* {
    margin: 0;
    padding: 0;
}

/* Group selector */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* Descendant selector */
div p {
    color: blue;  /* p inside div */
}

CHAPTER 4

CSS How To (3 Ways)

📄 Big Simple Explanation: There are 3 ways to add CSS to HTML: inline (inside an element), internal (inside <style> tag), and external (separate .css file).

Method	Best For	Example
Inline	Quick testing	`<div style="color:red">`
Internal	Single page	`<style> p {color:red} </style>`
External	Multiple pages (BEST)	`<link rel="stylesheet" href="style.css">`

External CSS (style.css)

body {
    background-color: #f0f0f0;
    font-family: 'Inter', sans-serif;
}

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}

✅ Best Practice: Use external CSS files. They keep your HTML clean and styles can be reused across many pages!

CHAPTER 5

CSS Comments

💬 Big Simple Explanation: Comments are notes that CSS ignores. They help you document your code.

CSS Comments

/* This is a CSS comment */
/* Comments can also span
   multiple lines */

/* Use comments to organize sections */
/* ===== HEADER STYLES ===== */
.header {
    background: #333;
}

/* ===== BUTTON STYLES ===== */
.btn {
    padding: 10px;  /* inline comment */
}

CHAPTER 6

CSS Colors

🎨 Big Simple Explanation: Colors in CSS can be specified in many ways: names, HEX codes, RGB, RGBA, HSL, and HSLA.

Format	Example	Description
Color Name	`red, blue, green`	140 predefined colors
HEX	`#FF5733`	#RRGGBB (0-FF each)
RGB	`rgb(255, 87, 51)`	0-255 per channel
RGBA	`rgba(255,87,51,0.5)`	With opacity (0-1)
HSL	`hsl(9, 100%, 60%)`	Hue, Saturation, Lightness

← Different color formats in action

Color Examples

/* Color names */
.title { color: darkblue; }

/* Hexadecimal */
.box { background-color: #FF5733; }

/* RGB */
.text { color: rgb(100, 150, 200); }

/* RGBA (with transparency) */
.overlay { background-color: rgba(0, 0, 0, 0.5); }

/* HSL */
.button { background-color: hsl(200, 80%, 50%); }

CHAPTER 7

CSS Backgrounds

Background Properties

body {
    background-color: #f0f0f0;        /* solid color */
    background-image: url('bg.jpg');  /* image */
    background-repeat: no-repeat;     /* don't repeat */
    background-position: center;      /* position */
    background-size: cover;           /* fit */
    /* Shorthand */
    background: #333 url('bg.jpg') no-repeat center/cover;
}

.card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Gradient background! */
}

CHAPTER 8

Borders

div {
    border: 2px solid black;      /* width, style, color */
    border: 3px dotted red;
    border: 5px dashed blue;
    border-radius: 10px;          /* rounded corners */
    border-top: 1px solid #ccc;   /* specific side */
}

CHAPTER 9

Margins (Outside Space)

📏 Margin creates space OUTSIDE the element — between elements.

.box {
    margin: 20px;           /* all sides */
    margin: 10px 20px;      /* top/bottom 10, left/right 20 */
    margin: 10px 20px 30px; /* top 10, left/right 20, bottom 30 */
    margin: 10px 20px 30px 40px; /* top, right, bottom, left */
    margin-top: 15px;
    margin-left: auto;      /* centers horizontal */
}

CHAPTER 10

Padding (Inside Space)

📦 Padding creates space INSIDE the element — between content and border.

.card {
    padding: 20px;          /* same syntax as margin */
    padding: 15px 25px;
    padding-top: 10px;
}

CHAPTER 11

The Box Model

📦 Big Simple Explanation: Every element in CSS is a rectangle. The Box Model explains how width/height is calculated: content + padding + border + margin.

┌─────────────────────────────────────┐
│           MARGIN (transparent)       │
│  ┌───────────────────────────────┐  │
│  │        BORDER (color/style)    │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │     PADDING (inside)     │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT        │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    /* Total width = 300 + 40 + 10 + 20 = 370px */
    box-sizing: border-box;  /* Easier! width includes padding+border */
}

CHAPTER 12

Outline

input:focus {
    outline: 2px solid blue;
    /* Like border but doesn't affect layout */
}

button {
    outline: none;  /* Remove default focus outline (use with caution!) */
}

CHAPTER 13

Text Styling

Property	Values	Example
`text-align`	left, center, right, justify	`text-align: center;`
`text-decoration`	none, underline, overline, line-through	`text-decoration: underline;`
`text-transform`	uppercase, lowercase, capitalize	`text-transform: uppercase;`
`line-height`	1.5, 24px, 150%	`line-height: 1.6;`
`letter-spacing`	2px, -1px	`letter-spacing: 2px;`
`text-shadow`	x-offset y-offset blur color	`text-shadow: 2px 2px 4px gray;`

CHAPTER 14

Fonts

body {
    font-family: 'Inter', 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;  /* 100-900 or normal/bold */
    font-style: italic;
}

/* Custom font using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

CHAPTER 15

Icons (Font Awesome)

<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<i class="fas fa-home"></i>
<i class="fab fa-github"></i>
<i class="fas fa-heart" style="color: red;"></i>

CHAPTER 16

Links

a { color: blue; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
a:visited { color: purple; }
a:active { color: green; }

CHAPTER 17

Lists

ul { list-style-type: square; }
ol { list-style-type: upper-roman; }
li { margin: 5px 0; }

CHAPTER 18

Tables

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background-color: #f2f2f2; }
tr:hover { background-color: #f5f5f5; }

CHAPTER 19

Position Property

Value	Description
`static`	Default — normal document flow
`relative`	Position relative to its normal spot
`absolute`	Position relative to nearest positioned ancestor
`fixed`	Position relative to viewport (stays on scroll)
`sticky`	Sticks when scrolling past a point

.relative-box { position: relative; top: 10px; left: 20px; }
.absolute-box { position: absolute; top: 0; right: 0; }
.fixed-header { position: fixed; top: 0; width: 100%; }
.sticky-nav { position: sticky; top: 0; }

CHAPTER 20

Z-index (Stacking Order)

📚 Big Simple Explanation: Z-index controls which element appears ON TOP when they overlap. Higher number = higher in the stack.

.layer1 { position: absolute; z-index: 1; }
.layer2 { position: absolute; z-index: 10; }  /* appears on top */

CHAPTER 21

Overflow

.container {
    width: 300px;
    height: 200px;
    overflow: auto;     /* scroll if needed */
    overflow: scroll;   /* always show scrollbar */
    overflow: hidden;   /* clip content */
    overflow-x: hidden; /* hide horizontal scroll */
}

CHAPTER 22

Float & Clear

.image { float: left; margin-right: 15px; }
.clearfix::after { content: ""; clear: both; display: table; }

CHAPTER 23

CSS Combinators

Combinator	Symbol	Example	Selects
Descendant	space	`div p`	p inside div (any level)
Child	>	`div > p`	p that is direct child of div
Adjacent sibling	+	`h1 + p`	p immediately after h1
General sibling	~	`h1 ~ p`	All p siblings after h1

SUMMARY

🎯 Complete CSS Reference

✅ You’ve learned: Selectors, Box Model, Colors, Backgrounds, Text, Fonts, Positioning, Float, and more! Practice by building your own layouts.