- HTML stands for HyperText Markup Language.
- It is the standard language used to create and structure web pages on the Internet.
- In short: HTML tells the browser what content to show — such as text, images, links, buttons, tables, and videos.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is an example of a simple HTML document.</p>
</body>
</html>| Section | Purpose |
|---|---|
<!DOCTYPE html> |
Tells the browser to use HTML5 |
<html> |
Root element of the page |
<head> |
Contains metadata (title, CSS, scripts) |
<body> |
Contains visible content for users |
| Tag | Description |
|---|---|
<h1> – <h6> |
Headings |
<p> |
Paragraph |
<a href=""> |
Hyperlink |
<img src=""> |
Image |
<ul>, <ol>, <li> |
Lists |
<table> |
Table |
<div> |
Division / container |
<span> |
Inline container |
<form> |
Input form |
- CSS stands for Cascading Style Sheets.
- It is the language used to style and design web pages — controlling how HTML elements look (color, size, layout, fonts, spacing, animations, etc.).
- In short: HTML builds the structure, and CSS makes it beautiful.
- “Cascading” means if multiple styles apply to the same element, the browser decides which one wins — based on priority (specificity and order).
- Example:
p { color: blue; }
p { color: red; } /* this one wins */selector {
property: value;
}Example
p {
color: red;
font-size: 16px;
}<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 40px;
}
p {
color: gray;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first styled web page.</p>
</body>
</html>| Method | Where | Example |
|---|---|---|
| Inline | Inside HTML tag | <p style="color:red;">Hello</p> |
| Internal | Inside <style> in <head> |
<style>p{color:red;}</style> |
| External | In separate .css file |
<link rel="stylesheet" href="style.css"> |
| Concept | Description |
|---|---|
| HTML | Structure — the content |
| CSS | Presentation — how it looks |
| JS | Behavior — how it interacts |
- type
lorem10 - the press
tab
| You Type | Then Press Tab |
What It Does |
|---|---|---|
lorem |
→ | Generates ~30 words of dummy text |
lorem10 |
→ | Generates 10 words |
lorem50 |
→ | Generates 50 words |
lorem*3 |
→ | Generates 3 paragraphs |
p*3>lorem10 |
→ | Creates 3 <p> tags each with 10 words |
- https://en.wikipedia.org/wiki/HTML
- https://www.w3schools.com/html/html_intro.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://en.wikipedia.org/wiki/CSS
- https://www.w3schools.com/css/css_intro.asp
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS