📚 Complete HTML & CSS Tutorial

From Absolute Beginner to Advanced Developer

🌟 SECTION 1: HTML Fundamentals

What is HTML?

**HTML (HyperText Markup Language)** is the standard markup language for creating web pages. It describes the structure and content of a webpage using a system of tags and elements.

**Key Points:**
  • HTML is NOT a programming language - it's a **markup language**.
  • Browsers read HTML and **render it visually**.
  • HTML provides **structure**, CSS provides style, JavaScript provides behavior.

Basic HTML Document Structure

Basic HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

HTML Tags and Elements

An **element** consists of a start tag, content, and an end tag.

Element Structure and Self-Closing Tags
// Element Structure:
<tagname>Content goes here</tagname>

// Self-Closing Tags (No content, no closing tag):
<br>    <!-- Line break -->
<hr>    <!-- Horizontal rule -->
<img src="photo.jpg" alt="Description">
<input type="text">

Attributes

Attributes provide extra information about an element and are always placed inside the start tag.

Attribute Example
<element attribute="value">Content</element>

Common attributes: id (unique identifier), class (group identifier for styling), href (link destination), src (source for images/media), alt (alternative text).

🏗️ SECTION 2: HTML Structure & Semantics

Semantic HTML Elements

Semantic elements clearly describe their meaning to both browser (for accessibility and SEO) and developer. Below is a standard page structure:

Standard Semantic Page Structure
<header>...</header>
<nav>...</nav>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
    
    <section>...</section>
    
    <aside>...</aside>
</main>
<footer>...</footer>

Block vs. Inline Elements

Type Characteristics Examples
**Block** Takes up full width, starts on a new line, holds other blocks. <div>, <p>, <h1>-<h6>, <form>
**Inline** Takes only necessary width, stays on same line, holds only inline elements. <span>, <a>, <strong>, <input>, <code>
Block and Inline Behavior
<div>This is a block element</div>
<div>This starts on a new line</div>

<span>This is inline</span>
<span>and stays on same line</span>

✍️ SECTION 3: Text Formatting & Content

Headings (h1 - h6)

Headings define structure and hierarchy. Use them correctly for accessibility and SEO, not just for text size.

Headings Hierarchy Example
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
// ... down to h6

Text Formatting Tags (Semantic vs. Presentational)

Prefer **semantic tags** (e.g., <strong>) over presentational tags (e.g., <b>) as they convey meaning.

Tag Purpose (Semantic) Visual Result
<strong> Importance (SEO, Screen Readers) **Bold**
<em> Emphasis (Altered Meaning) *Italic*
<code> Computer Code Snippet Code Font
<mark> Highlighting/Relevance Highlighted

📝 SECTION 4: Lists & Navigation

Unordered and Ordered Lists

Unordered (Bullets) vs. Ordered (Numbers)
<ul> <!-- Unordered List (default bullets) -->
    <li>Item 1</li>
</ul>

<ol type="A"> <!-- Ordered List (Letters) -->
    <li>Step A</li>
    <li value="5">Starts at 5</li>
</ol>

Nested Lists and Description Lists

Description List Structure
<dl>
    <dt>HTML</dt> <!-- Term -->
    <dd>HyperText Markup Language</dd> <!-- Definition -->
</dl>

📋 SECTION 6: Forms & Input

Basic Form Structure

Form Tags and Attributes
<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <button type="submit">Submit</button>
</form>

action is the URL where data is sent. method is usually POST for data submission.

Input Types and Validation

Validation and Special Inputs
// Password Input with minimum length validation
<input type="password" minlength="8" required>

// Date Picker
<input type="date" name="birthday">

// File Upload (accepting images only)
<input type="file" name="photo" accept="image/*">

// Read-only field
<input type="text" value="Cannot change" readonly>

📊 SECTION 7: Tables & Data

Basic Table Structure

Tables must be used for **tabular data** (like spreadsheets), not for page layout.

Table Elements: <tr>, <th>, <td>
<table>
    <caption>Monthly Sales Report</caption>
    <thead>
        <tr> <th>Month</th> <th>Sales</th> </tr>
    </thead>
    <tbody>
        <tr> <td>January</td> <td>$50,000</td> </tr>
    </tbody>
    <tfoot> <!-- Used for totals/summary -->
        <tr> <th>Total</th> <td>$110,000</td> </tr>
    </tfoot>
</table>

Spanning Rows and Columns

Rowspan and Colspan
<th colspan="2">Name (Spans 2 columns)</th>
<td rowspan="2">Age (Spans 2 rows)</td>

🎨 SECTION 8: CSS Fundamentals

What is CSS?

**CSS (Cascading Style Sheets)** controls the visual presentation of HTML elements. It defines colors, fonts, layouts, and spacing.

**Three Pillars of CSS:** Cascading (priority rules), Specificity (selector weight), and Inheritance (properties passed to children).

Three Ways to Add CSS (Syntax)

External CSS (Best Practice)
<link rel="stylesheet" href="styles.css">
Internal CSS
<style>
    h1 { color: blue; }
</style>
Inline CSS (Highest Priority)
<p style="color: red; font-size: 18px;">Red text</p>

🎯 SECTION 9: CSS Selectors & Specificity

Basic and Grouping Selectors

ID, Class, Element, and Grouping
#header { /* By ID: 100 points */ }
.btn { /* By Class: 10 points */ }
p { /* By Element: 1 point */ }
h1, h2, h3 { /* Grouping */ }

Descendant, Child, and Sibling Selectors

Contextual Selectors
/* Selects all <p> inside any <div> */
div p { color: blue; } 

/* Selects only direct <p> children of <div> */
div > p { color: red; } 

/* Selects the <p> immediately following an <h1> */
h1 + p { font-weight: bold; }

Specificity Hierarchy (Highest to Lowest)

Source Example Points
Inline Styles style="..." 1000
ID Selector #idName 100
Class/Attribute/Pseudo-class .class, [type="text"], :hover 10
Element/Pseudo-element p, ::before 1
**Avoid `!important`:** It overrides all rules and should be used only as a last resort in specific overrides, as it breaks the natural flow of the cascade.

📦 SECTION 10: Box Model & Spacing

The CSS Box Model

Every HTML element is a box composed of four layers: **Content**, **Padding** (inside border), **Border** (Primary Light Green), and **Margin** (outside border).

**Box-Sizing Fix:** Always use box-sizing: border-box; on the universal selector (*) to ensure that padding and border are included *inside* the element's defined width.

Margin and Padding Shorthands

Shorthands (Clockwise: Top, Right, Bottom, Left)
// Sets 10px on all 4 sides
margin: 10px;

// Sets 10px Top/Bottom, 20px Left/Right
padding: 10px 20px;

// Sets Top: 5px, Right: 10px, Bottom: 15px, Left: 20px
border-width: 5px 10px 15px 20px;

🚀 SECTION 12: Layout Techniques (Flex & Grid)

Flexbox (`display: flex;`)

**Flexbox** is a single-dimension layout model, perfect for distributing space and aligning items along an axis (row or column).

Key Flex Properties

justify-content: Aligns items along the main axis (e.g., space-between, center).

align-items: Aligns items along the cross axis (perpendicular to the main axis).

flex-grow: Specifies how much an item should grow relative to the rest.

CSS Grid (`display: grid;`)

**CSS Grid** is a two-dimension layout model, excellent for full page layouts and complex component structures (defining both rows and columns).

Key Grid Properties

grid-template-columns: Defines column structure (e.g., repeat(3, 1fr)).

grid-gap: Sets spacing between grid cells.

grid-area / grid-column / grid-row: Defines element placement.

📱 SECTION 13: Responsive Design

The Viewport Meta Tag (Mandatory!)

Required Tag in <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser to set the viewport width equal to the device width, enabling responsive scaling.

Media Queries

Used to apply styles only when certain conditions (like screen size) are met. Essential for adapting layout between mobile and desktop.

Media Query Example (Mobile First)
/* Default styles for all devices (Mobile First approach) */
.container { padding: 10px; }

@media (min-width: 768px) {
    /* Styles applied ONLY when screen is 768px or wider (Tablet/Desktop) */
    .container { max-width: 1200px; padding: 20px; }
}