HTML
hypertext markup language
Introduction of html
Text- normal readabl content
Hypertext- that contain links to navigable
Markup -tags use to define and organize to content
Text:
Simple readable content
No links
Static information
Hypelink:
Text that contains links
Interactive in nature
Allow navigation
Used in websites
Markup lang used to structure and organize content on a webpage.
Html boilerplate
Pre written standard structure
<head>tag special keywords</>
Tags will browser to display the content
<h1>32px
<h2>24 (secetion heading)
<h3>18.72px
<h4>16px
<h5>13.28px
<h6>10.72px
<b>
<strong>
<i>
<em>
<Mark>
<small>
<del>
<ins>
<sub>
<sup>
sematic structure tags
<header>
<nav>
<main>
<section>
<ARTICLE>
<footer>
block line and inline elements
is used to create layout
Can contain other block and inline elements
<div>
<p>
<h1>
<section>
inline elemnts
All formatting tags are inline.
Only require length
<span>
<a>
<b>
<i>
<img>
html attribuete
am html attribute provide ectra information about an html elemnts it is
always written inside the opening tag
<tag attribute = “value”>
lists
ordered list
display item with numbers
Used when order is important
Unordered list
display items with buttet points
Used when order is not important
<foms>
Use to taker user data and process to server
Allow to enter user informationGot it — here’s the list of all HTML types
written out without a table format:
text → single-line text field
password → hides characters for secure entry
email → validates email format
number → numeric input with min/max options
tel → telephone number input
url → website address input
search → styled search field
date → date picker
time → time picker
datetime-local → date and time picker (local timezone)
month → month and year picker
week → week picker
color → color picker
checkbox → true/false selection
radio → select one option from a group
range → slider for numeric values
file → file upload field
hidden → invisible field (stores data)
button → clickable button (custom behavior)
submit → submits the form
reset → resets form fields to default
image → submit b utton using an image
In HTML, you can control the state and behavior of inputs using
attributes like checked, disabled, readonly, required, and more.
Here’s a quick rundown with examples:
Common Input Attributes
checked
o Used with checkbox or radio inputs.
o Marks the option as selected by default.
Subscribe to newsletter Male Female
disabled
o Makes the input uneditable and prevents user interaction.
o Disabled inputs are not submitted with the form.
readonly
o Similar to disabled, but the value is submitted with the form.
o User can’t change the value, but can still focus and copy it.
required
o Ensures the field must be filled before form submission.
value
o Sets a default value for the input.
placeholder
o Displays hint text inside the input until the user types.
autofocus
o Automatically focuses the input when the page loads.
multiple
Allows selecting multiple files or multiple email addresses.
👉 Together, you can combine these attributes. For example:
I agree
This creates a checkbox that is selected by default but cannot be
changed.
Css
Types of css
Inline css
Directly wrriten in html tags
Internal css
Written inside <styles> tags
Used of :
Small projects
Single page styling
Externsl css:
Written in separate file
Used for :
Clean code
Reusable easy maintenance
Professional
css selectors:
Selectors target pages html elamnts
Types:
Elemnts seletos
Class selectos
Id selectos
Group selectos
1. Element Selector
Selects HTML elements by tag name.
Syntax
elementName {
property: value;
Example
p{
color: red;
✔ Selects all <p> elements
2. Class Selector
Selects elements with a specific class attribute.
Syntax
.className {
property: value;
Example
.box {
background-color: blue;
<div class="box"></div>
<p class="box"></p>
✔ Applies to any element with class="box"
✔ Can be reused multiple times
3. ID Selector
Selects one unique element using its id.
Syntax
#idName {
property: value;
}
Example
#header {
font-size: 24px;
<div id="header"></div>
✔ IDs must be unique
❌ Should not be reused
4. Group Selector
Selects multiple selectors at once.
Syntax
selector1, selector2, selector3 {
property: value;
Example
h1, h2, p {
color: green;
✔ Applies the same style to all listed selectors
✔ Reduces repeated CSS
Colors in css
Summary Table
Selector Symb Examp
Usage
Type ol le
Element none p All <p> elements
Class . .box Multiple elements
#heade One unique
ID #
r element
Selector Symb Examp
Usage
Type ol le
Group , h1, p Many selectors
Quick Tip (Best Practice)
Use classes for styling
Use IDs for JavaScript or unique sections
Avoid styling with IDs too much
If you want, I can also explain:
Universal selector (*)
Attribute selectors
Descendant & child selectors
colors in css
Colors in CSS
CSS provides multiple ways to define colors, depending on precision
and use case.
1. Color Names
CSS has predefined color keywords.
Example
p{
color: red;
✔ Easy to use
❌ Limited control
Common names:
red
blue
green
black
white
yellow
gray
orange
2. HEX Colors
Most commonly used in web design.
Syntax
#RRGGBB
Example
div {
background-color: #ff0000; /* red */
Short form:
#f00; /* red */
✔ Precise
✔ Widely supported
3. RGB Colors
Defines color using Red, Green, Blue values (0–255).
Syntax
rgb(red, green, blue)
Example
h1 {
color: rgb(0, 128, 255);
4. RGBA Colors (with transparency)
Adds alpha (opacity).
Syntax
rgba(red, green, blue, alpha)
Example
div {
background-color: rgba(0, 0, 0, 0.5);
Alpha range:
0 → fully transparent
1 → fully visible
5. HSL Colors
Uses Hue, Saturation, Lightness.
Syntax
hsl(hue, saturation%, lightness%)
Example
p{
color: hsl(120, 100%, 50%); /* green */
✔ Easy to adjust brightness and shade
6. HSLA Colors (with transparency)
hsla(240, 100%, 50%, 0.3);
7. Transparent Keyword
background-color: transparent;
Makes the element fully transparent.
8. CurrentColor Keyword
border: 2px solid currentColor;
Uses the element’s text color.
Opacity Limits in CSS
The CSS opacity property has strict value limits.
Valid Range
opacity: 0 → 1;
Meaning
Value Effect
Fully transparent
0
(invisible)
0.1 –
Partially transparent
0.9
1 Fully visible (default)
1. Absolute Units (Fixed size)
These units do not change based on screen size or parent element.
Uni
Meaning
t
px Pixels
Centimete
cm
rs
mm Millimeters
in Inches
pt Points
pc Picas
2. Relative Units (Responsive)
These units adapt to screen size, parent size, or font size.
a) Font-relative units
Uni
Relative to
t
em Parent font size
Root (html) font
rem
size
ex x-height of font
Width of "0"
ch
character
Example
p{
font-size: 1.5em;
b) Viewport units
Unit Relative to
1% of viewport
vw
width
1% of viewport
vh
height
vmi Smaller of
n width/height
vma Larger of
x width/height
Example
section {
height: 100vh;
c) Percentage units
width: 50%;
✔ Relative to parent element
✔ Common for layouts
3. Newer Logical / Dynamic Units
Uni
Description
t
Small viewport
svh
height
Large viewport
lvh
height
Dynamic viewport
dvh
height
Used for mobile browser UI issues.
4. Angle Units (Transforms)
Uni
Example
t
deg rotate(45deg)
rotate(1.57ra
rad
d)
rotate(0.25tu
turn
rn)
5. Time Units (Animations)
Uni Exampl
t e
s 2s
ms 500ms
6. Resolution Units (Rare)
Unit Use
Dots per
dpi
inch
dpc Dots per
m cm
Device
dppx
pixels
The 4 Parts of the Box Model
From inside → outside:
Content → Padding → Border → Margin
Margin Collapse (CSS)
Margin collapse is a CSS behavior where vertical margins combine
into a single margin instead of adding together.
⚠️It happens only with top and bottom margins, never left or right.
Basic Example
.box1 {
margin-bottom: 20px;
.box2 {
margin-top: 30px;
Resulting space between boxes:
30px
Difference Between Margin and Padding (CSS)
Margin and padding both create space, but they work in different areas
of the CSS box model.
1. Margin
What it is
Space outside the element
Creates distance between elements
Syntax
div {
margin: 20px;
Key Points
✔ Outside the border
✔ Separates elements
✔ Background color does not apply
✔ Can collapse vertically
✔ Can be negative
2. Padding
What it is
Space inside the element
Creates space between content and border
box
div {
padding: 20px;
Key Points
✔ Inside the border
✔ Increases element size
✔ Background color applies
✔ Does NOT collapse
✔ Cannot be negative
Side-by-Side Comparison Table
Feature Margin Padding
Position Outside border Inside border
Affects element
❌ ✔
size
Background color ❌ ✔
Margin collapse ✔ ❌
Negative values ✔ ❌
Spacing between Spacing inside
Used for
elements element
Flex is used to create the space between items
Flex direction is used to control direction
1️⃣ justify-content
Controls alignment along the MAIN axis
Flexbox
o row → horizontal
o column → vertical
Grid
o horizontal alignment of the grid
Common values
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
Example (Flexbox – horizontal centering)
.container {
display: flex;
justify-content: center;
📌 Moves items left ↔ right (when flex-direction: row)
2️⃣ align-content
Controls alignment of MULTIPLE rows/columns on the CROSS axis
⚠️Important rule
align-content works ONLY when:
flex-wrap: wrap;
There are multiple lines
Common values
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
space-evenly;
stretch;
Example (Flexbox – wrapped rows)
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: center;
📌 Moves rows up ↕ down, not individual items
🔴 Very Common Mistake
People use align-content instead of align-items.
Difference table
What it Needs
Property
aligns wrap?
Single row
align-items ❌ No
items
align-
Multiple rows ✅ Yes
content
Key Characteristics of display: block
Starts on a new line.
Takes up the full available width by default.
You can set width, height, margin, and padding.
Common block elements: <div>, <p>, <h1>–
<h6>, <section>, <article>.
Example:
Html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
.block-example {
display: block; /* Makes the element block-level */
background-color: lightblue;
padding: 10px;
margin: 10px 0;
width: 200px; /* Width works on block elements */
</style>
</head>
<body>
<span class="block-example">I am a span, but now I behave like a
block.</span>
<span>I am a normal inline span.</span>
</body>
</html>
Explanation:
Normally, <span> is inline (does not start on a new line).
By applying display: block, it:
o Starts on a new line.
o Can have width/height applied.
o Pushes the next element below it.
✅ Tip:
If you want an element to behave like a block but still flow inline,
use display: inline-block instead.
If you want, I can also give you a visual diagram showing the difference
between block, inline, and inline-block.
Do you want me to prepare that?
In HTML/CSS, display: inline is a CSS property value that makes an
element behave like an inline element (similar
to <span>, <a>, <strong>).
Key Characteristics of display: inline
Does not start on a new line — flows with surrounding
text/content.
Ignores width and height — these properties have no effect.
Respects left/right margins and padding, but top/bottom
margins and padding have limited effect.
Commonly used for styling text or small inline elements without
breaking the flow.
Example:
Html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
.inline-box {
display: inline;
background-color: lightblue;
padding: 5px; /* top/bottom padding works visually, but doesn't push
other lines */
margin: 0 10px; /* left/right margin works */
border: 1px solid blue;
</style>
</head>
<body>
<p>
This is <span class="inline-box">inline text</span> inside a
paragraph.
It flows <span class="inline-box">without breaking</span> the line.
</p>
</body>
</html>
When to Use
To keep elements in the same line as text or other inline elements.
For styling words or phrases without affecting the document flow.
💡 Tip:
If you want an element to stay inline but still allow width and height
control, use display: inline-block instead.
Do you want me to make a side-by-side visual
example comparing inline, inline-block, and block? That would make the
difference very clear.
In HTML/CSS, display: none; is a CSS property-value pair used
to completely hide an element from the page — it is not visible and
does not take up any space in the layout.
Example:
Html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
.hidden-element {
display: none; /* Element will not be shown and won't occupy space */
</style>
</head>
<body>
<h1>This heading is visible</h1>
<p class="hidden-element">You can't see me because I'm hidden with
display:none.</p>
</body>
</html>
Key Points:
Effect: The element is removed from the document flow — as if it
doesn't exist.
Difference from visibility: hidden;:
o display: none; → Hides the element and removes its space.
o visibility: hidden; → Hides the element but keeps its space.
Can be toggled dynamically with JavaScript:
Html
Copy code
<button onclick="toggleElement()">Toggle Paragraph</button>
<p id="myPara">This is a paragraph.</p>
<script>
function toggleElement() {
const para = [Link]("myPara");
if ([Link] === "none") {
[Link] = "block"; // Show it
} else {
[Link] = "none"; // Hide it
</script>
✅ Use Case:
Hiding menus, modals, or elements until triggered by user
interaction.
Conditional rendering in JavaScript frameworks.
If you want, I can also show you a CSS-only method to toggle display:
none; without JavaScript.
Do you want me to include that?
Position static(default)
.normal document floe
.top/left/right/bottom do not work
Position static : static;
Postion :retative:
Move the elemets relative to its original positin.
Is does not remove elemnt from normal flow
Posion:relative;
Positon: absolute
Rove elemt from normal flow and posion it freely
Posioin :fixed
It stays same place even when scrolling.
Psotion: sticky
Acts ike relative util scroll reches threshold then acts fixed.
Basic CSS Grid Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 10px;
}
.grid-item {
background: #4caf50;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
Key Grid Concepts
1. Enable Grid
display: grid;
Turns the container into a grid layout.
2. Define Columns
grid-template-columns: repeat(3, 1fr);
3 columns
1fr = one fraction of available space
repeat() avoids repetition
3. Spacing Between Items
gap: 10px;
Controls spacing between rows and columns.
Responsive Grid (Recommended)
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
✔ Automatically adapts to screen width
✔ No media queries required
Grid vs Flexbox (Quick Rule)
Use Grid when… Use Flexbox when…
2D layout (rows + 1D layout (row or
columns) column)
Page structure Component alignment
Equal columns Dynamic content flow
Common Grid Properties
grid-template-rows
grid-template-columns
grid-column
grid-row
justify-items
align-items
place-items
Example: Item Spanning Columns
.grid-item:first-child {
grid-column: span 2;
}
First item spans two columns.
Grid template row
Defines height of row
Gap
Add space between grid items
What is Responsive Design?
Responsive design means your layout adapts to screen size and
device capabilities (mobile, tablet, desktop) using CSS—not separate
sites.
Core tools:
Fluid layouts
Flexible images
Media queries
Modern layout systems (Grid & Flexbox)
1. Viewport (Required)
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
Without this, mobile layouts break.
2. Fluid Layouts (Percent & fr)
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
Or using Grid:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3. Responsive Images
img {
max-width: 100%;
height: auto;
}
Prevents overflow on small screens.
4. Media Queries (Breakpoints)
Mobile-first (recommended)
/* Base: mobile */
body {
font-size: 16px;
}
/* Tablet */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Desktop */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
5. Responsive Grid Layout (Real-world pattern)
<div class="layout">
<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
.layout {
display: grid;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
gap: 1rem;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
"header header"
"nav main"
"aside main"
"footer footer";
grid-template-columns: 200px 1fr;
}
}
6. Flexbox for Components
.card {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.card {
flex-direction: row;
}
}
Perfect for navbars, cards, and toolbars.
7. Modern Responsive Units
Unit Use case
% Fluid widths
vw / Viewport-based
vh sizing
Scalable
rem
typography
fr Grid layouts
clamp( Responsive font
) sizes
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
8. Common Breakpoints (Guideline)
≤ 576px phones
768px tablets
1024px laptops
1200px+ desktops
Use content-driven breakpoints, not device lists.
Best Practices (Short List)
✅ Mobile-first CSS
✅ Avoid fixed widths
✅ Use Grid for layout, Flexbox for components
✅ Test with browser dev tools
❌ Don’t rely on JS for layout
If you want, I can:
Convert an existing layout to responsive
Build a mobile-first page from scratch
Explain Bootstrap/Tailwind responsiveness
Debug why a layout breaks on mobile