HTML & CSS Notes ��� Beginner Guide
HTML & CSS — Complete Beginner Notes
PART 1: HTML (HyperText Markup Language)
1.1 What is HTML?
HTML is the structure/skeleton of every webpage.
It is not a programming language — it’s a markup language. It describes content using
tags, not logic like loops or conditions.
“HyperText” = text that links to other text (hyperlinks).
Every website you visit is built with HTML at its core, then styled with CSS and made
interactive with JavaScript.
Analogy: If a webpage were a house — - HTML = the walls, rooms, doors (structure) - CSS = paint,
furniture, decoration (style) - JavaScript = electricity, plumbing, switches (behavior)
1.2 Basic HTML Document Structure
Every HTML file follows this skeleton:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Breakdown:
Part Meaning
Tells the browser “this is an HTML5
<!DOCTYPE html>
document”
<html>
Root element — wraps everything
Metadata (not visible on page) — title, links to
<head>
CSS, etc.
<title> Text shown on the browser tab
<body> Everything visible to the user goes here
1.3 Tags, Elements & Attributes
Tag: <p> — the marker itself
Element: <p>Hello</p> — opening tag + content + closing tag
Most tags come in pairs: <p>...</p> (opening and closing)
Some tags are self-closing (no content, no closing tag): <br> , <img> , <hr> , <input>
Attributes
Extra information added inside the opening tag:
<img src="[Link]" alt="A cute cat" width="300">
<a href="[Link] target="_blank">Go to Google</a>
src , href , alt , width , class , id , style are common attributes.
Format: attribute="value"
1.4 Essential Tags Cheat Sheet
Text & Headings
<h1>Biggest Heading</h1>
<h2>Smaller Heading</h2>
<h3>...</h3> ... <h6>Smallest Heading</h6>
<p>A paragraph of text.</p>
<br> <!-- line break -->
<hr> <!-- horizontal line -->
<strong>Bold (important)</strong>
<em>Italic (emphasis)</em>
<b>Bold (visual only)</b>
<i>Italic (visual only)</i>
Links & Images
<a href="[Link] here</a>
<img src="[Link]" alt="description">
Lists
<!-- Unordered (bullets) -->
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<!-- Ordered (numbers) -->
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
Containers / Structure
<div>A generic block container</div>
<span>A generic inline container</span>
<div> = block-level box (takes full width, starts on a new line)
<span> = inline box (only takes as much width as needed)
Semantic Layout Tags (modern HTML5)
<header>Top of page (logo, nav)</header>
<nav>Navigation links</nav>
<main>Main content</main>
<section>A thematic section</section>
<article>Self-contained content (blog post, news article)</article>
<aside>Side content (ads, related links)</aside>
<footer>Bottom of page (copyright, contact)</footer>
These describe meaning, not just appearance — good for SEO and accessibility.
Tables
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>21</td>
</tr>
</table>
<tr> = table row
<th> = header cell
<td> = data cell
Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Send">
</form>
Common <input> types: text , email , password , number , checkbox , radio , date , submit
1.5 id vs class
<p id="intro">This is unique.</p>
<p class="highlight">This can repeat.</p>
<p class="highlight">So can this.</p>
id class
Uniqueness Only one element per page Reusable on many elements
CSS selector #intro .highlight
Use case A single specific element A group of similar elements
1.6 Comments in HTML
<!-- This is a comment, not shown on the page -->
PART 2: CSS (Cascading Style Sheets)
2.1 What is CSS?
CSS controls the look and layout of HTML: colors, fonts, spacing, positioning,
responsiveness.
“Cascading” means rules can flow down and override each other based on specificity and
order.
2.2 Three Ways to Add CSS
1. Inline (inside the tag itself — avoid for real projects)
<p style="color: red;">Red text</p>
2. Internal (inside <head> using <style> )
<head>
<style>
p { color: blue; }
</style>
</head>
3. External (best practice — separate .css file)
<head>
<link rel="stylesheet" href="[Link]">
</head>
/* [Link] */
p {
color: green;
}
2.3 CSS Syntax
selector {
property: value;
property: value;
}
Example:
h1 {
color: navy;
font-size: 32px;
text-align: center;
}
2.4 Selectors
Selector Example Targets
Element p { } All <p> tags
Class .highlight { } All elements with class="highlight"
ID #intro { } The element with id="intro"
Universal * { } Every element
Descendant div p { } <p> inside a <div>
Grouping h1, h2, p { } Applies same rule to all listed
2.5 The Box Model (VERY important)
Every HTML element is a rectangular box made of these layers, from inside out:
┌─────────────────────────────┐
│ Margin │ ← space outside the border
│ ┌─────────────────────┐ │
│ │ Border │ │ ← the visible edge
│ │ ┌───────────────┐ │ │
│ │ │ Padding │ │ │ ← space inside the border
│ │ │ ┌──────────┐ │ │ │
│ │ │ │ Content │ │ │ │ ← actual text/image
│ │ │ └──────────┘ │ │ │
│ │ └───────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────────┘
div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
margin — space outside the element (pushes other elements away)
border — the line around the element
padding — space inside the element (between border and content)
width / height — size of the content area
2.6 Colors
color: red; /* named color */
color: #ff0000; /* hex code */
color: rgb(255, 0, 0); /* red, green, blue */
color: rgba(255, 0, 0, 0.5); /* with transparency (alpha) */
2.7 Text & Fonts
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1.5;
text-decoration: underline;
}
2.8 Background
div {
background-color: lightblue;
background-image: url("[Link]");
background-size: cover;
}
2.9 Display & Positioning Basics
display: block; /* takes full width, new line */
display: inline; /* only as wide as content, stays in line */
display: inline-block;/* mix of both */
display: none; /* hides the element completely */
position: static; /* default */
position: relative; /* offset from its normal position */
position: absolute; /* positioned relative to nearest positioned parent */
position: fixed; /* stays fixed on screen even when scrolling */
2.10 Flexbox (modern layout tool)
.container {
display: flex;
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 10px;
}
Flexbox is the go-to way to align and space items in a row or column — used constantly in real-
world layouts (navbars, cards, centering content).
2.11 CSS Box Sizing Tip
* {
box-sizing: border-box;
}
This makes width / height include padding and border, avoiding sizing headaches — commonly
added at the top of every stylesheet.
2.12 Comments in CSS
/* This is a CSS comment */
PART 3: Putting It Together — Mini Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.card {
width: 300px;
margin: 30px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
text-align: center;
}
</style>
</head>
<body>
<div class="card">
<h1>Welcome!</h1>
<p>This is a styled card using HTML and CSS.</p>
<a href="[Link] more</a>
</div>
</body>
</html>
PART 4: Suggested Learning Order (Beginner
Path)
1. HTML structure, tags, attributes
2. Text, links, images, lists
3. Semantic tags, forms, tables
4. CSS syntax & selectors
5. Box model
6. Colors, fonts, backgrounds
7. Flexbox (then later: CSS Grid)
8. Responsiveness ( @media queries)
9. Build small projects: a personal bio page, a simple card layout, a navbar
Quick Reference: Common Beginner Mistakes
Forgetting to close tags ( <p>text</p> not <p>text )
Using id when they meant class (or vice versa)
Forgetting to link the CSS file ( <link> tag in <head> )
Confusing margin (outside) with padding (inside)
Not using alt text on images (bad for accessibility)