📚 HTML & CSS Full Course Overview

Brief Overview
This note covers HTML & CSS fundamentals and was created from the HTML & CSS Full
🌎
Course for free YouTube video. The video covers HTML structure, CSS styling,
multimedia embedding, form creation, navigation design.

Key Points
Comprehensive coverage of HTML tags and page structure.
Progressive learning of CSS styling from inline to external sheets.
Practical demos for images, audio, video, forms, navigation, and layout
techniques.

🌐 HTML Basics
🏗️ Structure of an HTML Document
Definition: The basic skeleton that tells the browser how to interpret the file.

declares the document as HTML 5.

is the root element.
holds metadata (e.g., title).
contains visible content.
🔖 Common Tags
Tag Purpose Example
 – Headings of decreasing size
This is an H1
heading
Paragraph of text Some text goes here.
Line break (self‑closing) Line 1
Line 2
Horizontal rule (self‑closing)
Pre‑formatted text
(preserves line 1\n line 2
spaces/line‑breaks)
Comment (ignored by
browser)
Heading tags are paired (

…
).
Paragraphs ignore extra whitespace unless

is used.

📂 Project Setup
Browser: Chrome, Firefox, Edge, Safari.
Editor: Visual Studio Code (free).
Extension: Live Server – auto‑reloads page on save.
Folder workflow
1. Create a folder (e.g., website).
2. Inside, create [Link].
3. Add additional files (e.g., [Link], images/, music/).

🎨 CSS Overview
 Definition: Cascading Style Sheets add visual styling (colors, layout, fonts) to the HTML
structure.

Think of HTML as the foundation of a house and CSS as the interior décor.

🔗 Hyperlinks
Creating a Link

Click me

href (hypertext reference) – URL or file path.

target="_blank" – opens link in a new tab/window.
title – tooltip shown on hover.
URL Types
Type Example Use case
Absolute [Link] Links to an external site.
Relative [Link] Links to a file in the same
folder.

🖼️ Images
Basic Image Tag

Picture of a dog

src – file name (or path).

alt – alternative text for accessibility & fallback.
height / width – size in pixels (setting one dimension auto‑scales the other).
Organizing Images
Store images in an images/ subfolder.
 Update src accordingly: src="images/[Link]".
Image as a Hyperlink

Dog picture

Wrapping
inside makes the image clickable.

🎧 Audio
Embedding Audio

0:00 / 0:00

controls – shows play/pause UI.

autoplay – starts automatically (often paired with muted).
muted – silences autoplay.
loop – repeats when finished.
Multiple elements provide fallback formats.
Adding Labels

First Song Title

0:00 / 0:00

Use
(or
 ) to label each track.

🎬 Video
Embedding Video

0:00

width (or height) sets display size; the other dimension scales automatically.
controls, autoplay, muted, loop work the same as with
Provide multiple source formats for broader compatibility.
Video as a Link

0:00
 Clicking the video navigates to the specified URL.

🗂️ Favicons
Adding a Favicon

rel="icon" indicates the link is a site icon.

Supported formats: ICO, PNG, GIF, JPEG, SVG.
Place the icon file in an images/ folder and adjust the href path.

✍️ Text Formatting
Definition: Inline HTML tags that modify the visual style of text.

Bold: Bold text

Italic: Italic text
Underline: Underlined text
These tags can be combined with other elements (e.g., inside a paragraph).

✒️ Text‑Formatting Tags
Definition: HTML tags that modify the visual style of inline text.

Tag Effect Example

Bold text This is bold
Italic text This is italic
Underlined text This is underlined
Deleted (strikethrough) Removed text
 Slightly larger than Big text
surrounding text
Slightly smaller than Small text
surrounding text
Subscript (appears lower) H 2O
Superscript (appears x2
higher)
Monospaced (typewriter) code
text
Highlighted text (default Important
yellow)
Closing tags are required; omitting a closing tag causes the markup to cascade
unintentionally.

This is bold and italic text.

📦 Container Elements – span & div

Definition: Elements that group other HTML content for styling or scripting.

– inline container; does not start a new line.

– block‑level container; occupies the full width and starts on a new line.

Span Title
 Div Title

Both tags can receive a style attribute for inline CSS (e.g., background-color,
color).
Use when you need to style part of a line; use
for larger sections or whole‑page sections.

📋 HTML Lists
Definition: Structured groups of items, rendered as bullet points, numbers, or key‑value
pairs.

Unordered List (
)
Order of items does not matter.
Each item wrapped in
.

Groceries

Milk

Eggs

Bread

Coffee

Nested lists are created by placing another

 inside an
.
Ordered List (
)
Items are automatically numbered.

To‑Do List

1. Eat breakfast

2. Go to class

3. Walk the dog

4. Go to work

Description List (
)
Consists of terms (
) and definitions (
).

Mythical Creatures

Dragon

A mythical monster resembling a giant reptile, sometimes winged.

 Phoenix

An immortal bird associated with Greek mythology.

Vampire

A creature that feeds on the blood of the living.

Werewolf

An individual that can shapeshift into a wolf.

Lists can be styled with CSS (e.g., background color, borders) once you
reach that topic.

📊 Tables
Definition: Grid‑like structures for displaying tabular data.

Use
as the container.
defines a row.

defines a
header cell
(default bold
defines a data
cell.
/
🔘 .

& centered). Store Hours

Buttons
Definition:
Sunday Monday
Interactive
Tuesday Wedn

Closed 9 – 5 9 –elements
5 9
that can
Common trigger
attributes: actions or
navigation.
border,
width,
align,
style Click M
(for Styling
background, via
text the
color, style
etc.). attribute
Adjust (e.g.,
column font-
width size,
with background
the color,
width color,
attribute border-
on radius).
To
link
a
button,
wrap
it
with
an
tag:

Go to Google

JavaScript
(optional,
beyond
current
scope)
can
be
attached
with

📄 Forms
onclick="fu
 Definition:
Structured
groups of
input
controls
that collect
user data
for
submission.
Basic
Structure

action
–
URL
or
script
that
receives
the
data.
method
–
get
(for
non‑sensiti
data)
or
post
(for
private
data).
Common
Input Types
TypeExample
Typ
Use
 text Sing
text
password Hidd
char
email Valid
ema
form
tel Tele
num
date Cale
mm/dd/y
pick
number
1 Num
entr
radio Sing
choi
amo
a
set
submitSubmit
Send
form
data
reset Clea
Reset
all
field
Labels &
Accessibility
Username:

for
attribute
on
must
match
the
id of
its
 associated
.
Improves
accessibilit
and
makes
clicking
the
label
focus
the
input.
Additional
Attributes
required
–
forces
the
field
to
be
filled
before
submission
placeholde
–
faint
hint
text
displayed
inside
the
input.
pattern
–
regex
pattern
for
custom
validation
(e.g.,
phone
 format
\d{3}-
\d{3}-
\d{4}).
min,
max,
minlength,
maxlength
–
constrain
numeric
or
text
length.
Example
Form

Username:
SpongeBob

Password:

Email:
spongebob@

Phone:
123-456-7890

Birth Date
mm/dd/yyyy

Quantity:
 1

Title:

Mr.
Miss
Ph.D.

Submit
Reset

The
form
includes
labels,
required
fields,
placeholde
pattern
validation,
and
both
submit
and
reset
buttons.
These sections
build on the
earlier basics,
showing how
HTML can
format text,
group content,
create lists,
display tabular
data, add
interactive
buttons, and
collect user
input through

📋 Form
forms.

Elements
&
Grouping
Definition:
Form
controls
collect user
input and
send it to a
server for
processing.
🎚️ Radio
Button
Group
Use
the
same
name
attribute
for
all
radios
in a
group
so
only
one
can
be
selected.
value
attribute
holds
the
 data
sent
when
the
button
is
chosen.

Mr.

Miss

PhD

📂
Drop‑down
Menu (
tags.
Each
needs a va
Visa

✅
Checkbox
with Label
type="chec
lets
the
user
toggle
a
single
boolean
option.
 The
’s for
attribute
must
match
the
input’s
id
for
click‑to‑tog
behavior.

Subscribe

🗒️ Text
Area
captures
text.</p>
l li

📁
File
Upload
type=
open
a
file‑c
dialog
accep
restri
selec
MIME
types
(com

File:
Choose F
📤
Form
Encoding
For
large
binar
data
(e.g.,
image
set
the
form’
encty
to
multi
data

🏗️
Seman
Page
Structu
Definitio
Semanti
tags
convey
meaning
to
browser
and
assistive
technolo
 improvin
accessib
and
CSS
targeting

📑
Header
(
)
Holds
introd
conte
site
title,
logo,
navig
links.

Welc

Hom
Abo
Pro
Con

🖥️
Main
Content
(
)
Centr
page
conte
often
wrap
aroun
head
image
parag
etc.

Check O

Sample

📜
Footer
(
)
Conta
concl
inform
autho
copyr
conta

Autho

© 202
 brocod

🎨
CSS
Applica
Method
Definitio
Cascadin
Style
Sheets
(CSS)
define
visual
presenta
of
HTML
element

1️⃣
Inline
CSS
Add
a
style
attrib
direct
to
an
HTM
tag.
 This

Paragra

2️⃣
Internal
Styleshee
Place
3️⃣
Exte
Style

/*
bod
 h1
p

🌈
CSS
Col
Val
De
Co
ca
be
ex
in
se
fo
ea
of
dif
fle

Form
S
Namc
t

RGBc
r
2
Hexc
#

HSLc
h
5
6

/*
#p1
#p2
#p3
#p4

🖋️
Fon
&
Typ
De
Fo
fam
de
the
typ
us
 fo
tex
fal
gu
dis
ac
bro

Font
Fam
&
Fallb

h1
f
}
p {
f
}

Goo
Font
Integ
1.

2.
 3.

4.

h1
p

Loca
Font
Files
with
@fon
face
 @fo
f
s
}
@fo
f
s
}

/*
h1
p

📦
CSS
Bor
De
Th
bo
pro
ou
an
ele
wi
sty
wi
an
co

Indiv
Bord
Prop
 h1
b
b
}

Shor
Synt

/*
p {
Dire
Bord

p {
b
b
b
b
b
}

🌟
Sha
De
Sh
ad
de
by
of
a
blu
co
of
an
ele
co

Text
Shad
(text
shad
 h1
t
}

Box
Shad
(box
shad

#bo
w
h
b
b
}

🌟
Tex
&
Box
Sha
De
Th
tex
sh
an
bo
sh
pro
ad
a
co
of
blu
be
tex
or
an
blo
ele
cre
a
se
of
de

✍️
Text
Shad
(text
shad
 /*
h1
t
}

📦
Box
Shad
(box
shad
#bo
w
h
b
b
}
📐
Ma
De
A
ma
is
the
tra
sp
ou
an
ele
bo
se
it
fro
ne
ele
🧭
Marg
Dire
Prop
marS
top a
t
e
marS
right
t
r
marS
bottb
marS
left t
t
l
marS
(shoa
f
s
u
 (
m
5
mar
autor
s
c
u
t
c
a
b
e
h

/*
.bo
m
m
m
m
}

/*
.ce
m
}
🏄‍♂️
Floa
Pro
De
Th
flo
pro
rem
an
ele
fro
the
no
flo
an
all
inl
co
to
wr
aro
it.
📸
Exam
Wor
1.

2.

3.

4.
 #im
f
h
m
}

📦
Cont
Floa
Elem
 bod
d
}

📦
Ove
Pro
De
ov
co
ho
a
co
ha
co
 tha
ex
its
he

Valu
visibC
s
o
(
hidd
c
i
c
a
b
i
b
s
a
v
s
clipS
t
h
u
t
w
o
t
d
h
f
t
o
i
a
scroS
a
(
 a
r
o
n
autoS
a
o
w
n

/*
.bo
b
h
o
}
📏
Dis
Pro
De
dis
de
an
ele
re
be
an
ho
it
pa
in
the
do
flo

🔹
Core
Valu
Valu
blocS
o
a
n
l
t
f
a
w
inlinS
o
t
 s
l
w
i
inlin
blocl
i
b
a
w
non
i
r
f
t
l
e
visib
hiddr
(relai
t
l
b
i
n
v

/*
spa
d
w
h
b
}
📐
Wid
&
Hei
Pro
De
wi
an
he
se
the
ex
dim
of
an
ele
W
om
the
va
de
to
au

🛠️
Typi
Valu
📦
Box‑
 * {
b
}

📊
Min/
Cons
Prop
min-G
widta
/ m
min-s
heigr
o
c
maxC
widtt
/ s
maxs
heigt
e
n
e
t
l

.bo
w
m
m
}
📍
Pos
Pro
De
po
de
ho
an
ele
is
pla
rel
to
its
no
flo
an
its
an

🗺️
Posi
Type
Valu

stat
(deff

relaO
o
s

fixeV

abso
p
a
(
e
w
r
a
f
o
s
n
f
b
t
v
stickS
p

/*
#re
p
t
l
}

/*
#fi
p
t

/*
#co
p
}
#ab
p
t
l
}

/*
hea
p
t
}
🌆
Bac
Ima
De
Th
ba
im
pro
se
an
im
as
the
vis
ba
of
an
ele
of
the
.
bod
b
b
b
b
}
🌄
Bac
Ima
De
Th
ba
im
pro
se
an
im
as
the
ba
of
an
ele
typ
the
.
Key
prope
to
contr
appe
PropT
v
backn
reper

backc
pos
backf
atta

backc
size

/*
bod
b
b
b
b
b
}

🔗
CSS
Com
 De
Co
de
the
rel
be
mu
se

ComS
Des(

Chil>

Gen~
sibli

Adja+
sibli

Exam
mark
 Pa

Pa

Pa

Pa

Pa

Selec
usag

/*
in
#co

/*
ch
#co

/*
th
#co

/*
af
#co
🎭
Pse
De
Ps
are
ke
ap
to
a
se
(p
by
:)
tha
sty
an
ele
in
a
pa
sta
PseT
u
:link
s
o
a
u
h
:hovW
t
c
h
o
t
e
:actiW
t
e
i
b
a
(
m
b
h
d
:visiA
a
h
h
b
f
:not
a
s
t
e
n
m
 t
a
:nthT
childe
b
o
t
n
p
Samp
CSS

/*
a:l
a:h
a:a
a:v

/*
li
li
li
li
li
li
✨
Pse
De
Ps
(p
by
::)
all
sty
of
sp
pa
of
an
ele
co

PseT
::firsT
lettef
c
o
a
b
 o
t
::firsT
linef
f
l
o
a
b
::selT
h
b
t
u
::beC
i
b
t
e
::aftC
i
a
t
e
::maT
m
(
o
l
i
Illust
CSS

/*

*/

h1
 f

/*

p:

/*

p:

/*

li

#ap

#or

#ba

/*

ul#
 c

📄
Pag
 De
Pa
sp
co
int
dis
pa
an
pro
na
lin
fo
mo
be
the

HTML
struc

Pa

«
1
2
3
4
5
»

Key
CSS
rules

.pa
t
}

/*
.pa
c
t
p
d
}

/*
.pa
b
f
b
}

/*
.pa
b
b
}
⏬
Dro
Men
De
A
dr
me
rev
hid
op
wh
a
us
int
 wi
a
tri
ele
us
on
HT
an
CS

Mark
patte

Lo

Stylin
essen

/*
.d
b
c
p
b
c
}

/*
.d
b
}

/*
.d
d
c
t
p
}

/*
.d
b
}

/*
.d
b
p
m
b
d
}

/*
.d
d
}

/*
.d
d
}
🧭
Nav
Bar
De
A
na
ba
(
)
gro
a
se
of
na
lin
typ
 sty
as
a
ho
me

Basic
mark

My