Chapter 1
HTML stands for Hypertext Mark-up Language.
It’s the standard language used to structure and display content on the web.
Think of it like the skeleton of a webpage — it tells the browser what things are (headings, paragraphs,
images, links, tables, etc.), but not how they look (that’s CSS’s job) or how they behave (that’s
JavaScript’s job).
Key points about HTML:
Mark-up Language – Uses tags (<tag name>) to describe elements.
Hypertext – Allows linking between web pages.
Structure, not style – Organizes content but doesn’t control visual design.
Works in all web browsers.
Example of a basic HTML page:
Here are the basic HTML tags you should know when starting out:
Tag Purpose Example
<!DOCTYPE html> Tells the browser this is HTML5 <!DOCTYPE html>
<html> Root element that wraps all HTML code <html> ... </html>
<head> Contains page metadata (title, links, etc.) <head> ... </head>
<title> Sets the title in the browser tab <title>My Page</title>
<body> Holds the visible content of the page <body> ... </body>
<h1> to <h6> Headings (h1 is biggest, h6 is smallest) <h1>Hello</h1>
<p> Paragraph text <p>This is a paragraph.</p>
Tag Purpose Example
<a> Hyperlink to another page or section <a href="[Link] me</a>
<img> Displays an image <img src="[Link]" alt="Description">
<br> Line break Line 1<br>Line 2
<hr> Horizontal line <hr>
<ul> Unordered (bulleted) list <ul><li>Item</li></ul>
<ol> Ordered (numbered) list <ol><li>Item</li></ol>
<li> List item (used inside <ul> or <ol>) <li>Apple</li>
<div> Division or section container <div>Content</div>
<span> Inline container for styling text <span>word</span>
The <div> tag in HTML is short for division — it’s used to group other HTML elements together into a block.
Think of it like a box or container that holds content so you can style or arrange it more easily with CSS or
control it with JavaScript.
It’s a block-level element → starts on a new line and takes full width by default.
Used for grouping related content.
Often paired with CSS classes or IDs for styling.
Has no visual effect on its own until styled?
CSS stands for Cascading Style Sheets — it’s the language used to style and design HTML content.
If HTML is the skeleton, CSS is the skin, clothes, and decoration that make it look nice.
Anatomy of a CSS Rule
A CSS rule has three main parts:
selector {
property: value;
1. Selector
Tells the browser which HTML element(s) to style.
Example: p (all <p> tags), .box (elements with class="box"), #main (element with id="main").
2. Property
The thing you want to change (color, font-size, background, etc.).
3. Value
The setting for the property.
p
{
color: blue;
font-size: 18px;
}
Selector: p → targets all paragraphs.
Properties: color, font-size.
Values: blue, 18px.
Inline CSS – inside an HTML tag’s style attribute:
<p style="color: red;">Hello</p>
Internal CSS – inside a <style> tag in the <head> section:
<style>
p
{
color: red;
}
</style>
External CSS – in a separate .css file and linked with:
<link rel="stylesheet" href="[Link]">
In CSS, a selector is what you use to target HTML elements so you can style them.
It’s like saying: “Hey browser, find these elements, and apply this style to them.”
Main Types of CSS Selectors
Universal Selector (*)
Targets all elements on the page.
css
CopyEdit
*{
margin: 0;
padding: 0;
}
Type Selector (Element Selector)
Targets all instances of a specific HTML tag.
css
CopyEdit
p{
color: blue;
}
Class Selector (. classname)
Targets elements with a specific class attribute.
css
CopyEdit
.box {
background-color: yellow;
}
ID Selector (#idname)
Targets a specific element with a unique id.
css
CopyEdit
#main {
font-size: 20px;
}
Group Selector (,)
Applies the same style to multiple selectors.
css
CopyEdit
h1, h2, p {
color: green;
}
Descendant Selector (space)
Targets elements inside another element.
css
CopyEdit
div p {
color: red; /* Only p inside div */
}
Child Selector (>)
Targets direct children only.
css
CopyEdit
div > p {
font-weight: bold;
}
Attribute Selector
Targets elements based on their attributes.
css
CopyEdit
input[type="text"] {
border: 1px solid black;
}
Pseudo-classes
Target elements in a specific state.
css
CopyEdit
a: hover {
color: orange; /* When hovered */
}
Pseudo-elements
Style specific parts of an element.
css
CopyEdit
p::first-letter {
font-size: 30px;
}