0% found this document useful (0 votes)
3 views24 pages

Html_css notes

The document appears to be a fragmented guide on using Visual Studio Code and HTML/CSS coding practices. It covers various aspects of coding, including HTML structure, CSS styling, and the functionality of VS Code. The content is disorganized and contains numerous typographical errors, making it difficult to extract coherent information.

Uploaded by

akshat8958
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views24 pages

Html_css notes

The document appears to be a fragmented guide on using Visual Studio Code and HTML/CSS coding practices. It covers various aspects of coding, including HTML structure, CSS styling, and the functionality of VS Code. The content is disorganized and contains numerous typographical errors, making it difficult to extract coherent information.

Uploaded by

akshat8958
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Donlocað ’ VS Code cSousce ode Editeo)

Hele to code Edt Disli.


Bettes than nte pod boz va
OFoldeY
Word
Ait + 2

featu VS Code 4 opening tag atr Adomstielly closi tas ji

optton Cummard Pelatte


medi
ophion sctey Cut
’ Zom
Hon oebsite oorhs
Respone idcly 2.e
Request Esso 4.4
client) Responsa |Sesver
Const

Bsoosen
Cyle continady ku CBund)

SeSVes Sida ol he wbsite


Backend >. t is tha mahes Suse evigthins on the client Sjde
" 3+ Slo6es & u68umes data, ak.
" yau Can' Sa intSUct im
diset Contact oit
slw tmat doesn' Cor in

t CsS Dynamiç Rordy


Bsain
Shelton e Btton Colos mestty
(ex-Seasch
Beot
eao
to add vi
in hTmL /videoy
Zvideo dc " Video d. mptConttcls
tn
nav to coli a'oasde their odu
Code
o\net tople
index m
Sipt is

exteyion tab (Top -le)


VS od
fucti onaty t enhcce
use vs (ode
iCona intel
JS
3

Not Live Prvit) t wtal a


)n
Lie revit 2 412 2 Line festim Top Rignt )

3
Nos inK wth HTML

",shect "hory
<lhead >

Cuusse").
java clylopmot
alet(" lcome to
Nos ink in HTmL fil jut
à
Note sesipt
"sip'jo"/rit
Llbody
Emaithg
Autolomte
Monhel

to ylo
)HTML not nod

Basic Stouctue
HTNL >
DoTYE
2
Scale|-t ">
UTF-8 "> oidt initia
ehead >
Z meta
charset =
tanttnt oidth ckvice
"vespo"
namg
2mea Dotut </4tle >
2 itle> Tag
4/head>
paise d tag
Zbody7 e. htm tuy
Llbody ex- meta

dese
Me Riak, meda, kez06d , deyeiptian

wi blan K"
Bd ’ main Contt shich Seen in ang atit
See voebsie in mobi mobhi phon me

Risht Cik on it cbsite puse


Teyminal chek

34 6 old vession
(ommncl Psompt iporj'g

\6.1.144
IRV4 Addxess : i42.
Ka vs Code Setting seasen

Seting Nehosk

Jet

Sushadins h Main deveieadinN


|n Seconcu

At +Shilet) seplide Line a


Ram

GRam

Aibt E Elemer enhante functinality <Jes (Metuse


not

leyl.
Lbody>
his(ss
gaoupig glyudto tag footk heudes
&
a}s1 sak Line zbn
fAns lcaption detai Employ captin7 <
cyz Caption
ty Captiny ad Also
Tava Sam
Sqm Tabs
lengn Designatiön
Fas Name
Cel^ &
jta7 Zam< =2"> pan Cols td Z
"234" haigth 236" id 2tr
CoY colurn mumy ColSpan’
how
fáhete
s pan Cols &
zb"oo
Spun
wdin attsin
te moge 2 cjkullety
ita Java Zta
Z1td>rarammer <ta
ses ima Shou tfuot>
<bod
>
Not" altA-pg" åsc=" <irmg adat
2tedy> 2/tbe
foldes oqn
2ta
2 LAthea
sett )
tlSnippin lorm tue chadu
in teble mako ’Help
to Table
inHTML bles List mags,
&
Parsph
Tas Krh Boo
Dyinition
Unordtad

Shutn

hTML
Dic, Squann
Cisce Pasble
Caupitl Romen no .
Ng1ld aloo possle dyut)
tut 16y Coscuny st Khet
bydyeua) Coutiy
Copitalath
SmyletteY
All websi w
SEOCuch Lod Londi t m i
Load at tot Sc

3(nportnt (ose wbita cue


cLS shift shald be minimun

(cntutue ayot Shep)


’ LCe
( Las gut Cottatuel faind Aer. Best co 2sr)
in Jgt
CAsst Inpt Dela) inpt Bhulestatpems
in TmL pug.
Lightheuk- Teil oht is impsovint pssible load
Qnazon
Rositra Tof ptto

Note
websk
meta deigion tog

Zmea name e deseian" Contint This is paca hich contun desiion

ogm - hele to submit impt rom client to Sesvt


Inguig Jotni, Cotac+ pego ,aoul fotms,fight - vailway tichet óTy
snput tay fotm 31g tT2 Tag 35T CK Aoate, name, Dhon no .

Code e Somjhn
e Sosm actisn "(ost CIform >
te backend
ehabel ot "namt" entts yous name <nabel > I/ to label ingpt tass

oe tpQusos autom
Entt otlacettdis
youheu
Lrlin
widtn
tomes tnat Conttt ang ushing
sdeet don't
on ont
ncessay: usidth
as much taru
adup ohy &nento
Ckments &1ock Talire
mango
"fouit
"> "6uit
> id ngme select 2
>fruit
La "fouit" fos 2\6bel
tf "3" "cls Comment " id
Comment " name 2textCa
sucti'se jood not Il 2bo
how (omment joun "Comment"> foi Qabel 2
+m tne accept Os
(ondi
hjo
"'Sutsibe" ciba"id -*Bubs "checRbox"
mena <inptty
Nchekbox di> 2
emle o Male O
only bcoz sane gendes
"gndts" ngme= formae tyadio :A " <ingut
Qase fayda assign m
"gendor> nam mole"t"dioh
" id inyt
Zdiy
6
25

div

Stan

TO &Ciesseserepe
10 ’ Atbtt, unisua idetiyes assigrud tocnsy ona HTmL
Samb h d t Clemert min Opu
Classes attbte, qit the sa me name to mt ple HTML met
Class
untquly id enti ctw
on i,

Yed-Tsh,t
cbody>
<div id "fiyst diy "
3 ciass ="Aed by yle
>First <jdiv>

TaAlS talp in linking ao wikipadia Serueh Codis ’ Ay Pase Ies, ’Rit clih

then los & Bto Pete io


ikrple seeh dlirery
tu tras Kk di'se te.

Au dior, Video,&media Elemt used in HTML


u vidt -cly
(ortlon ytdea oualgdviwe
Pittu in pittu
mdeÀ Akvibt los mte a vidko uie rayà a)

Cortos ag Postes

Audio audio Src " auttonan. m Contrs laudio >


Speilypat Ada adio
Redet
ma
Qutoplay atomadicd Rag
loop ’ Repeat to end

nendyut val
Downood entie udio
mjSac "ims bvg "a," nt founc"
oe not Jound e'sn
Searh sag;´ramspe
Cof
height nloo "

Hxcmes Help to embed ed othen cb3ite

heiyt aolue>

kqtine
nTML5wsims).

Non Sematie Tag SenentiCtag


cheades7
2spen
<div Zmainy
2div
Zartele st} ontain pieePosAg
< div kasdez

autthot
fotes elo

als ha

cliContet Ii
2[heodes 7
Ch Wnat ase SomentiTs dh

Cotac+
34 Jor >
Space &ampifosBe
&Coyi Jos

This is (a9

ina
o/r
This is ayteo Je

Capyight Co &nbsb &nbsb ; &nbse Code oitn hang

/f
CefysiyhtO
"So2r the VRL Lo
qatoS"
Qiotdtien text Satti

o/P ttatation
t o t , (avd tag nt ued ino WOdays
(ode
25
Fonta & olo in CSs
font Aex autan

add
CsSCsca ding St* Shat
<Stye tay ’
"Lnlne css g Adding Addingy <style
css us ing 3tye to 47T ML

SletoY -Use& to select (mosty cdibte


ue)
oHTML Qnout &\ying
Jor
Co lor : L\u

emS
d , span f
S«lecto% (ea 2 uZ

backyodtoloy:los. Ideclcuti on
<

LAn kCsS to HTm


am clso boss
.)Lnlia Css notgotpcchse Cbeoz hoed
indivduEr lent Pecee neA
jeh1le - " Colos :Dyll; bac kaßoud cdes dudi halo < |hi>
Cpisad (oda Size T)
3)E xtes ned css be
(ommet in CSs
SelectoS indeta
Element selectorr used to slect element based o the tajngmg h2
Pisud 3g N Apely oe not vt Coloy: bl,;
3
I4SletoY: usd

Coler'y hit;
backgd : black;
Class to sales Jeven class
slecos

Chilt
seletos
Fonts & slos in CSS
Code

9ed
div
baciy3ou nd Co los
Ihad >

I am
< Tam died>
zlbody>
</div
Chida lecto
<stle >

div 7R Note diect

bac ksoud. Colo bÑ oLon,

<lstle >

Ldiv > <p>


<p> T om a a insie diu </p>
Adi wuz

use descendaut slector


t

fadding o.

slecker
psaudo
in coloun
ohan visit chenge o r )
i c chu

tolori yilgw

a: Dink

ethtk
a:actiy
olor sed, Pott toury
bocaeto

a: hoveo S
Fonts Cslor in CSS

(12

Miyin ntu& bosdes masgin 0


I4iek mo tr
faddng
Conte nt
Border
CSus onds tn Paddiny
Code itha

Ae innesmst
Cempanent q th box notel
Centint
elawt
bosde 2 tor,
di out t
Sizig : botdor
t ocAu heNtt
Actual hizt spare
Notmaryin is
naoxeldir
<div claus = " box> I
let
otal Heiy) Meight Top laddig t Bosto mfaddiny t Topsevdst T am anthe boLlaiv Cas possib
Bottom Gosdis t tof Maqin t Botom ayin but nct it.

Conent t Bosder t faddig


use tis it
meurs R3 onl contut haiyt htif Botkes t addi (amputed
inld Lokti

Masgin in collops Sang


thsn thne maxi nnin tmain

at be cpplied ora Once


Box A wnheisst
Box A

mutgin 25 px,
ble,
border : 2px solid
height Box B
boxsizing: bosder box ;

heignt : KSe 2op;

SziS : tacle black,


2stgle fot boy font

Fent fumy'sego UI' , Tahe ,ene, Vogl a, Sus- deri,


italici
ttxt -&crox«dien ' undeslhing 'his
/ Wis is a pary«fh
Cofy hed teA
Seh (Text stk,
(oepins

fia fort siz


-font
32

->Line - hight:4

sfun

th2
Capitli; r tontinto tot Cae o/f alout fonts
FoNTs

decostin - cdo aqua

Fonts
clhe>
hz abot
45p ) Rignt y pastisnàe
’ text- inde nt

sed;
bosder 2px Slià o woY baeakseak
c;

tetoveolos ellipsis,

’ text - aisnCertor
font AI
Color s

Colos

(oleygb(76,125,11)
gt(76, 25,s4)
(alos

Coles:ba(ss, 2,S.b.x15 ) (,o,0) black


a sQBeyt chettintmity
l hoxColey

h2n
ba kg Toad colbs put

S Sheti

L Ligntmeis

Coles : o hll235,oe'?. ,Sor );


to an HTAL elennt
Dbala
9Srcilicity dettsmint which css sdocios has stfergst muth
tht at
3/Osigin'- Osder in shich (SS oposs & unere it (omes whther

Setity Asut stlshect


then it

Nte ine Sty& seltos most


ni Specidi men id wwer ayut
4 Sstleiset

Awibte slecter
4 Jnpostut

(olos sed , Eeet sdeo


<Istyle Styly overoite
3

data-n >"'a"> Ss
seiiut <{hL Colox ved inparo:
<pus" helloy
< hiclass"Cyelo PA
alos :ble

Sed folb
()
ixoQ (px) 146 on inch
stles

seudo bos tor


22%*
Seroll bn 1YJTi

Vw unit (vitw Post wnà ) Ths is bos


7did

(Top,ld)

) t x Rit

Heignt k ig Vn unit
mbas Bo'/: haight vitport

’Em unit Tohtit heke tna Pont size n a tha us Ka (tny quna
(atai

’ 6e nit 9oot lenent hu 3ina siza uske it


ntm htmd Reat
font size =16 px;
2
.CoutahmE
font siz 2rm,
achulsi
/24pxi
mobile
taignt
vhfos monitor
widtn

yhfot mdoile
Oine &Shadoa rc

min - heijt Bovhi

nt

inin
wocen t clà lock auaht to Co yd into inin
ikt displey -inlin;

ifindin earat
paddiy top S not deeept
bex
disply:inbn- blck;
Conv
a r it

fodolitg : 4Sfai by tr hl
not ilow
3 display:i i black;
2Isthe >
to we width
zbady
heele

<di cl -" box" >


heado
J am ls

2Ibo

visibilit : hidden C
Box llza

dsglay: fiex i -)

Justi cont nt i certer


(tnts
Qutline Shado in CS
Shude Visu shadoo n y se

eolor insat,
bon Shadowi h-o set v- yst blur sp(ad& eekiees 92)
posiion . (Shad ow Ba
n-)yt &v- cet dateythine horizental
shado
Vus harqy the vala, 4h HsieK tne )
Spacl shoihK he shado siz. (Sheude o Si za
Expand os
Cleg Dyine shadow celox

box bosder 2¢x soid black;


(addig : 34px;
buy shadew 5A 15 5 8d,

Style div) b shad


< div clea" bo" Gest

fos

aline: 2¢x solid ogtunj


Diffsone be Bosda & ine
kosd
Outline
don't taeeup
Positin sface; thgei
dsun asond the
elemet, otside geg
bosu
wict Uni moidtn Varsying idt
Masi souded cosren usiM bord-aqdiws

Cobnn
falas Bosdes
offset
9Outtin ; offst
Not pussilue
Suthe space bly
notti th edgx
bot, olen

isRet
List
display:9i tn;
Hom

elemostg
list- st- positi n inside; Lostst
3
bes

beoz 3431

Oveglo hando in (sS


box

heiya 4uh, 511e ui ortrt he zizo nt e16ol) Pr


(hlo
bosder : 2 soltd,
boy
’ whitt spate noutap

Lais)
text " ovltowi ellipsis,
ovesy\a i hidden se sSoll bus nahi
aye of overlow text
Jndividlly bhi Contrd no horizuthilos
ahi dikhge
Over low:n hiddern; issa psagkunaidy

ovesLow; hiddtn qutoj

fesitiar in CsS
top, botom, et, rint, z-irdu all tres an' b ont.

po sition alotin
ele met.s
Posiin botton 2s

(ositjon
afra neatt pusitron dhndg J Ki absolde o Posi tiod 22
Rihiotd

-bon3£
)

Mose about position - dogld

atonatla whan
Nste ba lgut posi hon tan olso fived
toron ,GMes, ptssqrie
Ptopeus
: teuae (o);
Invest (o ),
em,

Vnables in CSS
also
tomtilby chan asible hald psopetits
Clabl vagiube
baclatost Nee css
-Colos :

d pad);
padding: varl--
disglay fex,

Cmeans adn
About Contyit

culori vax-- (olos)


(- - Sec » ),;'

Coles Dotanyr il Locl,


< div clas nav" &
Shostut
uli*3

’ var(- -Colos, ed )
2di class Coutain'

1 Ato use in borde -Seecelos );


basdes 20x Solid varl -

Yot vdu Ihey dej ap : o-3,


wdsite din
opauts hro--dsop),'
Media
Style chan
ehang
(media sa

frint nesikem

in Caxyra

@media ony &soen and(mox- oi dth : 45 5%) {


b body'

Widtnheh
edia Ssun and ( oxietation, pottait)

Float & Cleod

Catds
Shostc botder: 2px solid
"Casds .Casd*3 dislay: fiao oc; ile ince Gataive a aulo dixhe to apna cotn
displa f1owiN
imng&

"Casd

Sroth 2|head>

< div class "cwtds"


"t,r

men t ZA) box


Sam Cleorsuse
<stle
"Casd thhA (3)

hes Jy to set ousllos in


Note
ing9 displey:(ls toc)
<leusa Net ust inuebsite ar undessdiny K g inp
id, lerbox or otvor uys
Mok about Seletors
- bo:is - chidE Cneung bon fisstchild no tub upe)

httliegber : fiest:lin
class nane

’.box :first -ettr £


fon,
<div cla oxes\ > (olos:

3117

Colos lo
coloy ble ae
3
Atbte sleckoy Ang attbto name

I data- Color = psimaty"Ji


backgrod coler i

-)atopins ls fossible q cdenet


P,a box, [ data colo6 primay"]
Psmy
Prrty T
’box :&nhild Ceven)
$ chilsà aa Aprbox bosei
Conte India is
fos odd ’ ode (omhy
Jso (tne , 2,s Donami San
mis
-box nh. Qast-chC1)£
ANtn
e::bckion

’placehelden ki psopesty chang Ihasn


infut pluehaldes {
Colos: bhee,

<inpd yr "4tat" plac


eibody ehotdesTypjour nam
Flex

Meslsx4
O olign- item. lentesi | Centes et air
fier- start )4Mer Shet

align-Cotentsraty
tof

basdie leebesn ie lbee (Stuct -os,


E
CGLdTspacear )
Concepts in Jlex
- en in leabon
an't som 1)t to Rignt th Qu in
fex diseeh ten ke
Kidnar Ko h.
(le die.
d deat Let to
Right hote h , bd oe Cn 'qsgin
4sing some propotis chng diy
flex -d i ;Colo um;
iem Vai t to btom na

botam

Rus
(soss at & to Main s.

Root Le moin axes Colugafiex


najn
ases

main anapr
42 cRott
just contt (entts mlam ma in axes

main axis & Koss axis7

>Main Sast

Mn
Csass

Main
Siz Ans

a
’Main end t

main S(22
Csoss
Stast
(soss

use S N Contt
vileo in mebils es aptof N

Note Trere is nt jstiy-iten in ler box &t's not used at all .

align
’flen-flos
gop- Piopest item
hoyizonto

ropodheS oaire ce iten siue?)


Nouspropti Ihems in Fley Jep: 30p
Rsopdies 3z
24em

Ro Colymy
oupsty
"odes -1
otdes:1;
otdes 2,
o des 3

2 main >

oder,1" "> </Ai>


clas

by dejelt

.itenis meuns 2item ar

Do uble

34imm r l t
C3item cAK}T)

ex -shiink poupestsito shsink nocessarg


flex- item
Abili
{lex-hin2;

olign poupst
- s item
ParticSn Ka
;
ign- d3:lex end

aling s : yes

You might also like