Css bangla-e-book-tutorial css3

wmGmGm (3) 8g Aa¨vq
1
cieZx© fvm©b : 2.0 [ Av‡iv wKQz †ewk ]
wmGmGm (3)
m¤cv`bvq
eyKwewW
www.bookbd.info

2
¯^Z¡ : †jLK
cÖKvkK : kixd nvmvb Zid`vi
Ávb‡Kvl cÖKvkbx
38/2K evsjvevRvi, XvKv-1100|
†dvb- 7118443, 8623251, 8112441
E-mail : gyankoshprokashoni@gmail.com
gk_tarafder@yahoo.com
cÖKvkKvj : †g 2013 Bs‡iwR
cÖ‪Q` : †gvt †gvRv‡¤§j ûmvBb (mRj)
†gKvc : wek¦wRr `vm
K‡¤úvR : KgwcDUvi wjU¨v‡iwm nvDm
gy`ªY : †bvfv †cÖm GÛ cvewj‡KkÝ
15/we, wgicyi †ivW XvKv-1205|
ÒAvgv‡`i cÖej B‛Qv _vKv m‡Ë¡I Avgiv eBwUi m¤cyb© Kwc Avc‡jvW
Ki‡Z cvijvg bv GRb¨ LyeB `ytwLZ | †Kbbv eBwU wcÖ›U Kwc evRv‡i
Av‡Q Avcbviv PvB‡j eBwU evsjv‡`‡ki †h †Kvb jvB‡eªwi †_‡K msMÖn
Ki‡Z cv‡ib| Ò

3
†dvb t 9667919
ISBN : 00
g~j¨ : UvKv gvÎ |

4
DrmM©
Av¤§y wg‡mm mvwdqv †eMg
AveŸy †gvt knx` Dj- ¨v cv‡Uvqvix
we‡kl K…ZÁZv
†mKv›`vi ev`kv
CEO, Bongo Communications
Founder, 9ledge.com

5
eBwU wjL‡Z mn‡hvMx wn‡m‡e KvR K‡i‡Qb
†gv: kwid †nv‡mb (wknve)
Senior Developer
South Asian ICT
mvjgvb Rybv‡q`
Senior Developer
South Asian ICT
Bgivb †nv‡mb
Senior Developer, Strategic consultant
South Asian ICT
Zvbfxi Bmjvg
Senior Developer
South Asian ICT

6
GB eBwUi mv‡_ wd« hv i‡q‡Q
wd« wmwW
1. eBwUi mv‡_ GKwU wd« wmwW Av‡Q|
2. eB‡q e¨eüZ mKj †KvWmg~n D³ wmwW‡Z †`qv Av‡Q|
3. eB‡q e¨eüZ mKj cÖ‡R±mg~n D³ wmwW‡Z †`qv Av‡Q|
4. GQvov wmGmGm GwWUi wn‡m‡e cÖ‡qvRbxq mdUIq¨vi I wewfbœ eªvDRvi Avcbviv wmwW‡Z
cv‡eb|

7
fzwgKv (Introduction)
Kw¤úDUvi eZ©gvb weÁv‡bi GK ¯^v_©K Ae`vb| AvR Avgiv GB Kw¤úDUvi Gi Kvi‡YB
bZzb GK hy‡M cÖ‡ek Ki‡Z m¶g n‡qwQ| hv wKbv AvR Z_¨ cÖhyw³i hyM bv‡g cwiwPwZ
†c‡q‡Q| GB Z_¨‡K KZ `ª Z Ges ¯^v_©Kfv‡e gvby‡li Kv‡Q †cu․Qv‡bv hvq, Zv wb‡q
GLb weÁv‡bi GZ Av‡qvRb| GiB avivevwnKZvq B›Uvi‡bU n‡‪Q weÁv‡bi GKwU mdj
cÖ‡qvM|
eZ©gv‡b Z_¨ Av`vb cÖ`vb Gi GKwU Ab¨Zg gva¨g n‡jv I‡qemvBU| AvR G GB
I‡qemvBU Gi gva¨‡g †hvMv‡hvM †_‡K ïi  K‡i cY¨ µq weµq Gi KvRwUI Kiv n‡q
_v‡K| Avi I‡qemvBU •Zwii Rb¨ ìKvi I‡qe wWRvB‡bi| I‡qe wWRvBbv‡ii g~j KvR
n‡‪Q †h †Kvb GKUv mvB‡Ui Rb¨ †Ug†c- U •Zwi Kiv, GLv‡b _vK‡ebv †Kvb A¨vwc- ‡Kkb|
†hgb jMBb wm‡÷g, wbDR‡jUvi, mvBbAvc, †cwR‡bkb, dvBj Avc‡jvW K‡i †WUv‡e‡R †mf
Kiv, B‡gR g¨vwbcy‡jkb, hw` mvB‡U weÁvcb _v‡K Zvn‡j cÖwZevi †cR †jvW nIqvi mgq
weÁvc‡bi cwieZ©b G¸wj A¨vwc- ‡Kkb, I‡qe A¨vwc- ‡Kkb BZ¨vw`| Gme •Zwi Ki‡Z n‡e
†cÖvM«vwgs fvlv Øviv| †h †Kvb ai‡bi A¨vwc- ‡Kkb Qvov GKUv mvBU •Zwi KivB nj I‡qe
wWRvBb gyjZ, GB ai‡bi wWRvBb‡K ejv nq ÷¨vwUK wWRvBb| GLb ch©š— GB avibv wb‡q
I‡qe wWRvBb eëüZ n‡q Avm‡Q|
Avi GB eBwU †jLv n‡q‡Q I‡qe wWRvBb Gi G‡Kev‡i cÖ_g †_‡K †kl ch©š— hZ cÖKvi
†m․›`h©ea©b Z_v wWRvBb Kiv hvq, Zvi Dci| eZ©vgv‡b me mvBU-B wWRvBb Kiv n‡q _v‡K
CSS Gi gva¨‡g| hvi d‡j AvR AwaKvsk mvBU Gi evwn¨K iƒc ev `„k¨gvb Ask (Outlook)
my›ì n‡q _v‡K| Avi ZvB‡Zv, GB eBwU‡Z CSS Gi cÖcvwU©, f¨vwjD, GBPwUGgGj G
wmGmGm Gi mv‡_ KvR Kivi cwi‡ek •Zwi Kiv †_‡K ïi  K‡i Gi wewfbœ bZzb wdPvimg~n
m¤ú‡K© we¯—vwiZ Av‡jvPbv Kiv n‡q‡Q|

8
†jL‡Ki K_v
gnvb Avj- vn ZvÕAvjvi A‡kl ïKwiqv, evsjv‡`‡k gvZ…fvlvq ÒwmGmGm GÛ wWfÓ eBwU
cvVK‡ì nv‡Z Zz‡j †èvi Rb¨| †`‡ki AMwYZ cvVK‡ì Pvwn`v Avi Aby‡ivaB Avgv‡K GB
eBwU †jLvi Aby‡cÖiYv hywM‡q‡Q|
w`b w`b cÖhyw³ GwM‡q P‡j‡Q| †mB mv‡_ cwiewZ©Z Gi Gi Kvh©µg I †K․k‡j|
cÖwZw`b-B wbZ¨bZzb myweav †hvM n‡‪Q| I‡qe †W‡fjc‡g›U Gi evRv‡iI †hvM n‡‪Q
bvbvb iKg my‡hvM myweav| ZvB mKj‡K GB cwieZ©bkxj evRvi, my‡hvM myweav I
Kjv‡K․kj m¤c‡K© AeMZ Kivi Avgvi GB cÖqvm|
eBwU‡Z CSS m¤ú‡K© we¯—vwiZ Av‡jvPbv Kivi cvkvcvwk †ckv`vix Kv‡Ri Dcvq Ges
†UKwbK¸‡jv eY©bv Kiv n‡q‡Q, hv GKRb bZzb wk¶v_x©i †ckv`vix g‡bvfve •Zwi‡Z e¨vcK
fzwgKv cvjb Ki‡e| eB‡qi cÖwZwU Aa¨v‡q cÖ‡Z¨K Dcv`vbmg~n D`vni‡Yi mvnv‡h¨ eySv‡bvi
†Póv Kiv n‡q‡Q| GQvovI GB eB‡qi †k‡l ev¯—egyLx wk¶vi Rb¨ K‡qKwU cÖ‡R± †Ìqv
n‡q‡Q| GB cÖ‡R±¸‡jv g~jZ ev¯—e KvR (Real Life Projects) m¤úwK©Z, †hLv‡b GKRb
I‡qe wWRvBbvi MÖvn‡Ki Pvwn`v c~i‡Y eªZ n‡Z cv‡ib|
Avkv KiwQ, GB eBwUi gva¨‡g I‡qe wWRvB‡bi GKRb bZzb wk¶v_©x †_‡K ïi  K‡i
cÖ‡dkbvj e¨w³e‡M©i Rb¨ Kv‡Ri mnvqK n‡e|
Avcbv‡ì mK‡ji Kg©Rxeb mdj I my›ì †nvK| GB Kvgbvq
†gvt wgRvbyi ingvb
infobook7@gmail.com
mmr.sinha@yahoo.com(facebook)
facebook.com/Ebookbd
facebook.com/mijanurrahmanbd

9
eB m¤c‡K© †h †Kvb ai‡bb Z_¨ I mgm¨vi Rb¨
†hvMv‡hvM Ki‚b :
01712901842 (Shihab)
Email: infobook7@gmail.com
www.bookbd.info
eyKwewW n‡‛Q evsjv‡`kx cÖ‡dkbvj evsjv eB mg~‡ni I‡qemvBU| †hLvb †_‡K Avcwb B-
eyK webv g~‡j¨ WvDb‡jvW Ki‡Z cvi‡eb| †h eB¸‡jv Avcbv‡K AvBwU AvDU‡mvwm©s-G
cÖ‡dkbvj K¨vwiqvi M‡o Zzj‡Z mvnvh¨ Ki‡e| G QvovI wb‡R wb‡R †Kvb cÖKvi †Uªwbs
QvovB †h †Kvb wel‡qi Dci cÖ‡dkbvj `¶Zv AR©b Ki‡Z cv‡ib GB eB¸‡jv c‡o| Avi
Avcbv‡`i †Kvb civgk© _vK‡j Aek¨B Avgv‡`i‡K Rvbv‡eb, GB wVKvbvq t-
infobook7@gmail.com.

10
mywPcÎ GK bR‡i
gwWDj-1
Aa¨vq 01: B›Uvi‡bU Ges I‡qe wWRvBb Gi cÖv_wgK avibv....................................................15
1.1 t B›Uvi‡bU Gi BwZnvm........................................................................................................16
1.2 t B›Ui‡bU Gi
ïi ..............................................................................................................16
1.3 t Iqv©ì IqvBW I‡qe-Gi BwZnvm..........................................................................................17
1.4 t wKfv‡e KvR K‡i ?...........................................................................................................17
1.5 t B›Uvi‡b‡Ui Browser ej‡Z wK eywS?....................................................................................17
1.6 t B›Uvi‡bU G A¨v‡W«mevi ev URL ej‡Z wK eywS? .....................................................................17
1.7 t I‡qe mvBU ev I‡qe †cR ej‡Z wK eywS?...............................................................................18
1.8 t I‡qe wWRvBb wK? ...........................................................................................................18
1.9 t I‡qe 2.0 wWRvBb wK?......................................................................................................18
Aa¨vq - 02 t CSS Gi cÖv_wgK avibv...................................................................................21
2.1 t CSS wK ?......................................................................................................................22
2.2 t †Kb CSS eënvi Ki‡ev ?.................................................................................................22
2.3 t CSS Gi DcKvwiZv.........................................................................................................22
2.4 t eZ©gvb cwiw¯ wZ...............................................................................................................23
Aa¨vq- 03 t DIVGi cÖv_wgK avibv.....................................................................................24
3.1 t DIV wK ?.......................................................................................................................25
3.2 t Div eënvi Kivi myweav.....................................................................................................25
3.3 t DIV I CSS Gi m¤úK©.....................................................................................................25
Aa¨vq-04 t HTML............................................................................................................26
4.1 t HTML wK ?..................................................................................................................27
4.2 t evRvi Pvwn`v...................................................................................................................27
4.3 t HTML Format............................................................................................................27
4.4 t HTML file •Zwi Kiv......................................................................................................28
4.5 t Adobe Dreamweaver CS6.........................................................................................30
4.6 t Web Browser.............................................................................................................38
Aa¨vq-05t wKQy AwZ cÖ‡qvRbxq HTML TAGS...................................................................44
5.1 t iPbv/wbeÜ (Article) †jLv................................................................................................45
5.2 t Qwe eënvi.....................................................................................................................46
5.3 t wfwWI, Mvb A_ev Ab¨ †h‡Kv‡bv dvBj eënvi........................................................................47

11
Aa¨vq- 06 t †ewmK wm Gm
Gm.............................................................................................49
6.1 t CSS wK .....................................................................................................................50
6.1.1 t Inline CSS ...............................................................................................................50
6.1.2 t Internal CSS.............................................................................................................50
6.1.3 t External CSS............................................................................................................52
gwWDj 2: CSS 1 Ges 2
Aa¨vq - 07 t Font Size......................................................................................................55
7.1 t Font size .....................................................................................................................56
7.2 t % w`‡q d›U mvBR †Ìqv...................................................................................................56
7.3 t Pt w`‡q d›U mvBR †Ìqv...................................................................................................58
7.4 t Em w`‡q d›U mvBR †Ìqv................................................................................................58
.
Aa¨vq - 08 t wewfbœ cÖKvi d›U e¨venvi Kiv..........................................................................61
8.1 t Font ............................................................................................................................62
8.2 t Font family Gi cÖKvi‡f`................................................................................................62
8.3 t Generic font family......................................................................................................63
8.4 t Font style Gi eënvi......................................................................................................65
8.5 t Font variant Gi eënvi...................................................................................................66
8.6 t Font Weight Gi eënvi .................................................................................................67
8.7 t @ font-face..................................................................................................................68
Aa¨vq-09 t Text Align......................................................................................................72
9.1 t Text-Alignment.........................................................................................................73
Aa¨vq-10 t txeT Decorations..........................................................................................79
10.1 t Text decoration........................................................................................................80
Aa¨vq-11 t Text Overflow................................................................................................84
11.1 t Clip ..........................................................................................................................85
11.2 t Ellipsis .....................................................................................................................86
Aa¨vq-12 t Color...............................................................................................................89
12.1 t color †cÖvcvwU© Gi KvR ..................................................................................................90
Aa¨vq -13 t Text Shadow.................................................................................................92
13.1 t Text-Shadow............................................................................................................93
Aa¨vq - 14 t Text transform............................................................................................95
14.1 t Text-Transform........................................................................................................96

12
Aa¨vq-15 t Background.................................................................................................100
15.1 t Background............................................................................................................101
15.2 t Background Color..................................................................................................101
Aa¨vq-16 t mI dnuorgkcaBage....................................................................................106
16.1 t e¨KMÖvD‡Û Qwe e¨envi...................................................................................................107
Aa¨vq-17 t dnuorgkcaB position..................................................................................109
17.1 t e¨vKMªvD‡Ûi Ae¯ vb wba©viY............................................................................................110
17.2 t background position: center center........................................................................110
17.3 t background position: center top.............................................................................111
17.4 t background position: center bottom.......................................................................112
17.5 t background position: right bottom.........................................................................113
17.6 t background position: right top...............................................................................114
17.7 t background position: right center..........................................................................115
17.8 t background position: left center.............................................................................116
17.9 t background position: left top..................................................................................117
17.10 t background position: left bottom.........................................................................118
17.11 t % / inch/pixel/em/e¨envi K‡i e¨KMÖvD‡Ûi Ae¯ vb wbY©q................................................119
.
Aa¨vq-18 t background repeat ....................................................................................122
18.1 t e¨vKMªvDÛ wiwcU wK?.....................................................................................................123
18.2 t background repeat: x .............................................................................................123
18.3 t background repeat: y..............................................................................................126
18.4 t background repeat: repeat......................................................................................127
18.5 t background repeat: no-repeat.................................................................................128
Aa¨vq-19 t Background Size..........................................................................................130
19.1 t e¨vKMÖvDÛ mvBR wK? ....................................................................................................131
19.2 t background-size: px w`‡q .......................................................................................131
19.3 t background-size: % / px w`‡q .................................................................................131
Aa¨vq-20 t List...............................................................................................................133
20.1 t wjó ÷vBj Gi cÖKvi‡f`| .............................................................................................134
20.2 t AbyµwgK ZvwjKvi msÁv I D`vnib|................................................................................134
20.3 t µgwenxb ZvwjKvi msÁv I D`vnib|................................................................................134
20.4 t list-style: ...............................................................................................................134
Aa¨vq-21 t wj¼.................................................................................................................144
21.1 t Link wK? ..................................................................................................................145
21.2 t a:link / a:visited / a:hover / a: active......................................................................145

13
Aa¨vq-22 t CSS Box Model ...........................................................................................153
22.1 t Box-Model Gi e¨vL¨v................................................................................................154
22.2 t Margin....................................................................................................................154
22.3 t Padding..................................................................................................................155
Aa¨vq-23 t Margin........................................................................................................156
23.1 t margin-top..............................................................................................................157
23.2t margin-right............................................................................................................158
23.3 t margin-bottom.......................................................................................................160
23.4 t margin-left.............................................................................................................161
23.5 t shorthand margin...................................................................................................162
Aa¨vq-24 t Padding.....................................................................................................164
24.1 t Padding Gi e¨envi....................................................................................................165
Aa¨vq- 25 t Border........................................................................................166
25.1 t None ev border-style: none.................................................................................168
25.2 t Dotted ev border-style: dotted.............................................................................170
25.3 t Hidden ev border-style: hidden...........................................................................171
25.4 t Dashed ev border-style: dashed .........................................................................172
25.5 t Solid ev border-style: solid ................................................................................172
25.6 t Double ev border-style: double...........................................................................175
25.7 t Groove ev border-style: groove ..........................................................................174
25.8 t Ridge ev border-style: ridge................................................................................175
25.9 t Inset ev border-style: inset .................................................................................176
25.10 t Outset ev border-style: outset .............................................................................178
25.11 t Inherit ev border-style: inherit.............................................................................179
25.12 t Shorthand Border...............................................................................................184
Aa¨vq-26 t Outline........................................................................................................187
26.1 t Outline wK? .............................................................................................................188
Aa¨vq-27 t Grouped Ges Nested Selectors................................................................189
27.1 t grouping and selector.............................................................................................190
Aa¨vq-28 t External Style Sheet...................................................................................194
28.1 t External style sheet wK ? .........................................................................................195
28.2 t External style sheet e¨envi Kivi wbqg.......................................................................195
Aa¨vq-29 t Id, Class I Comments..............................................................................197

14
29.1 t Id eënv‡ii wbqg .......................................................................................................198
29.2 t Class eënv‡ii wbqg...................................................................................................199
29.3 t Comments..............................................................................................................201
Aa¨vq-30 t Position........................................................................................................203
30.1 t position wK ? ...........................................................................................................204
30.2 t position:static ........................................................................................................204
30.3 t position:absolute....................................................................................................205
30.4 t position:fixed.........................................................................................................205
30.5 t position:relative.....................................................................................................205
Aa¨vq-31 t CSS Dimension...........................................................................................206
31.1 t Dimension wK ?.......................................................................................................207
31.2 t Dimension Property ..............................................................................................207
Aa¨vq-32 t Opacity.........................................................................................................213
32.1 t Opacity wK ? ...............................................................................................214
32.2 t Qwe‡Z Opacity eënvi Kiv...................................................................................214
32.3 t Opacity active by hover..................................................................................216
32.4 t opacity w`‡q †jLvi iO cwieZ©b.............................................................................219
32.5 t paragraph Gi e¨vKMÖvDÛ opacity........................................................................221
Aa¨vq-33 t Image Spirites..............................................................................................224
33.1 t Image Spirites m¤ú‡K© wKQz eY©bv................................................................................225
33.2 t Image Spirites eënv‡ii †K․kj.................................................................................226
33.3 t †nvfv‡ii mv‡_ Image Spirites eënvi..........................................................................226
gwWDj-3 SSC3
Aa¨vq-34 t Cross Browser Compatibility...................................................................234
34.1 t eªvDRvi Kgc¨vwUwewjwU wK ? .........................................................................................235
34.2 t †gvwRjv dvqvid·.......................................................................................................235
34.3 t ¸Mj †µvg I mvdvwi....................................................................................................235
34.4 t A‡civ......................................................................................................................235
34.5 t B›Uvi‡bU
G·‡c- vivi....................................................................................................236
Aa¨vq - 35 t CSS3 Borders I dnuorgkcaB................................................................238
35.1 t CSS3 G bZzb †hme border †cÖvcvwU© G‡m‡Q| ................................................................239
35.2 t Rounded Corners..................................................................................................239
35.3 t CSS Box Shadow..................................................................................................240

15
35.4 t Border Image........................................................................................................243
35.5 t Round property.....................................................................................................243
35.6 t Stretch...................................................................................................................243
35.7 t border-image.........................................................................................................243
Aa¨vq-36 t CSS3 Text Effects......................................................................................247
36.1 t Text-Shadow..........................................................................................................248
36.2 t Word-Wrap............................................................................................................249
Aa¨vq-37 t 2D and 3D..................................................................................................250
37.1 t Transform.............................................................................................................254
37.2 t rotate ().................................................................................................................254
37.3 t translate ().............................................................................................................256
37.4 t scale ()...................................................................................................................257
37.5 t skew ()..................................................................................................................258
37.6 t matrix().................................................................................................................260
37.7 t The rotateY() Method...........................................................................................263
37.8 t Transform Properties............................................................................................264
37.9 t 3D Transform Methods.........................................................................................265
Aa¨vq-38 t CSS3 Transitions........................................................................................267
38.1 t transition property..................................................................................................267
gwWDj-4 CSS Ges Div cÖ‡R±
cÖ‡R±-1 t Box Model......................................................................................................273
cÖ‡R±-2 t †Uwej (Table) ...................................................................................................274
cÖ‡R±-3 t Layout-1.........................................................................................................285
cÖ‡R±-4 t Layout-2 Adobe Dreamwaver CS6................................................................300
cÖ‡R±-5 t †bwf‡Mkb (Navigation)......................................................................................312
cÖ‡R±-6 t W«c WvDb †gby¨ ....................................................................................................325
cÖ‡R±-7 t †iwR‡÷«kb dg©.....................................................................................................332
cÖ‡R±-8 t B‡gR M¨vjvwi-1....................................................................................................342
cÖ‡R±-9 t B‡gR M¨vjvwi-2...................................................................................................345
cÖ‡R±-10 t wmGmGm-3 Box-Shadow...................................................................................385

16
Aa¨vq 01
B›Uvi‡bU Ges I‡qe wWRvBb Gi cÖv_wgK avibv
GB Aa¨vq †k‡l Avgiv Rvb‡Z cvi‡ev
1 B›Uvi‡bU Gi BwZnvm m¤ú©‡K
2 Iqv©ì IqvBW I‡qe-Gi BwZnvm m¤ú©‡K
3 B›Uvi‡b‡Ui Browser m¤ú©‡K avibv
4 B›Uvi‡bU G A¨v‡W«mevi ev URL m¤ú©‡K avibv
5 I‡qe mvBU ev I‡qe †cR m¤ú‡K© Rvbv
6 I‡qe wWRvBb wK, Zv m¤ú‡K© avibv
7 I‡qe 2.0 wWRvBb wK, Zv m¤ú‡K© avibv

17
1.1 t B›Uvi‡bU Gi BwZnvm
B›Uvi‡bU hv‡K ms‡¶‡c „`¨v †bU‟ wn‡m‡e WvKv nq| B›Uvi‡bU n‡jv Iqv©ì IqvBW wm‡÷g Ad Kw¤úDUvi
†bUIq©vK, †h †bUIqvK© e¨venvi K‡i GKRb eënviKvix Aci mshy³ eënviKvixi mv‡_ Z_¨ Av`vb cÖ`vb Ki‡Z
cv‡i| B›Uvi‡bU Avm‡j wek¦e¨vcx Qwo‡q _vKv me‡P‡q eo Kw¤úDUvi †bUIqvK©, †hwU‡Z Avgv‡ì Kw¤úDUviwU
mvavibZ hy³ n‡q fvPy©qvwj wKQy KvR Kivi AbygwZ cvq| Avi GKUz evwo‡q ej‡Z †M‡j ej‡Z nq †h, B›Uvi‡bU
n‡‪Q Kw¤úDUvi wbf©i •ewk¦K ZË¡ c×wZ| ci¯úi Gi mv‡_ m¤úK© hy³ A‡bK¸‡jv Kw¤úDUvi †Kw›`«K wbiwew‪Qbœ
†bUIqv‡K©i mgwóB n‡‪Q B›Uvi‡bU| cÖwZwU †bUIqv‡K©i mv‡_ kZ kZ A_ev nvRvi nvRvi Kw¤úDUvi hy³ _v‡K,
G¸‡jvi GKwU Ab¨wUi mv‡_ wewfbœ Z_¨ Av`vi cÖ`vb K‡i _v‡K| B›Uvi‡bU wek¦e¨vcx gvbyl‡K djcÖm~fv‡e Ges
m~j‡f G‡K A‡bï mv‡_ †hvMv‡hvM Ki‡Z m¶g K‡i‡Q| mbvZbx cÖPvi gva¨g mg~n †hgb †iwWI, †Uwjwfk‡bi
g‡ZvB B›Uvi‡b‡Ui †Kvb †K›`ªxf~Z mieivn c×wZ †bB| Zvi cwie‡Z© †h †Kvb e¨w³ hviv B›Uvi‡b‡U mshy³ Av‡Q
†m mivmwi Ab¨ †h †Kvb e¨vw³i mv‡_ †hvMv‡hvM i¶v Ki‡Z, A‡bï Rb¨ Z_¨ mieivn Ki‡Z, A‡bï †`qv Z_¨
msMÖn Ki‡Z A_ev Drcvw`Z cb¨mg~n Kg gy‡j¨ µq weµq Ki‡Z cv‡i| Z_¨ †LvuRvi Rb¨ †h cvZv Avgiv †`wL
†mwU n‡‪Q GKwU †cÖvMÖvg †hgb gvB‡µvmdU K‡c©v‡ik‡bi B›Uvi‡bU G·‡c- vivi, dvqvid·, A‡civ, ¸Mj †µvg
BZ¨vw` hv Kw¤úDUv‡ii Z_¨vwì c…ôv, wPÎ, †iLvwPÎ, kã Pjgvb Qwe I g‡Wjmg~n wfwRUi‡ì mvg‡b Dc¯ vcb
K‡i _v‡K|
1.2 t B›Ui‡bU Gi ïi“!
1969 mv‡j hy³ivóª miKvi GKwU Advanced Research Project Agency MVb K‡i †hwU cieZ©x‡Z
ARPANet wn‡m‡e cwiwPwZ cvq| GwUi D‡Ïk¨ wQj GKwU †bUIqvK© •Zwi Kiv hvi gva¨‡g GK BDwbf©vwmwUi
eënviKvixiv Ab¨ BDwbfv©wmwUi eënviKvix‡ì mv‡_ mshy³ n‡Z cv‡i| GB mgq GB †cÖv‡R‡±i gyj j¶¨ wQj
M‡elK‡ì g‡a¨ wbiwew‪Qbœ Z_¨ Av`vb cÖ`vb Kiv| cie©Zx mg‡q wKQz Kw¤úDUvi G·cvU©, BwÄwbqvi Ges
jvB‡eªwiqvbiv ARPANet Gi eënvi ïi  K‡i| †m mgq †bUIqvK© Gi gva¨‡g †hvMv‡hvM GZUv mnR wQ‡jv
bv|
cieZ©x‡Z 1972 mv‡j ARPANet Gi Rb¨ me©cÖ_g Ug wjbmb B-†gBj Avwe¯‥vi K‡ib Ges Hmgq cÖ_g
@ symbol e¨venvi Kiv nq|

18
wPÎ (1.1) : B›Uvi‡bU Kv‡bKkb cÖ‡mm
1.3 t Iqv©ì IqvBW I‡qe-Gi BwZnvm
Iqv©ì IqvBW I‡qe GKwU †M- vevj Bbdi‡gkb wgwWqvg hvi gva¨‡g B›Uvi‡bU eënviKvixiv wjL‡Z I co‡Z
cv‡i| A‡b‡K fyj K‡i www †K B›Uvi‡bU Gi cÖwZkã g‡b K‡i _v‡Kb| Avm‡j Wwe- D Wwe- D Wwe- D GKwU
mvwf©m †hwU Acv‡iU nq B›Uvi‡bU Gi gva¨‡g †hgb : B-†gBj| Wwe- D Wwe- D Wwe- D wi‡m©vm BDRvi †ì‡K
AbygwZ †`q GK wi‡mvm© †_‡K Ab¨ wi‡mvm© G †h‡Z| Iqvì© IqvBW I‡qe A¨vwc- ‡Kkb †hwU Iqvì© IqvBW I‡qe
eªvDRvi K¬v‡q›U bv‡g cwiwPZ| GB eªvDRvi dig¨v‡UW †U·U, B-g¨v‡Rm, mvDÛ Ab¨vb¨ Ae‡R± †hgb
nvBcviwjsK Kw¤úDUvi w¯…b G Dc¯ vcb K‡i| 1991 mv‡ji 6 AvM÷ Awdwmqvwj m¨vi wUg evb©vm©-wj Iqvì©
IqvBW I‡qe (www) †K cwiwPZ Kivb| GB †cÖv‡R± G Zvi j¶¨ wQj: “To allow links to be made to
any information anywhere”
1.4 t wKfv‡e KvR K‡i?
Avwg Avevi I ejwQ Iqvì© IqvBW I‡qe Ges B›Uvi‡bU GKB welq bv| B›Uvi‡bU n‡jv me¸‡jv Kw¤úDUv‡ii
†bUIqvK© Avi I‡qe n‡jv B›Uvi‡b‡U hy³ Kw¤úDUv‡ii GKwU mvwf©m| I‡q‡ei Z_¨¸‡jv wewfbœ cvZvq mwbœ‡ewkZ
AvKv‡i _v‡K Ges cÖwZwU Avjv`v cvZvq ev wjs‡K wef³ _v‡K| cÖwZwU wjsKB BDwbK nq| GB Z_¨mgyn I‡qe
mvf©v‡i msiw¶Z _v‡K| Avi †h me Kw¤úDUvi †_‡K Z_¨¸‡jv †`Lv nq Zv‡ì‡K e‡j I‡qe K¬v‡q›U|
I‡qe‡cR¸‡jv eªvDRv‡ii gva¨‡g cÖ`wk©Z nq| AvaywbK I‡q‡e †U·U, Qwe, Gwb‡gkb, AwWI, wfwWImn bvbvb
ai‡bi wgwWqv mw¤§wjZ AvKv‡i †`Lv hvq| †jL‡Ki †jLv GKwU eB i‡q‡Q hvi bvg ÔÔweMxwbs RygjvÓ| GB eB‡qi
g‡a¨ Avcwb wK K‡i †Kvb iKg †cÖvMÖvwgs Ávb QvovB GKwU WvBbvwgK I‡qe mvBU •Zwi Ki‡eb, Zv wkL‡Z
cvi‡eb|
1.5 t B›Uvi‡b‡Ui Browser ej‡Z wK eywS?
I‡qe e«vDRvi nj Kw¤úDUv‡ii GKwU †cÖvMÖvg, hvi gva¨‡g Avgiv B›Uvi‡bU G †Kvb I‡qe †cR wfwRU Ki‡Z
cvwi| GKwU ÒI‡qe eªvDRviÓ †K ïaygvÎ ÒeªvDRviÓI ejv n‡q _v‡K| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv
g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info|
Avcwb Kw¤úDUvi eënvi Kivi Rb¨ †h †Kvb DB‡ÛvRB eënvi K‡ib bv †Kb (windows xp,windows
vista,windows 7) me DB‡Ûv‡RB GKwU Browser wWdë fv‡e BÝUj Kiv _v‡K, Zvi bvg n‡jv Internet
explorer,GLv‡b Internet Explorer n‡jv GKwU eªvDRvi, hvi gva¨‡g Avcwb †Kvb I‡qe‡cR wfwRU Ki‡Z
cv‡ib| evRv‡i A‡bK ai‡Yi eªvDRvi cvIqv hvq| Kg †ewk me eªvDRvi GKB iKg myweav cÖ`vb K‡i _v‡K| Z‡e
I‡qe eªvDRv‡ii eZ©gvb evRvi nv‡Z‡Mvbv K‡qKwUi `L‡j i‡q‡Q| Avi Avgiv memgq GB KqwU‡KB cÖvavb¨ w`‡q
KvR Kie| G¸‡jv njt Internet Explorer (†hwU Avcwb Kw¤úDUvi Gi mv‡_ Ggwb‡ZB cv‡eb), Mozilla
Firefox, Google Chrome, Opera, Safari BZ¨vw`|
1.6 t B›Uvi‡bU G A¨v‡W«mevi ev URL ej‡Z wK eywS?
A¨v‡W«mevi nj I‡qe eªvDRv‡ii Dc‡ii As‡k _vKv GKwU †U·U †jLvi RvqMv, †hLv‡b eZ©gvb I‡qe †c‡Ri
BDAviGj (URL) cÖ`wk©Z nq,Avi URL nj A¨v‡W«mev‡ii wfZi †h †jLv ¸‡jv _v‡K Zv‡K URL ejv nq|
A¨v‡W«mev‡i BDRvi g¨vbyq¨vwj BDAviGj emv‡Z cv‡ib| hLb Avgiv bZyb I‡qe‡cR G cÖ‡ek Kwi ZLb
A¨v‡W«mev‡ii BDAviGjwU ¯^qswµqfv‡e cwiewZ©Z nq| †Kvb GKwU I‡qe‡c‡Ri BDAviGj †`Lvi Rb¨

19
A¨v‡W«mev‡i j¶¨ Kiv nq| hw` BDRvi †Kvb wbw`©ó I‡qemvBU ev I‡qe‡cR wfwRU Ki‡Z Pvq Zvn‡j
A¨v‡W«mev‡i I‡qe A¨v‡W«mwU (URL) ewm‡q G›Uvi Pvc w`‡j eªvDRv‡i I‡qe‡cRwU Lyj‡e|
1.7 t I‡qe mvBU ev I‡qe †cR ej‡Z wK eywS?
I‡qe †cR Avi I‡qe mvBU GK K_v bq| †hgb- www.metanvir.weebly.com GKwU I‡qe mvBU| wKš‧
GB I‡qe mvBUwU A‡bK¸‡jv I‡qe †cRGi mgš^‡q •Zwi n‡q‡Q| I‡qe mvBU nj ¯^Zš¿ HTML WKy‡g›U| I‡qe
mvBU nj A‡bK¸‡jv I‡qe †c‡Ri mgvnvi|
Avi B›Uvi‡b‡U I‡qemvBUB nj cÖvb †K›`ª| GLv‡bB mKj Z_¨ Rgv _v‡K| d‡j B›Uvi‡bU eënviKvix cÖ‡qvRbxq
dvBj, Z_¨ msMÖn Ges Av`vb cÖ`vb Ki‡Z cv‡i| Zvn‡j hv eySjvg Zv n‡jv, I‡qe mvBU n‡‪Q †Kvb GK mvBU
Gi bvg Avi I‡qe‡cR nj H mvBU Gi wfZi †h †cR ¸‡jv Av‡Q †m¸‡jv|
1.8 t I‡qe wWRvBb wK?
GB †jLv g~jZ Zv‡ì Rb¨ hviv I‡qe wWRvBwbs wkL‡Z Pvb ev I‡qe †W‡fjcvi n‡Z Pvb t I‡qe wWRvBb n‡‪Q
GKwU I‡qemvB‡Ui Rb¨ evwn‡ii KvVv‡gv •Zwi Kiv|
I‡qe wWRvBbv‡ii g~j KvR n‡‪Q †h, †Kvb GKwU mvB‡Ui Rb¨ †Ug‡c- U •Zwi Kiv,GLv‡b _vK‡ebv †Kvb
A¨vwc- ‡Kkb| †hgb jMBb wm‡÷g, wbDR‡jUvi, mvBbAvc, †cwR‡bkb, dvBj Avc‡jvW K‡i †WUv‡e‡R †mf
Kiv, B‡gR g¨vwbcy‡jkb, hw` mvB‡U weÁvcb _v‡K Zvn‡j cÖwZevi †cR †jvW nIqvi mgq weÁvc‡bi cwieZ©b
G¸wj A¨vwc- ‡Kkb, I‡qe A¨vwc- ‡Kkb BZ¨vw`| Gme •Zwi Ki‡Z n‡e †cÖvMÖvwgs fvlv Øviv| †h †Kvb ai‡bi
A¨vwc- ‡Kkb Qvov GKwU mvBU •Zwi KivB nj I‡qe wWRvBb| g~jZ, GB ai‡bi wWRvBb‡K ejv nq ÷¨vwUK
wWRvBb| GLb ch©š— GB avibv wb‡q I‡qe wWRvBb eëüZ n‡q Avm‡Q| I‡qe wWRvBb wkL‡Z ‡hme Rvb‡Z
n‡e t
GBPwUGgGj : GwU GKwU gvK© Avc j¨vs¸‡qR| GwU †Kvb †cÖvMÖvwgs j¨vs¸‡qR bq, †kLv Lye mnR|
wmGmGm : GwUI gvK© Avc j¨vs¸‡qR|
d‡Uvkc : GLv‡b †h gyj KvRwU wkL‡Z n‡e Zv n‡jv wcGmwW †_‡K GBPwUGgGj †U¤c‡jU (PSD to HTML)
evbv‡bv| GQvov e¨vbvi, evUb, Gwb‡gkb •Zwi Kiv Gme Rvb‡Z n‡e|
1.9 t I‡qe 2.0 wWRvBb wK ?
Avgv‡ì g‡a¨ A‡b‡KB Rvwb Avevi GL‡bv A‡b‡KB Rvwb bv I‡qe 2.0 wWRvBb m¤ú‡K©| Avm‡j welqwU wK?
I‡qe 2.0 wWRvBb ej‡Z mvavib †Kvb wWRvBb‡K eySvq bv| I‡qe 2.0 wWRvBb GZUvB cÖk¯  GKwU welq †h,
Kvh©Z G‡K ¸wQ‡q ev GK K_v e‡j †kl Kiv hv‡e bv| †Zv Pjyb, I‡qe 2.0 wWRvBb ej‡Z Avgiv wK wK wel‡qi
cÖwZ j¶ w`‡ev, Zvi Rb¨ GKUy we¯—vwiZ Av‡jvPbvq Avmv hvK:
1. gvb m¤úbœ wWRvBb: I‡qe Ges wcÖ›U wgwWqv‡Z wjLv I wWRvB‡bi ¯‥xb †iRy‡jkb n‡e cÖk¯ |
2. mvavib •emv`…k¨: I‡qe 2.0 wWRvBb n‡e mvavib •ewkó¨ gv‡bi Ges †hb †Kvb wKQyi cÖebZv †eva cÖKvk
Ki‡e| G‡¶‡Î j¶bxq †h, †ewki fvM I‡qi 2.0 gv‡bi wWRvB‡b mv`v is Gi eënvi cvIqv hvq|
3. AvKl©bxq †bwf‡Mkb: kw³kvjx I AvKl©bxq †bwf‡Mkb Ges cvVK gv‡bv‡hvM AvKl©b •Zwi Kivi gvb‡l fy‡jI
A‡bï wWRvBb Kwc-†có Ki‡eb bv| G‡Z Avcbvi mvBU ev wWRvB‡b wei c cÖwZwµqv ci‡e| Zvi †P‡q eis
mv`vgvUv †bwf‡Mkb eënvi Ki‡jB fvj †`Lv‡e| g‡b Kwi, GKwU mvB‡Ui †bwf‡Mk‡b 3wU U¨ve Av‡Q, cÖ‡Z¨KwU
mvB‡Ui ¸i Z¡c~Y© wefvM avib Ki‡Q, †hLv‡b Avcbwb wK¬K Ki‡jB wefv‡Mi me †cvó ev wWRvBb †`L‡Z

20
cvi‡eb| Avevi †`Lyb, GKwU mvB‡Ui mvBWev‡i 20Uv wewfbœ wefv‡Mi wjsK Av‡Q, †bwf‡Mkb ev‡`B| GLb
wm×vš— wbb, †KvbwU Avcbvi Rb¨ DËg Ges mn‡R eënve Dc‡hvMx ? hw` Avcwb Avcbvi mvB‡Ui wWRvBb-†K
G‡jv‡g‡jv wjsK †`Lv‡bvi †_‡K †bwf‡Mkb w`‡qB `…wó‡MvPi Ki‡Z cv‡ib, Zvn‡j GwUB n‡e mv_K©
avibv/Kg©KvÛ|
4. AvKl©bxq †jv‡Mv: “Branding Is Everything” B›Uvi‡bU RM‡Z GB K_vwU 100% mZ¨| Avcbvi mvBUwU
hw` cÖ_g †`Lv‡ZB wfwRUi‡K AvKl©b Kiv‡Z bv cv‡i, Z‡e wØZxqevi †m Avi Avcbvi mvB‡U Avm‡e bv| G‡¶‡Î
ïay wWRvBb bv, Avcbvi mvB‡Ui K‡›U›UI wekvj fywgKv iv‡L| ZvB, GKwU BDwbK eªvÛ bvg, †jv‡Mv me‡P‡q
¸i Z¡c~Y©| D`vnib ¯îƒc Mashable (http://mashable.com)| j¶¨ Ki b Zv‡ì †jv‡Mv Ges
†bwf‡Mkb|
5. AvKl©bxq †nvg‡cR: Avgiv Rvwb Apple memgq Zvi †µZv ev wfwRUi‡ì g‡bv‡hvM AvKl©‡bi Rb¨ Zv‡ì
†nvg‡c‡R AvK©lbxq me wWRvBb-Gi cÖvPyh©¨ iv‡L| hv wKbv I‡qe 2.0 wWRvBb mvB‡Ui eo D`vnib|
6. MÖvwW‡q›U, d¬vU Kvjvi: wKQy wKQy I‡qe 2.0 mvBU d¬vU Kvjvi eënvi K‡i| Avevi A‡b‡KB AwZwi³ cwigv‡Y
MÖvwW‡q›U Kvjvi eënvi K‡i| GB Kvjvi ¸‡jvi AwZwi³ eënvi hwÌ mvB‡Ui AvDUjyK‡K KjywlZ K‡i| Z‡e
hw` cwigvbgZ eënvi Kiv nq, ZLb †`L‡Z fvj jv‡M|
7. AvBKb: I‡qe 2.0 Gi me‡P‡q eo •ewkó¨ n‡‪Q AvBKb Gi eënvi| cÖwZwU wWRvBb Gi mv‡_ mv‡_ wgj
†i‡L AvBK‡bi eënvi Kivi Aa¨vqUv I‡qe 2.0 †_‡KB ïi  n‡q‡Q| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo
†bqv †_‡K ïi  K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L wb‡Z
cv‡ib|
cÖkœce© t
Avcbviv †R‡b Lywk n‡eb †h, Avcbv‡ì‡K mn‡hvwMZv Kivi Rb¨ Avgiv •Zwi K‡iwQ Book Support center|
Avi GB Book Support center-Gi B-†gBj A¨v‡Wªm n‡jv infobook7@gmail.com, hv Avcbv‡ì mKj
mgm¨vi mgvavb Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †Ìqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡ì hw`
GB eB‡q †Kvb wKQz eyS‡Z mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Ki b GB wVKvbvq
infobook7@gmail.com.

22
Aa¨vq 02
CSS Gi cÖv_wgK avibv
1 CSS Gi cÖv_wgK avibv
2 †Kb CSS e¨envi Kie
3 CSS e¨env‡ii DcKvixZv
4 eZ©gvb evRv‡i CSS Gi ¸i Z¡

23
2.1 CSS wK ?
cÖ_gZ CSS †m․›`h© ev ÷vBwjs Kivi Kv‡R eënvi Kiv nq| Gi m¤ú~Y© i c n‡‪Q Cascading Style Sheet
A_©vr †hB dvBj Gi g‡a¨ Avgv‡ì HTML dvBj Gi †m․›`h©ea©b Gi KvR Kie|
Avm‡j CSS Qvov HTML e…_v| D`vniY wn‡m‡e ejv hvq, GKRb `wR© hLb Kvco Kv‡Ub kvU© evbv‡bvi Rb¨,
ZLb Zv †KejgvÎ wKQy Kvc‡oi UyKiv wn‡m‡eB _v‡K; GwU ZLwb GKwU cwic~Y© kvU© nq, hLb me¸‡jv UyK‡iv
GKmv‡_ K‡i †mjvB Kiv nq| mnR I ¯^í mg‡q †cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU
†`‡L wb‡Z cv‡ib|
GLv‡b, HTML ev DIV n‡‪Q †mB Kvc‡oi UyK‡iv| G¸‡jv‡K myweb¨¯— I my›ì (In Right Order With
Proper Styling) fv‡e Dc¯ vcb K‡i CSS| †mjvB wenxb Kvc‡oi UyK‡iv‡K †hgb fvj †`Lv‡e bv, wVK †Zgwb
CSS Qvov Avcbvi HTML cwic~Y©Zv cv‡e bv|
c…w_exi cÖ‡Z¨KwU mvBU CSS eënvi K‡i| GKRb I‡qe †W‡fjcv‡ii me©cÖ_g wk¶Yxq welq-B n‡‪Q HTML I
CSS| Kvib GwU G‡Kev‡i mvavib GKwU Pvwn`v (Basic or Mandatory Requirement) ZvB CSS Aek¨B
Rvb‡Z n‡e| GwU Qvov eZ©gv‡b c…w_ex‡Z †Kvb mvBU Kiv nq bv| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨
WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info|
2.2 †Kb CSS eënvi Kie ?
Dc‡ii Av‡jvPbv †_‡K Avgiv †gvUvgywU eyS‡Z cviwQ †h CSS Qvov KvR †Kvb fv‡eB Pj‡e bv| Zvici I wb‡Pi
D`vniYwU †`L‡jB Avcbviv eyS‡Z cvi‡eb CSS Qvov mvBU †`L‡Z †Kgb nq, Avi CSS _vK‡j †`L‡Z †Kgb
nq|
2.3 CSS Gi DcKvwiZv t
Avm‡j CSS Gi DcKvwiZv e‡j †evSv‡bv m¤¢e bq| Kvib Avgv‡ì HTML Gi †jLvi AvKvi †_‡K ïi  K‡i
†jLvi iO, d›U, Qwei AvKvi, Qwei ÷vBj, wewfbœ cÖKvi †gby •Zwi, wj÷ •Zwi, wj÷ ¸‡jv †`L‡Z †Kgb n‡e,
wj¼¸‡jv †`L‡Z ‡Kgb n‡e BZ¨vw` mKj cÖKvi KvRB wbf©i Ki‡e CSS Gi Dci| GB fvlv-B n‡e gyjZt
Avgv‡ì DIV Ges CSS †kLvi wfwË| CSS Qvov Avgv‡ì DIV ¸‡jv wVKgZ KvR Ki‡Z cvi‡e bv| Kvib
DIV Gi AvKvi, ÷vBj, iO, ¯ vb wba©viY BZ¨vw` me-B Ki‡Z n‡e CSS w`‡q|
CSS Qvov mvBU CSS mn H GKB mvBU

24
Avi Avcwb memgq mevi mv‡_ Zvj wgwj‡q †Zv KvR Ki‡eb-B, cvi‡j †Póv Ki‡eb mevi †_‡K GwM‡q _vKvi|
Avi GwM‡q _vK‡Z n‡j wb‡R‡K memgq Avc‡W‡UW ivL‡Z n‡e| Avi †mRb¨B Avcbvi A¨vWfvÝW CSS
wkL‡ZB n‡e Ges eënvi Ki‡Z n‡e| Avcwb hZ †ewk A¨vWfvÝW †j‡f‡ji KvR Rvb‡eb Ges eënvi Ki‡eb,
Avcbvi KvR ZZ my›ì n‡e Ges Zvi mv‡_ mv‡_ cÖ‡dkbvj jyKI Avm‡e|
2.4 eZ©gvb cwiw¯’wZt
eZ©gv‡b †hme mvBU Pvjy Ae¯ vq Av‡Q, GLbI Zvi †ewki fvMB Pj‡Q CSS2 w`‡q| Lye Kg mvBUB CSS3
eënvi Ki‡Q| GLb CSS3 †Z A‡bK †ewk myweav i‡q‡Q| hv Av‡M A‡bK Sv‡gjv wQj Zv GLb gvÎ GK jvBb
Gi †KvW wjL‡jB my›ìfv‡e n‡q hvq| ZvB †ewki fvM mvBU-B wb‡R‡ì‡K †cR¸‡jv‡Z CSS3 (UPGRADE)
eënvi ïi  K‡i‡Q| ZvB GLbB m‡e©vrK…ó mgq Advanced CSS †kLvi|
Avgv‡ì GB eB‡Z Avcwb me nvjbvMv` Z_¨ cv‡eb| ZvB GB eBwU Avcbv‡K Aek¨B me‡P‡q fvj my‡hvM
w`‡‪Q| Avcwb hw` Lye fvjfv‡e GB eB‡q eY©bv Kiv Terems ¸‡jv iß Ki‡Z cv‡ib, Z‡e GB bZyb
Upgrading gv‡K©U Gi KvR¸‡jv Lye mn‡RB ai‡Z cvi‡eb|

25
Aa¨vq 03
DIVGi cÖv_wgK avibv
1 DIV wK?
2 DIV e¨env‡ii myweav wK ?
3 DIV I CSS Gi m¤úK© wK ?

26
3.1 DIV wK ?
Div Gi m¤ú~Y© i c n‡‪Q Division ev fvM| A_©vr Avgiv †h †cR wb‡q KvR Kie, Zv‡K †QvU †QvU fv‡M †f‡½
wb‡q KvR Kie| D`vniY wn‡m‡e ejv hvq †hgb ai b Avgiv †h‡Kv‡bv GKwU i g‡K mvRve| Avcwb wbðqB
PvB‡eb †h‡Kv‡bv GKcvk †_‡K ïi  Ki‡Zt Div Avcbv‡K wVK †mB myweavUvB w`‡e|
GwU‡K PvB‡j Avcwb GKwU A‡bK eo d¬¨vU Gi GKwU i g Gi mv‡_I Zyjbv Ki‡Z cv‡ib| Z‡e GLv‡b Avcbvi
†Kvb evaëvaKZv †bB| GB i g ¸‡jvi •`N¨©/cÖ¯ I Avcwb wVK K‡i †`‡eb Ges G¸‡jvi †KvbUv d¬¨v‡Ui
†Kvbw`‡K _vK‡e, ZvI Avcwb wVK K‡i †`‡eb|
3.2 Div eënvi Kivi myweav
HTML markup Gi †¶‡Î Div n‡‪Q GKwU hyMvš—Kvix Dcv`vb| Gi d‡j Avgv‡ì Kv‡Ri KZ †h myweav
n‡q‡Q, Zv e‡j †evSv‡bv m¤¢e bq| e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨
†jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|
DIV †K GK wn‡m‡e I‡qe Gi cÖvY ejv hvq| KviY GLb DIV Qvov HTML G †Kvb KvR nq bv| Av‡M GB
U¨vMwU bv _vKvq TABLE w`‡q KvR Ki‡Z nZ| Avi TABLE U¨vMwU m¤ú~Y© ‡cR G eënvi Ki‡Z nZ| †Kvb
wbw`©ó GKwU GjvKvq KvR Kiv ‡hZ bv| m¤ú~Y© †cRwU‡K ROW Ges COLLUMN w`‡q fvM K‡i KvR Ki‡Z
nZ| Avi G¸‡jvi AvKvi wVK ivLv wQj AviI `yi n KvR| wKfv‡e Avcwb GKwU I‡qemvBU‡K Lye mn‡R mvP©
BwÄb ev mvP© †iRvë Gi kx‡l© wb‡q Avm‡eb Ges mK‡ji wbKU Avcbvi mvBUwU‡K wKfv‡e cwiwPZ K‡i Zzj‡eb
Zv ÔÔmvP© BwÄb AcwUgvB‡RkbÓ eBwU †_‡K Rvb‡Z cvi‡eb|
wKš‧ GLb DIV _vKv‡Z Avgv‡ì Avi †mme Sv‡gjv †cvnv‡Z n‡e bv| GLb Avgiv DIV ¸‡jv‡K ‡hLv‡b PvB
†mLv‡b †`Lv‡Z cvie, †h‡Kv‡bv AvKvi w`‡Z cvie| evwK AviI hv hv myweav Av‡Q, Zv †Zv Avgiv mvg‡bi
Aa¨vq¸‡jv‡Z †`L‡ZB cve|
3.3 DIV I CSS Gi m¤úK©
Avwg hw` ewj cvwbi mv‡_ Avgv‡ì Rxe‡bi wK m¤úK© ? Avcbviv Aek¨B ej‡eb cvwb Avgv‡ì Rxeb| wVK
†Zgwb DIV Gi Rxeb n‡‪Q CSS| GB CSS webv DIV n‡‪Q cÖvYnxb GjvKv| CSS Qvov DIV eënvi Kiv
Avi bv Kiv mgvb K_v| Kvib DIV Gi •`N¨©-cÖ¯  †_‡K ïi  K‡i, Gi iO, †jLvi iO, †Kv_vq Ae¯ vb Ki‡e,
Kvi cv‡k _vK‡e, Ab¨ †Kvb ÷vBj n‡e wKbv BZ¨vw` meB e‡j w`‡Z n‡e CSS w`‡q|
Zvn‡j GLb wbðqB eyS‡Z cvi‡Qb DIV Gi mv‡_ CSS KZ Ri wi|

27
Aa¨vq 04
HTML
4.1 HTML wK ?
1 HTML wK
2 HTML 5 Gi evRvi Pvwn`v
3 HTML dig¨vU
4 HTML dvBj •Zwi Kiv

28
HTML Gi m¤úyY© iƒc n‡‪Q Hyper Text Markup Language. cÖZ¨KwU †cÖvMÖvg ev mdUIq¨vi †jLvi
Avjv`v Avjv`v fvlv i‡q‡Q| wVK †Zgwb I‡qe Gi me‡P‡q cwiwPZ GKwU fvlv n‡‪Q HTML. GB fvlv eënvi
K‡iB Avgiv Avgv‡ì mKj KvR m¤úbœ Kie|
mKj †cÖvMÖv‡gB GKwU wbw`©ó wbqg ev µgvbymv‡i wjL‡Z nq| wKš‧ GB Hyper Gi †¶‡Î †Kvb cÖKvi µg ev
Serial eRvq bv ivL‡jI mgm¨v nq bv| ZvB GwU Avgv‡ì Rb¨ †ewk myweavRbK| AvBwU wi‡j‡UW wewfbœ B-eyK
mg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info|
4.2 evRvi Pvwn`v
†h‡nZy HTML GKwU Basic markup language ev mvavib mbv³Kib/wPwýZKib fvlv, ZvB Ab¨ †h‡Kv‡bv
cÖKvi I‡qe mswk- ó fvlv (†hgbt CSS, php BZ¨vw`) †kLvi Av‡M Avcbv‡K Aek¨B HTML Rvb‡Z n‡e|
Avi ZvB HTML †kLvi ¸i Z¡ e¨vcK| cÖwZw`b, cÖwZ NÈvq GgbwK cÖwZ wgwb‡U wewfbœ d«xj¨vwÝs mvB‡U (†hgbt
http://www.freelancer.com BZ¨vw`) nvRvi nvRvi Kv‡Ri AW©vi †cv÷ n‡‪Q| Avcwb hw` wVKVvK fv‡e ïay
HTML Ges CSS Gi KvR wkL‡Z cv‡ib, Z‡e Avcwb mn‡RB †h‡Kv‡bv d«xj¨vwÝs mvB‡U KvR Ki‡Z cv‡ib| G
ai‡bi Db¥y³ evRv‡ii me‡P‡q eo myweav n‡‪Q Avcwb Avcbvi myweav g‡Zv KvR Ki‡Z cvi‡eb Ges Avcbvi
Kv‡Ri Dchy³ `vg Ges ¯^xK…wZ (Reasonable price and Recognition) cv‡eb|
GQvov Avcwb PvB‡j Avgv‡ì †`‡ki wewfbœ ¯^bvgab¨ AvBwU †Kv¤úvwb ¸‡jv‡ZI A‡bK fvj m¤§vwb‡Z KvR Ki‡Z
cvi‡eb|
Avi wb‡Ri GKwU AvBwU dvg© †Lvjvi my‡hvM †Zv i‡q‡QB|
4.3 HTML Format:
†h‡nZy Avgiv HTML file •Zwi Kie, ZvB dvBj Gi ïi ‡Z Aek¨B HTML wjL‡Z n‡e| Avi memgq g‡b
ivL‡Z n‡e †h, †hB tag ïi  Kie, Zv Aek¨B †kl Ki‡Z n‡e| A_©vr, ïay <HTML> w`‡q ïi  Ki‡jB n‡e
bv; G‡K </HTML> wj‡L †kl n‡q‡Q †evSv‡Z n‡e| Kvib Kw¤úDUvi‡K memgq e‡j w`‡Z n‡e †h, †Kvb KvR
†Kv_vq ïi  n‡q‡Q Ges †kl n‡q‡Q| bZyev †m eyS‡Z cvi‡e bv| Avi GRb¨B cÖwZwU U¨vM †Rvov wn‡m‡e wjL‡Z
n‡e|
<tag> ….. </tag>
†hgbt Avgiv †Kvb †jLv‡K Bold (Mvp/†gvUv) K‡i †`Lv‡Z PvB‡j hZUyKy †jLv‡K Bold Ki‡Z PvB, Zv ej‡Z
n‡j, †hLvb †_‡K †jLv Bold nIqv ïi  n‡e †mLv‡b wjL‡Z n‡e <b> Ges †hLv‡b †kl n‡e, †mLv‡b wjL‡Z
n‡e </b>. †evSvi myweavi Rb¨ Avgiv wb‡Pi D`vniYwU †`wL|
My name is <b>Tanvir Ahmed</b>
†`Lyb, Avgiv hZUyKy †jLv‡K Bold Ki‡Z †P‡qwQ, ZZZyKy †jLv‡K <b>…</b> U¨vM Gi †fZi †i‡LwQ| Zvn‡j
Gevi Avgiv cwic~Y© HTML dvBj Gi dig¨vUwU †`wL|
*GLv‡b wKQy e¨vwZµgI i‡q‡Q| </br> , <img../>,
<link…> P BZ¨vw` †Rvov wn‡m‡e wjL‡Z nq bv|

29
1| GLv‡b Avgiv †`L‡Z cvw‪Q †h WKy‡g›U UvBc ejv n‡q‡Q|
2| GLv‡b dvBj Gi UvBc ejv n‡q‡Q|
3| GB U¨vM Gi g‡a¨ Avgiv ÷vBj wjLe, CSS link Kie, SEO Kivi Rb¨ Ges Redirect Kivi Rb¨
<meta> Ges Javascript link Kie|
4| GB U¨vM Gi g‡a¨ Avgiv Avgv‡`i Div U¨vM¸‡jv wjLe|
AZGe Avgiv HTML dvBj Gi G‡Kev‡i mvavib Ae¯ v (Basic format) †`Ljvg| AvBwU wi‡j‡UW wewfbœ
B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info
4.4 HTML file •Zwi Kiv
GLb Avgiv GKwU HTML dvBj •Zwi Kie| GwU Avgiv `yBfv‡e Ki‡Z cvwi|
1| Notepad ev Wordpad w`‡q|
2| †h‡Kv‡bv HTML editor (hv HTML dvBj •Zwi Ges m¤úv`b Gi Kv‡R e¨envi Kiv nq) †hgb-Adobe
Dreamweaver, NetBeans BZ¨vw` w`‡q|
†h‡nZy Avgiv GLb gvÎ ïi  KiwQ, ZvB Avgiv Kv‡Ri myweavi Rb¨ Notepad w`‡q KvR Kie|
• HTML dvBj •Zwi Kivi Rb¨ Avgiv cÖ_‡g †W¯‥Uc G wM‡q gvD‡mi ivBU evUb wK¬K Kwi| Gici †mLv‡b
GKwU ZvwjKv (Menu) Avm‡e| †mLvb †_‡K New > Text Document wbe©vPb Kwi|
Gici Desktop G †`L‡Z cve †h bZyb GKwU Text Document •Zwi n‡q †M‡Q
body U¨vM Gi AvM ch©š— Avgiv hZwKQyB wjwL bv
†Kb, Browser Zv ‡`Lv‡e bv|
ïaygvÎ Body U¨vM Gi ga¨w¯ Z †jLv¸‡jvB Browser
show Ki‡e|
wKš‧ head U¨vM Gi cÖ‡qvRb Aek¨B Av‡Q|

30
wPÎ t bZyb †U·U WKy‡g›U •Zwi n‡q †M‡Q|
GLb double click K‡i text file wU Lywj| Zvici Avgiv wb‡Pi †c«vM«vgwU wjwL|
<html>
<body>
Bangladesh is my homeland
</body>
</html>
†cÖvMÖvg †jLv †k‡l GLb Avgiv G‡K save Kie| GRb¨ Avgiv evgcv‡k Dc‡i File–G wK¬K Kwi| Zvici save
as -G wK¬K Ki‡j wb‡Pi g‡Zv GKwU wPÎ Avm‡e|
†h‡nZz, GLv‡b <head> Gi †Kvb
KvR †bB, ZvB Avgiv GLv‡b
<head> e¨envi Kwiwb|

31
1| GwU n‡‪Q Avgv‡ì dvBj Gi †jv‡Kkb| A_©vr dvBjwU †hLv‡b Save n‡e|
2| hw` Avgiv dvBj Gi †jv‡Kkb cwieZ©b Ki‡Z PvB, Zvn‡j GLb †_‡K wbw`©ó (select) K‡i w`‡Z n‡e|
Avgiv myweavi Rb¨ †W¯‥Uc G ivLe|
3| GLv‡b Avgiv Avgv‡ì dvBj Gi bvg wjLe new.html Avi †h‡nZy Avgiv html wb‡q KvR KiwQ, ZvB dvBj
Gi †k‡l (extension) .html Aek¨B wjL‡Z n‡e|
4| GLv‡b Avgiv Save as type wn‡m‡e All files ivLe|
5| me KvR wVKVvK n‡q †M‡j GLv‡b (Save) wK¬K Ki‡jB Avgv‡ì Kvw‫‫‬LZ †dvìvi (Desktop) G †mf n‡q
hv‡e|
Gevi Desktop G †`L‡Z cve †h new.html bv‡g GKwU bZyb dvBj •Zwi n‡q †M‡Q| GLb gvDm c‡q›Uvi †mB
dvBjwUi Dci †i‡L Wej wK¬K Ki‡j GwU eªvDRvi G Pvjy n‡e| mnR I ¯^í mg‡q †cÖvMÖvg wjLvi Rb¨ †jL‡Ki
ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|
†jLvwU Chrome e«vDRv‡i Ggb †`Lv‡e t
4.5 t Adobe Dreamweaver CS6
I‡qe †W‡fjcvi‡ì Rb¨ Adobe Dreamweaver n‡‪Q GKwU Amvavib †U·U GwWUi| GKK_vq GwU eënvi
Ki‡j Avgv‡ì Avi Ab¨ †Kvb GwWUi eënvi Ki‡Z gb PvB‡e bv| Kvib GB GKwU mdUIq¨vi w`‡q Web
Development RM‡Zi †gvUvgywU me ai‡bi Language-B GwWU Kiv hvq| Avi Gi me‡P‡q eo myweav n‡‪Q
Gi code hinting myweav| A_©vr hLb Avcwb <html> wjL‡Z PvB‡eb, ZLb gvÎ <ht wjL‡jB GwU ¯^qswµqfv‡e

32
Avgv‡ì Kvm©‡ii mv‡_ <html> †jLv wb‡q Avm‡e| ZLb hw` Avgiv Kx-†ev‡W© Enter Pvwc, Zvn‡j †mB
<html> †jLvwU P‡j Avm‡e| G‡Z K‡i Avgv‡ì †KvW †jLvi MwZ AviI †e‡o hv‡e|
Z‡e cÖwZwU mdUIq¨vi ev †Mg BÝUj Gi Rb¨ †hgb wKQy nvW©Iq¨vi KbwdMv‡ikb Gi cÖ‡qvRb nq, †Zgwb GiI
wKQy Pvwn`v i‡q‡Q| †Zv †`‡L †bB GBPgrKvi mdUIq¨viwU BÝUj Kivi Rb¨ Avgv‡ì Kw¤úDUv‡i wK ai‡bi
†gvUv‡gvwU nvW©Iq¨vi KbwdMv‡ikb _vK‡Z n‡e|
Windows
 Intel® Pentium® 4 or AMD Athlon® 64 processor
 Microsoft® Windows ® XP with Service Pack 3 or Windows 7 with Service Pack
1. Adobe® Creative Suite® 5.5 and CS6 applications also support Windows 8.
Refer to the CS6 FAQ for more information about Windows 8 support.*
 512MB of RAM
 1GB of available hard-disk space for installation; additional free space required
during installation (cannot install on removable flash storage devices)
 1280x800 display with 16-bit video card
 Java™ Runtime Environment 1.6 (included)
 DVD-ROM drive
 QuickTime 7.6.6 software required for HTML5 media playback (B›Uvi‡bU †_‡K
msM„nxZ)
Mac OS
 Multicore Intel processor
 Mac OS X v10.6.8 or v10.7. Adobe Creative Suite 5, CS5.5, and CS6 applications
support Mac OS X Mountain Lion (v10.8) when installed on Intel based
systems.**
 512MB of RAM
 1.8GB of available hard-disk space for installation; additional free space required
during installation (cannot install on a volume that uses a case-sensitive file
system or on removable flash storage devices)
 1280x800 display with 16-bit video card
 Java Runtime Environment 1.6
 DVD-ROM drive
 QuickTime 7.6.6 software required for HTML5 media playback (B›Uvi‡bU †_‡K
msM„nxZ)

33
Adobe Dreamweaver CS6 install Kivi Rb¨ cÖ_‡g wmwW‡Z _vKv Adobe Dreamweaver CS6
†dvìviwU Lywj|
Gi †fZ‡i _vKv Dreamweaver †jLv dvBjwU‡Z Wvej wK¬K Ki‡j wb‡Pi g‡Zv GKwU DB‡Ûv Avm‡e|
GLv‡b dvBjwU‡K AvbwRc K‡i wb‡Z ej‡e| GRb¨ GKwU †dvìv‡ii †jv‡Kkb e‡j w`‡Z n‡e, †hLv‡b dvBj
¸‡jv Rgv n‡e| GLv‡b Avgiv AvcvZZ †W·Uc †dvìviwU †`wL‡q w`‡qwQ| dvBj Gi †jv‡Kkb †`Lv‡bvi ci
Next G wK¬K Ki‡j GwU AvbwRc nIqv ïi  Ki‡e| Gici GwU AvbwRc n‡q †M‡j Avgiv †h †dvìv‡ii K_v

34
e‡jwQjvg, †m †dvìv‡i †M‡j setup.exe bv‡g GKwU dvBj cvIqv hv‡e| I‡qemvB‡U AwaK cwigv‡Y wfwRUi
wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP©
BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|
†mwU‡Z Wvej wK¬K Ki‡j wb‡Pi gZ BÝUj nIqv ïi  Ki‡e|
Zvici wR‡Ám Ki‡e, Avgiv GUv‡K wK wn‡m‡e BÝUj Kie|
hw` GwU Avgv‡ì †Kbv n‡q _v‡K, Zvn‡j Avgiv GwU‡K mivmwi BÝUj Kie| Avi BÝUj G wK¬K Ki‡jB †m
GKwU wbw`©ó wmwiqvj b¤î PvB‡e| wmwiqvj b¤îwU wVKVvK w`‡jB mdUIq¨viwU BÝUj nIqv ïi  Ki‡e|

35
Avi hw` Avgv‡`i Kv‡Q †Kvb wmwiqvj bv¤^vi bv _v‡K, Zvn‡j Avgiv Try †jLvi Dci wK¬K Kie| Zvici wb‡Pi
g‡Zv GKwU m¤§wZ cÎ (License Agreement) Avm‡e GLv‡b Accept G wK¬K Ki‡Z n‡e| mnR I ¯^í mg‡q
†cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|
Gici Avgv‡`i wR‡Ám Kiv n‡e mdUIq¨viwU‡K Avgiv †Kv_vq msi¶b Ki‡Z PvB|

36
GwU mvavibZ C:/ WªvB‡fi Program Files Gi g‡a¨ BÝUj Kiv n‡q _v‡K; Z‡e Avcwb PvB‡j Ab¨ †h‡Kv‡bv
WªvB‡f BÝUj Ki‡Z cv‡ib|
Gici Avgv‡`i mdUIq¨viwU BÝUj nIqv ïi  n‡e Ges Dc‡ii gZ AMÖMwZ m~PK (Progress Bar) †`Lv‡e|
hLb GwU Pj‡Z _vK‡e ZLb BÝUj cÖwµqv m¤úbœ n‡Z Avi KZ mgq evwK Av‡Q, Zv cÖ`k©b Ki‡e| GwU A‡bK

37
mgq 10 wgwbU ej‡jI †ewkifvM mgq 5-6 wgwb‡UiI Kg mg‡q BÝUj n‡q hvq| Installation cÖwµqv m¤úbœ
n‡j wb‡Pi g‡Zv GKwU DB‡Ûv Avm‡e| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU
Ki b http://www.bookbd.info|
GLvb †_‡K Launch Now G wK¬K Ki‡j mdUIq¨viwU Pvjy n‡q hv‡e|
wKš‧ Avgiv †h‡nZy GwU Trial ev cix¶vg~jK fv‡e BÝUj K‡iwQ, ZvB GwU Avgv‡K GKwU mZK©evZ©v †`Lv‡e †h
BÝUj Kivi w`b n‡Z Avwg Gi c‡ii 30 w`b ch©š— mdUIq¨viwU e¨envi Ki‡Z cvie| mnR I ¯^í mg‡q
†cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|

38
GLvb †_‡K Start Trial G wK¬K Ki‡Z n‡e| Zvici Avevi GKwU DB‡Ûv Avm‡e, †hLv‡b Rvb‡Z PvIqv n‡e †h
Avgiv wK wK ai‡bi †KvW GwWUi wn‡m‡e mdUIq¨viwU‡K eënvi Kie Ges GB mdUIq¨viwU ‡Kvb ‡Kvb
G·‡Ubkb hy³ dvBj Gi GwWUi wn‡m‡e KvR Ki‡e||
Avgv‡ì myweavi Rb¨ Avgiv me¸‡jvI evQvB Ki‡Z cvwi, A_ev PvB‡j Avgv‡ì B‪Qvg‡Zv †h KqwU cÖ‡qvRb
wbe©vPb K‡i w`‡Z cvwi| Z‡e GwU Avgv‡K memgq wR‡Ám Ki‡e bv| ïay gvÎ cÖ_gevi hLb Pvjy n‡e, ZLb-B
GKevi wR‡Ám Ki‡e| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b
http://www.bookbd.info|
GLvb †_‡K Select All G wK¬K K‡i ok wK¬K Kwi| Zvn‡jB Avgv‡ì G ch©š— installation cÖwµqv mgvß|
Gici Dreamweaver CS6 Pvjy n‡q hv‡e| Ges Welcome Screen cÖ`wk©Z n‡e|

39
GwU cÖwZevi mdUIq¨viwU Pvjy nIqvi mgq cÖ`wk©Z n‡e| Z‡e Avcbvi Kv‡Q hw` weiw³Ki g‡b nq Zvn‡j GwU‡K
eÜ K‡iI ivL‡Z cvi‡eb|
eÜ K‡i ivLvi Rb¨ Welcome Screen wUi evg †Kvbvq j¶¨ Ki b, Don‟t Show Again bv‡g GKwU
†PKe· i‡q‡Q| GwU‡Z GKevi wUK w`‡q w`‡j KL‡bv Avi †`Lv‡e bv| Z‡e Avgiv PvB‡j GB Welcome
Screen wU‡K Window †_‡K †diZ Avb‡Z cvie|
4.6 t Web Browser

40
Opera download Kiv hv‡e Zv‡`i Awdwmqvj mvBU http://www.opera.com †_‡K| e- wMs Gi Rb¨
me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW
IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|
GwU WvDb‡jvW Kivi Rb¨ mvBUwUi †gby¨ ev‡i Aew¯ Z Browsers †gbyi Dci gvDm c‡q›Uvi ivL‡j GKwU
W«cWvDb †gby¨ Avm‡e| Ges GB †gby¨wUi †k‡lB †jLv i‡q‡Q Download Opera
GLv‡b wK¬K Ki‡j bZyb GKwU cvZv †jvW nIqv ïi  Ki‡e| GLv‡b `ywU Ackb cvIqv hv‡e| cÖ_gwU
Kw¤úDUv‡ii Rb¨ Ges wØZxqwU †gvevBj wWfvB‡mi Rb¨| GLvb †_‡K Opera for PC, Mac & Linux G wK¬K
Ki‡j eªvDRviwUi executable file (.exe) WvDb‡jvW nIqv ïi  n‡e|

41
Avgiv me‡P‡q †ewk †h eªvDRviwU eënvi K‡i _vwK, Zvi g‡a¨ dvqvid· Ab¨Zg| Z‡e GwU †h †gvwRjv
dvD‡Ûk‡bi •Zwi Zv nq‡Zv Avgiv A‡b‡KB Rvwb bv| GwU WvDb‡jvW Kiv hv‡e †gvwRjvi Awdwmqvj mvBU
http://mozilla.org †_‡K|
mvBUwU‡Z XyK‡jB Wvb cv‡k dvqvid· eªvDRvi WvDb‡jvW Kivi evUb cvIqv hv‡e| GLv‡b wK¬K Ki‡jB
WvDb‡jvW nIqv ïi  n‡e| Gi mv‡_ mv‡_ bZyb Av‡iKwU cvZv Avm‡e, †hLv‡b Zv‡ì bZyb bZyb cY¨ I Dbœqb
m¤ú‡K© Rvbvi Rb¨ Avcbvi †gBj wVKvbv PvB‡e| Z‡e GwU Hw‪QK (optional) Avcwb PvB‡j w`‡ZI cv‡ib| bvI
w`‡Z cv‡ib| †Kvb cÖKvi †cÖvMÖvwgs Ávb QvovB GLb wewfbœ wmGgGm Gi gva¨‡g †h‡Kvb ai‡Yi I‡qemvBU •Zwi
Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi Rygjv eënvi K‡i mn‡RB I‡qemvBU •Zwi
Ki‡Z †jL‡Ki ÔÔweMxwbs RygjvÕÕ eBwU †`‡L wb‡Z cv‡ib|
I‡qe †W‡fjc‡g‡›Ui KvR K‡ib A_P Ò¸Mj †µvgÓ eënvi K‡ib bv Ggb gvbyl Lye Kg-B cvIqv hv‡e| Avwg
wb‡RI e¨vw³MZ fv‡e GwUi †W‡fjcvi Uyjm Gi Rb¨ cQ›` I ¯^v‪Q›`¨ †eva Kwi| GwU WvDb‡jvW Kiv hv‡e
http://google.com/chrome GB wVKvbv †_‡K| †gvt wgRvbyi ingvb Gi ÔÔweMxwbs IqvW©‡cÖmÓ| GB eBwUi

42
gva¨‡g Avcwb wb‡R wb‡R †Kvb †cÖvMÖvwgs Ávb QvovB wKfv‡e RbwcÖq wm.Gg.Gm IqvW©‡cÖ‡mi gva¨‡g Avcbvi
I‡qemvBU ev e- M •Zwi Ki‡Z cvi‡eb †m m¤ú‡K© †jLv n‡q‡Q| GLv‡b cÖ‡Z¨KwU welq mnR I mvejxj fvlvq
Qwei mv‡_ Dc¯ vcb Kiv n‡q‡Q|
GLv‡b XzK‡j wVK gvSLv‡b WvDb‡jvW Kivi Rb¨ GKwU bxj †evZvg †`Lv hv‡e| GLv‡b wK¬K Ki‡j GKwU
cc-Avc e‡· m¤§wZ cÎ cÖ`wk©Z n‡e|
GLvb †_‡K Accept and Install G wK¬K Ki‡Z n‡e| wK¬K Kivi ci GKwU executable file install nIqvi
Rb¨ wR‡Ám Ki‡e|

43
wKš‧ GwU mivmwi e«vDRv‡ii BÝU‡jmb dvBj bq| GwU Avjv`v GKwU BÝUjvi| A_©vr GwU‡K Avgiv hLb Pvjy
Kie, ZLb GwU Google Chrome eªvDRvi WvDb‡jvW ïi  Ki‡e Ges cieZ©x‡Z BÝUj Ki‡e|
ZvB WvDb‡jvW †kl n‡q †M‡j Avgiv BÝUjviwU‡K Wvej wK¬K K‡i Pvjy Ki‡jB GwU e«vDRvi WvDb‡jvW ïi 
K‡i w`‡e|
hLb GwU WvDb‡jvW n‡Z _vK‡e ZLb wb‡Ri g‡Zv evwK _vKv mgq cÖ`k©b Ki‡e|

44
WvDb‡jvW †k‡l wb‡Pi gZ GKwU DB‡Ûv Lyj‡e| GLvb †_‡K Next G wK¬K Ki‡Z n‡e|
Next G wK¬K Ki‡jB eªvDRvi Pvjy n‡q hv‡e|
Ab¨vb¨ e«vDRv‡ii gZ Google Chrome I Syncronizing I e¨vKAvc myweav w`‡q _v‡K| syncrnize and
backup n‡‪Q Ggb GKwU myweav, hvi gva¨‡g Avgiv Avgv‡`i mKj Bookmark, History I Settings me
RvqMvq me T.N.R cve| Z‡e GB myweavi c~e©kZ© n‡‪Q sign in Ki‡Z n‡e| Signed In _vKv Ae¯ vq Avcbvi
mKj Z_¨ Google Chrome Server-G msiw¶Z n‡Z _vK‡e| Ges Avcwb Avevi hLb Ab¨ ‡Kvb DivvBm
‡_‡K jM Bb Ki‡eb, ZLb Avcbvi mKj Z_¨ †mB wWfvB‡m P‡j Avm‡e|

45
 weMxwbs Rygjv
 A¨vWfvÝW Rygjv
 cÖ‡dkbvj Rygjv
 Rygjv †U¤ú‡jU †gwKs
 weMxwbs IqvW©‡cÖm
 A¨vWfvÝW IqvW©‡cÖm
 cÖ‡dkbvj IqvW©‡cÖm
 B›Uvi‡b‡U AvZ¥Kg©ms¯ vb-1
 B-Kgvm© A¨vÛ Rygjv! fvPz©gvU©
 B-Kgvm©
 g¨v‡µvwgwWqv wWªgI‡qfvi
 mvP© BwÄb AcwUgvB‡Rkb
 A¨vWfvÝW mvP© BwÄb AcwUgvB‡Rkb
 cÖ‡dkbvj mvP© BwÄb AcwUgvB‡Rkb
 d‡i· †UªwWs
 B-gv‡K©wUs
 GBP wU Gg Gj-5
 A¨vWfvÝW GBPwUGgGj
 wcGBPwc A¨vÛ gvB GmwKDGj
 A¨vWfvÝW wcGBPwc A¨vÛ gvB GmwKDGj
 Ae‡R± Awi‡q‡›UW wc.GBP.wc
 †WUv‡em gvB GmwKDGj
 wm †cÖvMÖvwgs
 Rvfv †cÖvMÖvwgs
 Rvfvw¯…Þ
 Rygjv! †Ug‡c- U †gwKs
 A¨vWfvÝW d‡Uvkc
 A¨vWfvÝW Bjv‡÷ªUi
 cÖ‡dkbvj MÖvwd· wWRvBb
 cÖ‡dkbvi Kw¤úDUvi †bUIqvwK©s
 I‡W¯‥ Ges AvDU‡mvwm©s
 A¨vwdwj‡qU gv‡K©wUs

46
Aa¨vq 05
wKQy AwZ cÖ‡qvRbxq HTML TAGS
GB Aa¨vq †k‡l Avgiv Rvb‡Z cvi‡ev :
1 HTML Gi AwZ cÖ‡qvRbxq U¨vM mg~n
2 ïay gvÎ HTML e¨envi K‡i GKwU c~b©v½ I‡qe †cR •Zwi
3 HTML G Qwei e¨venvi Kiv
4 wfwWI, Mvb Ges A¨vwb‡gk‡bi e¨envi Kiv

47
5.1 t iPbv/wbeÜ (Article) †jLv t
G ch©v‡q Avgiv wkLe wKfv‡e HTML–G GKwU AvwU©‡Kj wjL‡Z nq| Avgiv ¯‥yj Ges K‡j‡R wewfbœ mg‡q
wewfbœ wel‡q iPbv wj‡LwQ| wewfbœ I‡qe mvB‡UI GLb wewfbœ wel‡q wbeÜ ev Blog i‡q‡Q hv Avgv‡ì bvbv cÖKvi
Z_¨ w`‡q _v‡K| iPbv †jLvi Rb¨ Avgv‡ì †hme U¨vM eënvi Ki‡Z n‡e Zv nj-
• h1-h6
GwU iPbvi wk‡ivbvg ev Heading wjL‡Z eënvi Kiv nq| h1 n‡‪Q me‡P‡q eo (large font) I †gvUv
(Bold) †jLvi Rb¨| h2 n‡‪Q h1 Gi †P‡q GKUy †QvU, h3 Av‡iKUy †QvU; Gfv‡e h6 ch©š— ch©vqµ‡g †QvU
†jLvi Rb¨ eënvi Kiv nq|
GwU ‡jLvi wbqg n‡‪Q <h1> ... </h1>
• p
GwU w`‡q GKwU c¨viv Avjv`v Kiv nq| GwU †jLvi wbqg </P>......<P>
• br
HTML G Avgiv hZeviB space †`B bv †Kb, eªvDRvi ïaygvÎ GKwU space-B count Ki‡e (GKvwaK
Space Gi cÖ‡qvRb n‡j   wjL‡Z n‡e)| wVK †Zgwb Avgiv hZeviB Enter Pvwc bv †Kb, eªvDRvi
GKwUI count Ki‡e bv| ZvB GK jvBb Gi †jLv †kl K‡i Ab¨ jvBb G hvIqvi Rb¨ <br/> eënvi Ki‡Z
n‡e| Z‡e g‡b ivL‡Z n‡e †h Avgiv hLb GKwU U¨vM †kl K‡i bZyb Av‡iKwU U¨vM ïi  Kwi ZLb eªvDRvi wb‡R
†_‡KB GKwU line break (Avcbv Avcwb c‡ii jvBb G P‡j hvIqv) w`‡q †bq| Avi hw` KL‡bv GKvwaK jvBb
†eªK Gi cÖ‡qvRb c‡o, Z‡e Avgiv GKvwaKevi <br/> eënvi Ki‡Z cvie|
* Ab¨ U¨vM †Rvovq †Rvovq wjL‡Z n‡jI GwU GKeviB wjL‡Z nq|
e¨vm! n‡q †Mj Avcbvi HTML †kLv! GZUyKy cvi‡jB Avcwb mdjfv‡e GKwU Aby‡‪Q` (Article) iPbv Ki‡Z
cvi‡eb|
Zvn‡j Pjyb Avgiv Rjw` GKwU Article wj‡L †dwj|
<!DOCTYPE HTML>
<html>
<body>
<h1> My country </h1>
<h4>Basic Things About My Country</h4>
<p> The name of our country is Peoples Republic Of Bangladesh. It is populated
with 160 million people. It is a riverine country.
</p>
<h4>Freedom:</h4>
<p> Bangladesh got independence in 1971 from Pakistan. About 3 million
people died in that war of freedom.
</p>
</body>
</html>

48
CD S.MJ first_doc.html
GLb Av‡Mi wbqg Abyhvqx †mf K‡i eªvDRv‡i Open Kwi| GwU †`L‡Z GiKg n‡e -
wPÎt eªvDRv‡i wcÖwfD|
Zvn‡j Avgiv GLb †h‡Kv‡bv cÖKvi Aby‡‪Q` w`‡q HTML dvBj •Zwi Ki‡Z cvie|
5.2 t Qwe eënvi t
GKUy Av‡M †Zv Avgiv bZyb dvBj •Zwi Kiv Ges Zv‡Z †Kvb wKQy eo/†QvU K‡i †jLv wkLjvg| wKš‧ Gfv‡e
wjL‡j †Zv Avi Avgv‡ì I‡qe mvBU •Zwi n‡q hv‡e bv| Avgv‡ì‡K †jLvi mv‡_ wewfbœ cÖKvi Qwe, wfwWI, Mvb
BZ¨vw` mvBU G w`‡Z n‡e| e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki
†jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|
Zvn‡j cÖ_‡g †`wL, wKfv‡e Qwe eënvi Kie|
HTML-G Qwe eënvi Ki‡Z n‡j wjL‡Z nq <img> A_©vr image Gi msw¶ß i c| GLb Avgiv i1.jpg
bv‡g GKwU Qwe Avgv‡ì HTML dvBj G eënvi Kie| GwU CDÕi Images †dvìv‡i †Ìqv Av‡Q| GLv‡b
Avcwb PvB‡j Avcbvi Kw¤úDUvi G _vKv Ab¨ †h‡Kv‡bv Qwe eënvi Ki‡Z cv‡ib| GwU GKwU GKK U¨vM weavq
G‡KI †Rvov wn‡m‡e wjL‡Z n‡ebv|
<html>
<body>
<h1> Tanvirs Party</h1>
<img src="image/i1.jpg" width="960" height="640">
</body>
</html>

49
CD S.MJ display_img.html
†jLv n‡q †M‡j h_vixwZ save K‡i eªvDRv‡i Pvjy Kwi| GwU †`L‡Z GiKg n‡e|
†h‡nZy Avgiv <img/> U¨vM Gi g‡a¨ Gi Drm (Source) e¨vwZZ Ab¨ wKQy wjwL bvB, ZvB Qwe Zvi wbR¯^
(default) AvKv‡i cÖ`wk©Z n‡e| hw` Avgiv Gi •`N¨© Ges cÖ¯  cwieZ©b Ki‡Z PvB, Zvn‡j U¨vM Gi g‡a¨
AwZwi³ hv wjL‡Z n‡e Zv wbgœi ct
<img src=" image/i1.jpg "width="960" height="640">
GLv‡b •`‡N©ï Rb¨ height Ges cÖ‡¯ i Rb¨ width Gi gvb cwieZ©b K‡i w`‡jB Avgiv Kvw‫‫‬LZ AvKvi cve|
GLv‡b Avgiv GB gvb¸‡jv `yBfv‡e wjL‡Z cvwi| †hgb-
Height="200px" S.MJ height="40%"
5.3 t wfwWI, Mvb A_ev Ab¨ †h‡Kv‡bv dvBj eënvi t
Qwe ev‡` Ab¨ †h‡Kv‡bv cÖKvi dvBj; †hgb- audio, video, Java applets, ActiveX, PDF, and Flash
BZ¨vw` eënvi Kivi Rb¨ Avgv‡ì <object> ... </object> U¨vMwU eënvi Ki‡Z n‡e| GLv‡b wfwWI,
A¨vwb‡gkb I swf Gi †¶‡Î Avgiv Av‡Mi g‡Zv height Ges width eënvi Ki‡Z cvie| Avi GwU ‡jLvi
wbqg n‡‪Q t
<object data="Aji jhoro jhoro.mp3">
</object>
<object data="running_horse.mpeg4" height="300" width-"500"> </object>
Gevi Avgiv mvavib wRwbm¸‡jv wk‡L wbjvg| GLb Avgiv hv hv wkLjvg, Zv w`‡q GKwU m¤úyY© dvBj •Zwi Kie|
<!doctype html>
<html>
*GLv‡b px A_© n‡‪Q pixels Ges hLb
Avgiv % eënvi Kie, ZLb QwewU Zvi RvqMv
Abymv‡i (†hgb-div, table) ¯ vb `Lj
Ki‡e|

50
<body>
<h1>Cox's Bazar</h1>
<h5> The Biggest Shore On the Earth</h5>
<img src="Images/cox_bazar.jpg" height="250" width="1048"/>
<h3> Location </h3>
<p> Cox's Bazar is situated in the Chittagong district on Bangladesh. When a traveller
comes to visit Bangladesh, it is a place they must see. Cox's Bazar (Bengali: K·evRvi) is a
town, a fishing port and district headquarters in Bangladesh. It is known for its wide
sandy beach which is the world's longest natural sandy sea beach.[2][3][4] It is an
unbroken 125 km sandy sea beach with a gentle slope. It is located 150 km south of the
industrial port Chittagong. Cox‟s Bazar is also known by the name "Panowa," the literal
translation of which means "yellow flower." Its other old name was "Palongkee.".</p>
<audio controls>
<source src="jodi mon kade.mp3" type="audio/mpeg"></audio>
</body>
</html>
cÖkœce© t
Avcbviv †R‡b Lywk n‡eb †h, Avcbv‡ì‡K mn‡hvwMZv Kivi Rb¨ Avgiv •Zwi K‡iwQ Book Support center| Avi GB
Book Support center-Gi B-†gBj A¨v‡Wªm n‡jv infobook7@gmail.com, hv Avcbv‡ì mKj mgm¨vi mgvavb
Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †Ìqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡ì hw` GB eB‡q †Kvb wKQ zeyS‡Z
mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Ki b GB wVKvbvq infobook7@gmail.com.

51
Aa¨vq 06
†ewmK wm Gm Gm
1 CSS wK
2 CSS Gi cÖKvi †f`
3 wewfbœ cÖKvi CSS Gi •ewkô I e¨envi †K․kj

52
Av‡Mi Aa¨vq ch©š— Avgiv hZUyKy wkLjvg, Zv‡Z †Zv Avgv‡ì I‡qemvBU •Zwi nj bv| Avgiv ïay c…ôv (Page)
•Zwi Kiv wkLjvg| GLb Avgiv wkLe wK K‡i Avgv‡ì KvR ¸‡jv‡K wKfv‡e AviI my›ì K‡i †Zvjv| CSS
†kLvi Av‡M wKš‧ Aek¨B HTML Rvb‡Z n‡e| Kvib CSS memgq HTML Gi Dci KvR K‡i _v‡K| ZvB
HTML wenxb CSS e…_v| Kw¤úDUvi †bUIqvwK©s Gi cÖv_wgK welq †_‡K ïi  K‡i A¨vWfvÝW †j‡f‡ji wewfbœ
welqmg~n wb‡q ÔÔcÖvKwUK¨vj Kw¤úDUvi †bUIqvwK©sÕÕ eBwU †jLv n‡q‡Q| PvB‡j eBwU c‡o wb‡Z cv‡ib|
hLb-B Avgiv KvD‡K ewj wZwb †`L‡Z my›ì; Gi A_© `vovq wK? Gi A_© n‡‪Q wZwb wbðqB Lye ÷vBwjk, ZvB
bv? n¨vu ZvB| AvgivI Avgv‡ì I‡qe †cR¸‡jv‡K AviI my›ì K‡i †Zvjvi Rb¨ ÷vBj eënvi Kie|
6.1 t CSS wK ?
CSS Gi m¤úyY© i c n‡‪Q Cascading Style Sheet.
CSS cÖavbZ wZb fv‡e ‡jLv hvq| h_vt-
K. Inline CSS
L. Internal CSS
M. External CSS
6.1.1 t Inline CSS:
GwU Avgiv U¨vM Gi g‡a¨ wj‡L _vwK| †hgb t
<h1 color="red" ; font-size="16pt">
my favourite color
</h1>
GwU memgq Bb jvBb, A_©vr jvBb Gi g‡a¨ KvR K‡i _v‡K| GwU Avgiv †hLv‡b cÖ‡qvRb ïay †mLv‡bB wjLe|
wKš‧ G ai‡bi ÷vBj Gi me‡P‡q eo mgm¨v n‡‪Q GwU ïaygvÎ †hLv‡b wjLe, †mLv‡bB KvR Ki‡e| Ab¨ †Kv_vI
cÖ‡qvRb n‡j Avgv‡K cybivq wjL‡Z n‡e| ZvB G ai‡bi ÷vBj Avgiv ïaygvÎ †hLv‡b e¨wZµg ÷vB‡ji cÖ‡qvRb
n‡e, †mLv‡bB eënvi Kie| j¶¨ Ki b GwU KL‡bv GKwU fv‡jv Kv‡Ri aib n‡Z cv‡i bv| jvB‡bi g‡a¨
wmGmGm †jLvi d‡j Avgv‡ì GBPwUGgGj wnwRwewR †`Lv‡Z cv‡i; †hwU GKRb cÖ‡dkbvj †W‡fjcv‡ii Kv‡Ri
cwicwš | Avi jvB‡bi g‡a¨ wmGmGm _vK‡j eªvDRv‡ii Zv cÖ‡mm Ki‡Z mgq †ewk jv‡M weavq †c‡Ri MwZ
A‡bK nªvm cvq (hwÌ Zv K‡qK wgwj †m‡KÛ!) †Kvb cÖKvi †cÖvMÖvwgs Ávb QvovB GLb wewfbœ wmGgGm Gi
gva¨‡g †h‡Kvb ai‡Yi I‡qemvBU •Zwi Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi
Rygjv eënvi K‡i mn‡RB I‡qemvBU ‣Zix Ki‡Z †jL‡Ki ÔÔweMxwbs RygjvÕÕ eBwU †`‡L wb‡Z cv‡ib|
6.1.2 t Internal CSS:
GwU Avgiv memgq Head U¨vM Gi g‡a¨ wjLe| GLv‡b Avgv‡ì ÷vBj Ges HTML GKB dvBj Gi g‡a¨
_vK‡e| Gi me‡P‡q eo myweav n‡‪Q †h, †nW Gi g‡a¨ Avgiv GKevi Gi ÷vBj e‡j †è, Avi hZevi-B
Avgv‡ì ÷vBj eënvi Kivi cÖ‡qvRb co‡e, Avgiv bv wjL‡jI Head Gi g‡a¨ Aew¯ Z CSS Gi ÷vBj Gi
myweav cve|
Z‡e Internal CSS m¤ú‡K© Rvbvi c~‡e© Avgv‡ì‡K CSS Gi Syntax fvjfv‡e eyS‡Z n‡e| wb‡Pi wPÎwU
fvjfv‡e †Lqvj Ki‡jB Avgiv CSS Syntax m¤ú‡K© cwi®‥vi avibv cve|

53
GLv‡b Selector ej‡Z Avgiv †hB U¨vM Gi g‡a¨ ÷vBwjs Gi myweav cÖ‡qvM Ki‡Z PvB, †mB U¨vMwU‡K cÖ_‡g
ej‡Z n‡e| (GLv‡b D`vniY Gi Rb¨ h1 †Ìqv n‡q‡Q| Avcwb GLv‡b Avcbvi myweavgZ Ab¨ †h‡Kv‡bv U¨vM;
†hgb- p, li, span BZ¨vw` eënvi Ki‡Z cv‡ib|) Zvici Curly Braces (G‡K Avgiv mvavibZ Second
Bracket e‡j _vwK) Gi g‡a¨ Avgv‡ì ÷vBwjs Gi Property I Value ¸‡jv‡K wjL‡Z n‡e| GwU hw` GLb
Avcbvi g‡b bvI _v‡K, ev KwVb g‡b nq; GKUyI bv Nve‡o mvg‡bi †h Abykxjbx Av‡Q, †m¸‡jv g‡bv‡hvM w`‡q
PP©v Ki‡Z _vKzb| wVK-B iß n‡q hv‡e| GwU †h dig¨vU G †jLv nq, Zv wb¤§i ct
<html>
<head>
<style type=”text/css”>
H1 {color:orange;}
</style>
</head>
<body>
<h1> Africa is Beautiful </h1/>
</body>
</html>

54
CD †Z internal-style.html
GB wPÎwU‡Z †Lqvj Ki‡j †`L‡Z cve †h, cÖ_‡g Avgiv Head ïi  K‡iwQ| Zvici †h‡nZy Avgv‡ì ÷vBwjs Gi
KvR Ki‡Z n‡e, ZvB ïi ‡ZB wjLe ÷vBj UvBc| Zvici †_‡K Avgiv †h U¨vM Gi Rb¨ †h ÷vBj PvB, Zv
wjL‡Z n‡e| GB HTML dvBj G hZeviB Avgiv h1 U¨vM eënvi Kie, cÖ‡Z¨KwU †jLv-B Kgjv e‡Y©i †`Lv‡e|
GLv‡b wKQy welq j¶ ivL‡Z n‡e ‡h,
 Internal Style Sheet memgq head Gi g‡a¨ †jLv nq|
 ïi ‡ZB Style type e‡j w`‡Z n‡e| Avi †h‡nZy <style> bv‡g GKwU U¨vM ïi  n‡q‡Q, ZvB
HTML Gi Ab¨ me mvaviY U¨vM ¸‡jvi gZb GUv‡KI KvR †k‡l </style> †jLvi gva¨‡g eÜ K‡i
w`‡Z n‡e|
 †hB U¨vM Gi g‡a¨ ÷vBj KvR Ki‡e, Zvi bvg Av‡M ej‡Z n‡e (†hgb- h1, p, span, li BZ¨vw`)
Zvici 2q eÜwb (Second Bracket) Gi g‡a¨ ivL‡Z nq|
 Avi †bvUc¨v‡W KvR Kivi mgq Lye mveavbZvi mv‡_ UvBc Ki‡Z n‡e, †hb GKwU A¶i, eÜwb, D×…wZ
wPý, mgvb wPý ev` bv c‡o hvq| Kvib, hw` †Kv_vI †Kvb GKwU wKQy ev` c‡o hvq, Z‡e †m‡¶‡Î
eªvDRv‡i wKQy bv †`Lv‡bvi m¤¢vebv †ewk|
 Z‡e cieZ©x‡Z hLb Avgiv Dreamweaver w`‡q KvR Kie, ZLb GB Sv‡gjv nIqvi m¤¢vebv cÖvq †bB
ej‡jB P‡j|
Avi me‡P‡q eo g‡b ivLvi e¨vcvi n‡‪Q GwU ïay gvÎ †hB †cR G _vK‡e H †cR Qvov GwU Ab¨ †Kv_vI
e¨venv‡ii my‡hvM Avgiv cve bv| I‡qemvB‡U AwaK cwigv‡Y wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb
m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP©
BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|
6.1.3 t External CSS:
GwU m¤ú~Y© Avjv`v GKwU dvBj| A_©vr G ch©š— Avgiv hv Av‡jvPbv K‡iwQ, Zv Avgv‡ì GKwU HTML dvBj
Gi g‡a¨B mxgve× wQj| wKš‧ hLb Avgiv External CSS wb‡q KvR Kie, ZLb cÖ‡qvRb n‡e `yBwU dvBj Gi|
AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info|

55
cÖ_gwU n‡‪Q Avgv‡ì memgq eënvi Kiv HTML| GwUi extension n‡e .html |
Ges wØZxqwU n‡‪Q CSS A_©vr Cascading Style Sheet Gi G·‡Ubkb n‡e CSS |
GwU Avgiv memgq head Gi g‡a¨ link K‡i wè|
ev¯—‡e †`Lvi Rb¨ Avgiv GKwU bZyb dvBj •Zwi Kwi, hv‡Z Avgiv m¤ú~Y© Avjv`v GKwU CSS dvBj †K link
K‡i wè| bZyb dvBj ‣Zwi Kivi Rb¨ Av‡Mi g‡Zv †U·U WKy‡g›U I‡cb K‡i wb‡Pi g‡Zv K‡i wjLyb|
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/home.css">
</head>
<body>
<h1> 30% off ! </h1>
<p>
Get 30 % off on all selected shoes from 16 October to 30 October.
</p>
</body>
</html>
†jLv †kl n‡j h_vixwZ File menu †_‡K Save as G wM‡q KvR m¤úbœ Kwi Ges D³ dvBjwUi Dci Double
click K‡i eªvDRv‡i cÖ`k©b Kwi| Zvn‡j Dc‡ii g‡Zv djvdj cÖ`k©b Ki‡e|

56
GLv‡b †Lqvj Ki b, †h home.css bv‡g GKwU style sheet Gi mv‡_ Avgv‡`i HTML dvBjwU‡K link Kiv
n‡q‡Q| GB dvBjwU wmwW‡Z †`qv Av‡Q|
 weMxwbs Rygjv
 B-Kgvm©
 B-gv‡K©wUs
 GBP wU Gg Gj-5
 Rvfvw¯…Þ

57
gwWDj 2 CSS 1 Ges 2
Aa¨vq : 07 Font Size
1 Font – size Gi eënvi cÖYvjx
2 % w`‡q d›U mvBR eënvi Kiv
3 Pt eënvi K‡i d›U mvBR †Ìqv
4 Em eënvi K‡i d›U mvBR †Ìqv
5 EmI Pt Gi g‡a¨ wnmve Kivi wbqg

58
GLvb †_‡K ïi  n‡‪Q Avgv‡ì Avmj CSS †kLv| GB Aa¨vq †_‡K Avgiv ch©vqµ‡g mewKQyB wkLe|
7.1 t Font Size:
d›U mvBR ej‡Z GKwU †jLv ev †U·U Gi AvKvi‡K †evSvq| wewfbœ iKg Kv‡Ri †¶‡Î Avgv‡ì wewfbœ AvKv‡ii
d›U e¨venv‡ii cÖ‡qvRb co‡Z cv‡i| ZvB GwU Avgv‡ì me‡P‡q †ewk Kv‡R jvM‡e|
mvavibZ eªvDRvi Gi Av`k© (Default) d›U mvBR n‡‪Q 16 c‡q›U (16pt) | ZvB Avgiv hw` Avgv‡ì CSS G
†Kvb d›U mvBR Gi K_v D‡j- L bv Kwi, Z‡e eªvDRvi h1-h6 U¨vM Gi ga¨¯  †jLv (Text) Qvov mKj †jLv‡KB
16 c‡q›U mvBR G cÖ`k©b Ki‡e| ZvB Avgv‡ì Pvwn`v g‡Zv AvDUcyU cvIqvi Rb¨ Avgiv memgq CSS Gi
g‡a¨ font-size e‡j †è| Z‡e GKwU welq Aek¨B †Lqvj ivLe †h, Avgiv d›U mvBR Avgv‡ì wbqš¿‡b ivLe
wVK B; wKš‧ ZvB e‡j Heading Gi AvKvi Kwg‡q paragraph Gi g‡Zv Kie bv| Ges Paragraph Gi
AvKvi evwo‡q Heading Gi g‡Zv K‡i Zyje bv| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo †bqv †_‡K ïi 
K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L wb‡Z cv‡ib|
d›U mvBR Avgiv A‡bK fv‡e wjL‡Z cvwi| Z‡e mPivPi eëüZ wZbwU-B GLv‡b Av‡jvPbv Kiv nj|
1. % Gi gva¨‡g
2. Pt w`‡q
3. Em w`‡q
7.2 t % w`‡q d›U mvBR †Ìqv t
eZ©gvb I‡qe wWRvB‡bi evRvi NvuU‡j ev Ab¨vb¨‡ìI gyL †_‡K nqZ GKwU bZzb kã ï‡b _vK‡eb| Zv n‡‪Q
Responsive Web Design| GB Responsive Web Design Gi †¶‡Î wWfvBm Abyhvqx hv‡Z Avcbvi
text ¸‡jv AvK…wZ cwieZ©b Ki‡Z cv‡i (resize), †mwU wbwðZ Kivi Rb¨ d›U Gi mvBR % †jLv nq| GLb
Avgiv †`Le wK K‡i % Gi gva¨‡g d›U mvBR †Ìqv hvq| Gi Rb¨ Avgv‡ì Av‡Mi g‡Zv †bvUc¨vW Ly‡j wb‡Pi
†cÖvMÖvgwU wjL‡Z n‡e|
<html>
<head>
<style type="text/css">
h1 {font-size:150%}
p {font-size:60%}
</style>
</head>
<body>
<h1> Coca-cola</h1>
<p> This is a foreign company which is situated in north america </p>
</body>
</html>

59
<html>
<head>
h1 {font-size:150px;}
p {font-size:60px;}
</style>
</head>
<body>
<h1> Coca-cola</h1>
<p> This is a foreign company which is situated in north america </p>
</body>
</html>
CD †Z onu2.html
GLv‡b D`vni‡bi Rb¨ h1 {font-size:150%} I p {font-size:60%} eënvi Kiv n‡q‡Q| Avcwb B‪Qv Ki‡j
GLv‡b Avcbvi cQ›` g‡Zv Ab¨ †h‡Kv‡bv gvb eënvi Ki‡Z cv‡ib| GLv‡b Av`k© gvb n‡‪Q 100%| Avcwb hw`
mvavib gv‡bi †P‡q Kg Pvb, Z‡e Gi gvb w`‡Z cv‡ib 100 Gi †P‡q Kg| Avi hw` mvavib AvKv‡ii †P‡q eo
†`Lv‡Z Pvb, Z‡e 100 Gi †ewk gvb eënvi Ki‡Z n‡e| Responsive Design Gi †¶‡Î wbLyuZ gvc cvIqvi
Rb¨ Avcwb `kwg‡KI gvb wjL‡Z cv‡ib| †hgbt font-size:34.754308975%

60
7.3 t Pt w`‡q d›U mvBR †Ìqv t
Pt ej‡Z GLv‡b c‡q›U †evSv‡bv n‡q‡Q| Avcwb hw` Av‡M KL‡bv Microsoft Word eënvi K‡i _v‡Kb, Z‡e
Avcwb GB welqwU ¯…xb Gi Dc‡i d›U mvBR †Ìqvi mgq †`‡L‡Qb| GLv‡b d›U mvBR †Ìqvi †¶‡Î †Kvb
evaëvaKZv †bB| Z‡e ev¯—e AwfÁZv †_‡K ejwQ, 8pt Gi †P‡q Kg Ges 72pt †ewk mvBR Gi d›U Gi
cÖ‡qvRb Avcbvi co‡e bv| †Kvb cÖKvi †cÖvMÖvwgs Ávb QvovB GLb wewfbœ wmGgGm Gi gva¨‡g †h‡Kvb ai‡Yi
I‡qemvBU •Zwi Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi Rygjv eënvi K‡i mn‡RB
I‡qemvBU •Zwi Ki‡Z †jL‡Ki ÔÔweMxwbs RygjvÕÕ eBwU †`‡L wb‡Z cv‡ib|
GLb Avgiv wb‡Pi Abykxjbx‡Z †`Le wKfv‡e pt w`‡q d›U mvBR w`‡Z nq|
<!DOCTYPE html>
<html>
<head>
h1 {font-size:36pt;}
p {font-size:18pt;}
</style>
</head>
<body>
<h3> Audit report of</h3>
<h1>Bongo Communications</h1>
<p> This is the annual business report of Bongo Communications for the year of 2012-13
</p>
</body>
</html>
CD †Z pt.html
7.4 t em w`‡q d›U mvBR †Ìqv t
Internet Explorer ev Ab¨ †h‡Kv‡bv cÖKvi eªvDRv‡i d›U wimvBwRs ÎywU Gov‡bvi Rb¨ A‡bK †cÖvMÖv‡gi-B pt ev
% Gi e`‡j em eënvi K‡i _v‡Kb| Avwg Av‡MI e‡jwQjvg †h eªvDRvi Gi Av`k© d›U mvBR n‡‪Q 16 pt|
myZivs GB wWdë d›U mvBR B n‡‪Q 1 em| A_©vr, GLv‡b Avcbv‡K GKUy wnmve K‡l Avcbv‡K d›U mvBR
wba©viY Ki‡Z n‡e|

61
†h c‡q›U mvBR Gi †jLv Avcwb em w`‡q †`Lv‡Z Pvb, Zv‡K Avcbvi 16 w`‡q fvM Ki‡Z n‡e| MvwYwZK fv‡e
ej‡Z †M‡j
Font size in em
hw` GiciI Avcbvi eyS‡Z mgm¨v nq, wPš—v bv K‡i wb‡Pi AbykxjbwU †`Lyb mewKQy cwi®‥vifv‡e eyS‡Z
cvi‡eb|
<!DOCTYPE html>
<html>
<head>
h1 {font-size:2.45em;}
p {font-size:1.2em;}
</style>
</head>
<body>
<h3> Breaking News</h3>
<h1>60% off in all products</h1>
<p> Get 60% off on our all selected products. Available from 16 September to 31
September.</p>
</body>
</html>
Ex-2:
<!DOCTYPE html>
<html>
<head>
h1 {font-size:5em;}
p {font-size:4em;}
</style>
</head>
<body>
<h3> Head Line </h3>
<h1>60% off in all products</h1>
<p> Get 60% off on our all selected products. Available from 16 September to 31
September.</p>
</body>

62
</html>
CD †Z em.html
Avgiv PvB‡j small, smaller, medium, large, larger BZ¨vw` e¨envi K‡iI d›U mvBR w`‡Z cvwi| e- wMs
Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I
ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

63
Aa¨vq-08
wewfbœ cÖKvi d›U e¨venvi Kiv
1 Font family Gi Kvh© cÖYvjx I eënvi
2 Font family Gi cÖKv‡f`
3 Generic font family Gi eënvi
4 Font style Gi eënvi
5 Font variant Gi eënvi
6 Font Weight Gi eënvi
7 Short-hand ev ms‡¶‡c d‡›Ui mKj cÖcvwU© Gi eënvi
†K․kj|

64
8.1 t Font:
GZ¶b Avgiv †`Ljvg Avgv‡ì †jLv¸‡jv‡K wKfv‡e eo/†QvU Kie| wKš‧ Avgv‡ì †jLv ¸‡jv ïay eo †QvU
Ki‡jB †Zv n‡e bv! G¸‡jvi g‡a¨ wKQyUv •ewPÎAvb‡j AviI AvKl©Yxq n‡e| Avi GB •ewPÎ Avgiv Avbe d›U
cwievi cwieZ©b K‡i |
GwU Avgiv `yBfv‡e Ki‡Z cvwi| cÖ_gwU n‡‪Q font-family w`‡q| Avi c‡iiwU Ki‡Z cvwi Generic font ev
GKwU wbw`©ó d›U w`‡qI Ki‡Z cvwi|
8.2 t Font Family Gi cÖKvi‡f`
font-family ej‡Z †jLvi ev d›U Gi †MvÎ †evSvq| †hgb t Arial, Sans Serif BZ¨vw` †`L‡Z cÖvq KvQvKvwQ
d›U e‡j G‡ì‡K GKB cwiev‡i aiv nq| `yBwU ev Zvi AwaK GKB iKg †`L‡Z d›U¸‡jv‡K wb‡q GKwU d›U
cwievi MwVZ| GwU eënvi Kivi GKwU myweav n‡‪Q A‡bK mgq mevi Kw¤úDUv‡i meiK‡gi d›U _v‡K bv| ZvB
d›U d¨vwgwj eënvi Ki‡j H cwiev‡ii ‡h‡Kv‡bv GKwU d›U H Kw¤úDUv‡i _vK‡j ev H d›U Gi KvQvKvwQ †Kvb
d›U _vK‡j †mwUB cÖ`wk©Z nq| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b
GLb wb‡Pi Abykxjbx‡Z Avgiv †`Le wK K‡i d›U d¨vwgwj eënvi Ki‡Z nq|
<!DOCTYPE html>
<html>
<head>
h1 {font-family:Arial,Helvetica;}
p {font-family:"Times New Roman",Georgia,Serif;}
</style>
</head>
<body>
<h1>Canvas</h1>
<p> We have the best advertising service in Bangladesh. We provide all kinds of outdoor
advertising. </p>
</body>
</html>

65
AviI GKwU Abykxjbx t
<!DOCTYPE html>
<html>
<head>
h1 {font-family:Calibri,vardana;}
p {font-family:"Arial black",Georgia,Sens-Serif;}
</style>
</head>
<body>
<h1>Canvas</h1>
<p> We have the best advertising service in Bangladesh. We provide all kinds of outdoor
advertising. </p>
</body>
</html>
CD †Z font family.html
8.3 t Generic font famiy
Generic family †Z ïay GKwU gvÎ d›U eënvi Kiv nq| GLv‡b Avcwb †hB d›U eënvi Ki‡eb wVK
(exactly) H d›UwU-B AvDUcyU G cv‡eb| Z‡e G‡¶‡Î hw` Avcbvi †Kvb eënviKvixi (User) Kw¤úDUv‡i H
wbw`©ó d›UwU bv _v‡K, Z‡e †m H †jLvUyKy wWdë d›U A_©vr Times New Roman G †`L‡e| †cÖvMÖvwgs
j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo †bqv †_‡K ïi  K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB
GmwKDGjÕÕ eBwU †`‡L wb‡Z cv‡ib|

66
<!DOCTYPE html>
<html>
<head>
p {font:harrington;}
h1 {font:forte;}
div {font:"cooper Black";}
</style>
<body>
<h1> Introducing:</h1>
<p>
The brand new Honda City Motorbike. It has a superb milage of 45kmpl.
</p>
<div>
We have a very big network of survicing Centers all over the country.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
p {font:vani;}
h1 {font:Georgia;}
div {font:"Kalinga";}
</style>
<body>
<h1> Introducing:</h1>
<p>
The brand new Honda City Motorbike. It has a superb milage of 45kmpl.
</p>

67
<div>
We have a very big network of survicing Centers all over the country.
</div>
</body>
</html>
8.4 t Font Style Gi e¨envi
Font style Gi g‡a¨ Avgiv e‡j w`‡Z cvwi †h H d›UwU †`L‡Z BZvwjK n‡e wKbv, ev Oblique n‡e wKbv; bvwK
bigvj _vK‡e| Z‡e wb‡Pi Abykxjbx‡Z GKwU gRvi e¨vcvi j¶¨ Ki b, `yB RvqMv‡Z `yB cÖKv‡ii ÷vBj cÖ‡qvM
Kiv m‡Ë¡I; `ywU-B GKB djvdj cÖ`k©b Ki‡e|
<!DOCTYPE HTML>
<html>
<head>
span {font-style:italic;}
p {font-style:oblique;}
</style>
</head>
<body>
<p> The Population Problem of Bangladesh is getting higher and higher.
In the recent reports of the <span> World Health Organizasion </span>
there will 20 crore people in Bangladesh by 2015. </p>
</body>
</html>

68
8.5 t Font variant Gi e¨envi
GB cÖcvwU© Gi g‡a¨ `yBwU Ackb i‡q‡Q| GKwU n‡‪Q bigvj| A_©vr Gi d‡j †jLv mvavib fv‡eB †`Lv‡e| Avi
Ab¨wU n‡‪Q small caps| A_©vr me¸‡jv A¶iB eo nv‡Zi n‡e, Z‡e cÖ_g A¶iwU evwK¸‡jvi †P‡q AvKv‡i
GKUy eo n‡e Avi| AviI fvjfv‡e †evSvi Rb¨ wb‡Pi Abykxjbx †`Lyb|
<!DOCTYPE HTML>
<html>
<head>
span {font-variant:small-caps}
</style>
</head>
<body>
<p>Sheikh Mujibur Rahman was a great politician and a patriot as well.
He was also called <span> Bongobondhu </span>- The friend of Bengol.
</p>
</body>
</html>
variant.html

69
8.6 t Font weight Gi eënvi
HTML G Avgiv †hfv‡e <b> U¨vM eënvi K‡i †jLv‡K †evì KiZvg, CSS G GB cÖcvwU© w`‡q Avgiv wVK H
GK-B KvR Ki‡ev| Z‡e GLv‡b Avgiv bold, bolder, 100, 200, 300 Gfv‡e 900 ch©š— eënvi Ki‡Z cvie|
<!DOCTYPE HTML>
<html>
<head>
span {font-weight:bolder;}
</style>
</head>
<body>
<p> It was the last eve of 1971. The day was 16 December.
On that day, East Pakistan became <span> Bangladesh </span>.
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
span {font-weight:bold;}
</style>
</head>
<body>

70
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
span {font-weight:small;}
</style>
</head>
<body>
</p>
</body>
</html>
weight.html
8.7 t @font-face
GZw`b †W‡fjcvi‡ì ÒI‡q‡ei †¶‡Î wbivc`Ó d›U eënvi Ki‡Z nZ| wKš‧ GLbKvi wPÎ wfbœ| GLb Avcwb
÷vBj wkU Gi mv‡_ d›UI wj¼ K‡i w`‡Z cv‡ib| Ges cieZ©x‡Z wewfbœ Div ev †cR G eënvi Ki‡Z cv‡ib|
Avi GB myweavwU eënvi Kivi Rb¨ Avcbv‡K @font-face wbqgwU eënvi Ki‡Z n‡e| Avi GwU eënvi Kivi
Rb¨ Avcbv‡K me©cÖ_‡g-
@font-face Gi g‡a¨ GKwU font-family •Zwi Ki‡Z n‡e| †hgb-
@font-face{
font-family: headerFont;

71
Avcbvi mvf©v‡ii †h‡Kv‡bv †dvìvi/wW‡i±wi‡Z †hme d›U cÖ‡qvRb †m¸‡jv ivL‡Z n‡e Ges url G Uv wj¼ K‡i
w`‡Z n‡e| †hgb-
src: url ('LATINWD.TTF')
hw` Avcbvi d›U dvBjwU Ab¨ †Kvb †Wv‡gBb G _v‡K, Z‡e wj¼wU n‡e GiKg t
src: url('http://www.bookbd.info/css3/latinwd.ttf')
e¨vm Gevi Avcbvi cQ›` g‡Zv Avcwb d›U eënvi Ki‡Z cvi‡eb| Z‡e wfbœ wfbœ †¶‡Î Avcbv‡K Avjv`v Avjv`v
font-family wW‡K¬qvi Kiv jvM‡e|
Z‡e GLv‡b †Lqvj ivL‡Z n‡e †h B›Uvi‡bU G·‡c- vivi (ms‡¶‡c IE) Gi †¶‡Î d›U Gi UvBc n‡Z n‡e.eot
GwU Qvov Avcbvi †U·U bigvj Times New Roman-GB †`Lv‡e| Avi Chrome ev Ab¨ †Kvb eªvDRvi wb‡q
wPš—v Ki‡Z n‡e bv| Kvib Giv mvavib .TTF (True Type Font) mg_©b K‡i| Zvici Avevi Av‡iKwU K_v
i‡q hvq; Zv nj .eot ev Ab¨vb¨ G·‡UÝvb Gi d›U cve †Kv_vq ? wKš‧ Gi RbÏ Lye mnR mgvavb n‡‪Q
B›Uvi‡bU| AwWI-wfwWI KbfvU© Kivi Rb¨ †hgb wewfbœ Converter (i cvš—iKvix mdUIq¨vi) cvIqv hvq,
wVK †Zgwb d›U i cvš—‡ii RbÏ mdUIq¨vi cvIqv hvq| Avi ZvQvov Google Gi wewfbœ d›U mvwf©mI Av‡Q|
†mLvb †_‡KI wj¼ K‡i d›U eënvi Ki‡Z cv‡ib|
GLb Avgiv ‡`Le Av‡M •Zwi Kiv Avgv‡ì d›U d¨vwgwjwU wKfv‡e eënvi Ki‡ev|
<!DOCTYPE html>
<html>
<head>
@font-face
{
font-family: headers;
src: url('FRAHVIT.ttf'),
url ('forte.eot'); /* IE9 */
}
div
{
font-family:headers;
}
</style>
</head>
<body>

72
<p>Note that, Internet Explorer 9 only supports .eot fonts. If you don't have .eot fonts,
you can convert them from any type. You can find various kinds of font converters on the
web.</p>
<div>
We are working now on CSS3. So we dont have to think about "web safe fonts".
</div>
</body>
</html>
face.html
Everything under one property:
Avgiv PvB‡j Avjv`v Avjv`v property I value bv wj‡L GKwU cÖcvwU© Gi g‡a¨B me wKQy e‡j w`‡Z cvwi| wb‡P
GKwU D`vniY w`‡q †`Lv‡bv nj| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b
GLv‡b,
1. Font
2. Font-weight
3. Font-style
4. Font-varient

wmGmGm (3)
72
Aa¨vq : 09 Text Align
1. mdjfv‡e GKwU iPbv †jLv
2. text alignment

wmGmGm (3)
73
9.1 t Text-Alignment
GB bvgwU †`‡LB Avcwb eyS‡Z cvi‡Qb †h GwU eënvi K‡i Avgiv †jLv‡K wewfbœ Ae¯ v‡b cÖ`k©b Kivi Rb¨
eënvi Ki‡ev| GB Property Gi wfZ‡i PviwU value †Ìqv hvq|
G¸‡jv nj-
• text-align:center Gi gva¨‡g Avcwb †jLv‡K gvSeivei cÖ`k©b Kiv‡Z cvi‡eb|
<!DOCTYPE HTML>
<html>
<head>
div {text-align:center;}
</style>
</head>
<body>
<div>
<h1> Our village </h1>
</div>
<p>
The name of our village is Dimukha. It is in Manikganj district. We have a pr mary
school, A kindergarten, a bus stand and a market.
Daily commodities are available here. But if anyone is sick or needs medical
attention, it's not available there.
</p>
</body>
</html>

wmGmGm (3)
74
wmwW†Z text align-center.html
• text-align:left Gi gva¨‡g †jLv‡K evgcv‡k cÖ`k©b Ki‡Z cvi‡eb| (Avm‡j Default wn‡m‡e Avgv‡`i
†jLv Ggwb‡ZB evg †_‡K ïi  nq| ZvB GwU e¨envi Kiv Avi bv Kiv mgvb K_v)| AvBwU wi‡j‡UW wewfbœ
B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info|
<!DOCTYPE HTML>
<html>
<head>
div {text-align:left;}
</style>
</head>
<body>
<div>
</div>
<p>
The name of our village is Dimukha. It is in Manikganj district. We have a
primary school, A kindergarten, a bus stand and a market.
</p>
</body>
</html>

wmGmGm (3)
75
• text-align:right Gi gva¨‡g †jLv‡K Wvbw`K eivei cÖ`k©b Kiv hvq|
<!DOCTYPE HTML>
<html>
<head>
div {text-align:right;}
</style>
</head>
<body>
<div>
</div>
<p>
The name of our village is Dimukha. It is in Manikganj district. We have a
primary school, A kindergarten, a bus stand and a market.
</p>
</body>
</html>
wmwW‡Z text align-right.html
• text-align:justify GwU e¨envi Ki‡j Avcbvi †jLv¸‡jv •`N¨© eivei wKQyUv Qwo‡q wM‡q m¤ú~Y© RvqMv `Lj
Ki‡e; †hgbwU Avgiv cwÎKvi †ejvq †`‡L _vwK| cwÎKvq wKš‧ †Kvb Kjvg Gi g‡a¨ †jLv nIqvi ci cv‡k †Kvb
Lvwj RvqMv _v‡K bv| e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv
ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

wmGmGm (3)
76
GB property wU †`L‡Z n‡j Kgc‡¶ `yB ev Z‡ZvwaK div Gi cÖ‡qvRb n‡e| Ges ¯^fveZB ZLb id A_ev
class e¨envi Ki‡Z n‡e| id Ges class Gi Aa¨v‡q we¯—vwiZ Av‡jvPbv Ki‡ev|
AvBwU wi‡j‡UW wewfbœ B-eyK mg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki b http://www.bookbd.info|
GLb Avgiv AvcvZZ AbykxjbxwU PP©v Kwi|
<DOCTYPE! Html>
<html>
<head>
.mango {
height: 250px;
width: 200px;
text-align: justify;
float: left;
border: thin grey solid;
margin:5px;
padding:5px;
}
</style>
</head>
<body>
<div class="mango">
Jackfruit is national fruit of Bangladesh. It has all the essential nutritions we need. When
it is ripen, it looks yellow in color.
It is found all over Bangladesh. Jackfruit is very tasty fruit.
</div>
<div class="mango">
</div>
<div class="mango">

wmGmGm (3)
77
</div>
<div class="mango">
Jackfruit is national fruit of Bangladesh. It has all the essential nutrition we need. When it
is ripen, it looks yellow in color.
</div>
</body>
</html>
Ex-2:
<DOCTYPE! Html>
<html>
<head>
.mango {
height: 160px;
width: 235px;
text-align: center;
float: left;
border: thin grey solid;
margin:6x;
padding:6x;
}
</style>
</head>
<body>
<div class="mango">
</div>
<div class="mango">

wmGmGm (3)
78
</div>
<div class="mango">
</div>
<div class="mango">
Jackfruit is national fruit of Bangladesh. It has all the essential nutrition we need. When it
is ripen, it looks yellow in color.
</div>
</body>
</html>
CD †Z text align-justify.html
e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I
ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

wmGmGm (3)
79
Aa¨vq-10 : TextDecorations
1. wKQz mvaviY HTML U¨vM|
2. mdjfv‡e GKwU iPbv (Article) †jLv|

wmGmGm (3)
80
10.1 t Text Decoration
Text decoration ej‡Z T.N.R m¾v‡K eySvq| A_©vr Avgiv hLb †Kvb †jLv‡K wj¼ wn‡m‡e eënvi Kwi,
ZLb Zvi wb‡P ¯^qswµqfv‡e GKwU `vM (Underline) P‡j Av‡m| wKš‧ Avgiv hLb CSS w`‡q Menu •Zwi
Kie, ZLb Avgiv †gby¨ Gi wb‡P wbðqB `vM †`Lv‡Z PvBe bv| ZLb †mB `vM `~i Kivi Rb¨ Avgv‡ì †U·U
†W‡Kv‡ikb eënvi Ki‡Z n‡e| GiKg AviI A‡bK Kv‡Ri Rb¨ Avgv‡ì †U·U †W‡Kv‡ikb eënvi Ki‡Z n‡e|
wb‡P ch©vqµ‡g G¸‡jv eY©bv Kiv nj| I‡qemvB‡U AwaK cwigv‡Y wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb
AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I
ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|
• Underline: GwU †jLvi wb‡P `vM †`Lv‡bvi Rb¨ eënvi Kiv nq|
<DOCTYPE html>
<html>
<head>
span {text-decoration:underline;}
</style>
</head>
<body>
<p>
<span> Introduction: </span> The cow is an useful animal. It eats grass.
</p>
<p>
<span> Description: </span> It has two eyes, two legs, two ears and two horns.
</p>
</body>
</html>

wmGmGm (3)
81
• line through: Avgiv wewfbœ mgq wewfbœ cÖwZôv‡b ¯ vb cwieZ©‡bi Rb¨ weÁwß †`L‡Z cvB| †mLv‡b Zviv
Av‡Mi wVKvbv †K‡U w`‡q bZyb wVKvbv cÖ`k©b K‡i| †jLv KvUvi Rb¨ Avgiv †hgb gvS eivei GKwU `vM w`‡q
†K‡U †`B; wVK †Zgwb †jLvi gvSeivei `vM †`Lv‡bvi Rb¨ GwU eënvi Kiv nq| I‡qemvB‡U AwaK cwigv‡Y
wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv
ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|
<!DOCTYPE HTML>
<html>
<head>
span {text-decoration:line-through;}
</style>
</head>
<body>
<h1>Our phone no:</h1>
<span> 012-345-678-9 </span>
<p> 345-987-767-1 </p>
</body>
</html>
• None: mvavib Ae¯ vq GwU eënvi Kiv Avi bv Kiv mgvb| Z‡e HTML G hLb Avgiv wj¼ eënvi Kwi,
ZLb Zvi wb‡P ¯^qswµqfv‡e underline P‡j Av‡m| Avgiv hw` wj¼ Gi wb‡P `vM †`Lv‡Z bv PvB, ev †gby ‣Zwi
Kivi mgq underline AcmviY Ki‡Z PvB‡j CSS G text-decoration:none e‡j w`‡Z n‡e|

wmGmGm (3)
82
<!DOCTYPE HTML>
<html>
<head>
span a {text-decoration:none;}
</style>
</head>
<body>
<h1>Menu</h1>
<div>
<a href="#"> Menu one </a>|
<a href="#"> Menu two </a>|
<a href="#"> Menu three </a>|
</div>
<br/>
<span>
<a href="#"> Menu one </a>
</span>
</body>
</html>
• Overline: GwU underline Gi wecixZ| A_©vr underline G †jLvi wb‡P `vM †`Lvq, Avi overline G
†jLvi Dc‡i `vM †`Lvq| GwU †Zgb GKUv cÖ‡qvRb nqbv| Z‡e Avcwb PvB‡j Dc‡ii Abykxjbx‡Z text-
decoration:overline wj‡L †`L‡Z cv‡ib| e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR
Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|
AbykxjbxwU wb‡P †`Iqv nj
<!DOCTYPE HTML>
<html>
<head>
span {text-decoration:overline;}
</style>

wmGmGm (3)
83
</head>
<body>
<p>
<span> Introduction: </span> The cow is an useful animal. It eats grass.
</p>
<p>
<span> Description: </span> It has two eyes, two legs, two ears and two horns.
</p>
</body>
</html>
• Blink: Blink Gi evsjv cwifvlv n‡‪Q †PvL wcU wcU Kiv ev wSKwgK Kiv| Avcwb hw` CSS w`‡q
animation •Zwi Ki‡Z Pvb, Z‡e GwU Avcbvi Rb¨ †ek Kv‡R †`‡e| †Kvb text Gi decoration:blink
eënvi Ki‡j †jLvwU R¡j‡Z-wbf‡Z _vK‡e| GwU A‡bK mgq Header ev Banner •Zwi Kivi Rb¨ eënvi
Kivi Rb¨ eënvi Kiv nq| GwU eënvi Kivi Rb¨ Av‡Mi g‡Zv text-decoration:blink wjL‡jB n‡e| wKš‧
GZ my›ì cÖcvwU© Uv GKgvÎ cÖcvwU© Firefox-GB KvR Ki‡e| Chrome, Safari ev Internet Explorer
GUv‡K mg_©b K‡i bv|
cÖkœce© t
Book Support center-Gi B-†gBj G¨v‡Wªm n‡jv infobook7@gmail.com, hv Avcbv‡ì mKj mgm¨vi mgvavb

wmGmGm (3)
84
Aa¨vq-11: Text Overflow
. Clip Gi e¨envi
. Ellipsis Gi e¨envi

wmGmGm (3)
85
hw` div Gi wfZ‡i †jLv Lvc bv Lvq, Zvi Rb¨ GB property wU eënvi Kiv nq| GLv‡b Avgiv `yBwU value
eënvi Ki‡Z cvie| G¸‡jv n‡‪Q-
11.1 t Clip
GwU eënvi Ki‡j div Gi AwZwi³ †jLv _vK‡j Zv hidden n‡q hv‡e| A_©vr eªvDRvi Zv cÖ`k©b Ki‡e bv|
<html>
<head>
div {
border: black thin solid;
}
.fox {
white-space:nowrap;
width:120px;
overflow:hidden;
text-overflow:clip;
}
</style>
<head>
<body>
<h1> This div is with the actual texts</h1>
<div>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
</div>
<h1> This div is with the clipped texts</h1>
<div class="fox">

wmGmGm (3)
86
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
</div>
</body>
</html>
11.2 t Ellipsis
GwU e¨envi Ki‡j div Gi g‡a¨ hZUyKy cÖ`k©b Kiv m¤¢e Ki‡e| Ges †k‡l wZbwU WU w`‡q eySv‡e †h AviI wKQy
†jLv GLv‡b Av‡Q, wKš‧ cÖ`k©b Kiv m¤¢e n‡‪Q bv| GLv‡b †KvW me GKB _vK‡e| ïay Av‡M †hLv‡b Avgiv text-
overflow:clip wj‡LwQjvg, †mLv‡b text-overflow:ellipsis wjL‡Z n‡e|
<html>
<head>
div {
border: black thin solid;
}
.fox {
white-space:nowrap;
overflow:hidden;
width:150px;

wmGmGm (3)
87
text-overflow:ellipsis;
}
</style>
</head>
<body>
<h1> This div is with the actual texts</h1>
<div>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit
amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit
amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit
amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
</div>
<h1> This div is with the ellipsified texts</h1>
<div class="fox">
Lorem ipsum dolor sit amet Lorem ipsum dolor sit... amet Lorem ipsum dolor sit
amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
</div>
</body>
</html>

wmGmGm (3)
89
Aa¨vq -12: Color
1) color †cÖvcvwU© Gi KvR
2) color †cÖvcvwU †jLvi cÖKvi‡f`
3) wewfbœ cÖKvi color †cÖvcvwU© Gi •ewkó¨ I eënvi †K․kj
4) color Gi Hexadecimal Code mn ZvwjKv
5) Hexadecimal Kvjvi †KvW eënvi
6) RGB Kvjvi †KvW eënvi
7) ïaygvÎ bvg w`‡q Kvjvi cÖ`k©b

wmGmGm (3)
90
12.1 t color †cÖvcvwU© Gi KvR
GB property wU Avcbviv Gi Av‡MB D`vni‡b eënvi Ki‡Z †`‡L‡Qb| GwU Avgiv wewfbœ †jLvi g‡a¨ iO
cÖ`v‡bi Rb¨ eënvi Ki‡ev| G‡Z Avgv‡ì †cR¸‡jv †`L‡Z AviI bv›`wbK n‡e| GLv‡b Avgiv iO Gi bvg
wewfbœ fv‡e w`‡Z cvwi| wb‡P G¸‡jv ch©vqµ‡g eY©bv Kiv nj| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo †bqv
†_‡K ïi  K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L wb‡Z cv‡ib|
• ïay bvg w`‡qt CSS Gi g‡a¨ Avgiv ïay bvg w`‡qI iO eënvi Ki‡Z cvwi| †hgb t red, green, blue,
white, violet BZ¨vw`| Z‡e G‡¶‡Î GKUv wel‡q LyeB mveavb _vK‡Z n‡e; ‡mUv n‡‪Q bv‡gi evbvb| iO Gi
bv‡gi evbvb hw` fyj K‡ib, Zvn‡j eªvDRvi †Kvb iO cÖ`k©b Ki‡e bv|
• RGB value: GwU g~jZt wZbwU †g․wjK iO Gi mgš^‡q MwVZ ixwZ hv‡Z jvj, meyR Ges bxj i‡Oi wgwjZ
gv‡bi wfwË‡Z GKwU wbw`©ó iO cvIqv hvq| GwU †jLvi wbqg n‡‪Q color:rgb (255,0,255) GLv‡b Avcwb
mewb¤§ 0 (k~b¨) †_‡K ïi  K‡i m‡e©v‪P 255 ch©š— gvb eënvi Ki‡Z cvi‡eb| Qwe m¤úv`bvi mdUIq¨v‡i GB
ixwZwU †ek RbwcÖq| Kvib G‡Z LyeB D¾¡j iO cvIqv hvq; d‡j †`L‡ZI AvKl©Yxq g‡b nq| AbjvBb †_‡K
KvR cvIqvi wewfbœ †K․kj m¤ú‡K© we¯—vwiZ Rvb‡Z †jL‡Ki †jLv ÔÔB›Uvi‡b‡U AvZ¥Kg©ms¯ vbÕÕ I ÔÔB›Uvi‡b‡U
AvZ¥Kg©ms¯ vb-1ÕÕ eB `yBwUi mnvqZv wb‡Z cv‡ib|
• Hexadecimal value: GwU †jLvi wbqg n‡‪Q, # RRGGBB †hLv‡b cÖ_g `ywU gvb n‡‪Q jvj i‡Oi,
gv‡Si gvb `ywU n‡‪Q meyR i‡Oi Ges †k‡li gvb `ywU n‡‪Q bxj i‡Oi Gi cÖ_‡g GKwU # (hash) wPý _v‡K| GB
value wU †`L‡Z Ggb nqt Color: # FFFF00 GwU eënvi K‡i Avcwb
255 x 255 x 255= 16 wgwjq‡biI †ewk i‡Oi cÖ‡qvM Ki‡Z cvi‡eb| AviI fvjfv‡e †evSvi Rb¨ wb‡P I‡qe
Rb¨ wbivc` i‡Oi GKwU ZvwjKv †Ìqv nj|

wmGmGm (3)
92
Avcbv‡K G¸‡jv gyL¯  ivL‡Z n‡e bv| G¸‡jv ïay Avcbv‡K iO¸‡jv m¤ú‡K© avibv †`Iqvi Rb¨ †`Iqv n‡q‡Q|

wmGmGm (3)
93
Aa¨vq-13 :Text Shadow
1) Text-Shadow wK?
2) Text-Shadow wKfv‡e Ki‡Z nq|
3) Text-Shadow Qvqvi Ae¯ vb wbY©q Kiv|

wmGmGm (3)
94
13.1 t Text-Shadow
GwU †jLvi wb‡P Qvqv cÖ`v‡bi Rb¨ eënvi Kiv nq| GwU †jLvi wbqg n‡‪Q-
• cÖ_‡g Gi Avbyf~wgK Ae¯ vb (Horizontal space) ej‡Z nq| Gi gvb wc‡·‡j w`‡Z nq|
• Zvici Gi Dj- ¤^ Ae¯ vb (Vertical space) ej‡Z nq| Gi gvb wc‡·‡j w`‡Z nq|
• Gici iO ej‡Z nq| Avi Ab¨vb¨ CSS i‡Oi g‡Zv bvg (red, blue, orange) ev Gi †n·v‡Wwmgvj f¨wjD
(#fff,#099fd5) †Ìqv hvq| Gi gvb wc‡·j G w`‡Z nq| e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm
IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©†cÖmÕÕ eB `ywU c‡o wb‡Z
cv‡ib|
• PvB‡j AviI GKwU ÷vBj eënvi Kiv hvq| GwU Ackbvj| Avcwb PvB‡j eënvi Ki‡eb, cÖ‡qvRb bv _vK‡j
eënvi bv Ki‡jI Pj‡e| GwU n‡‪Q blur ev A¯úó Kivi gvb| GwU wc‡·j G w`‡Z nq| Avi GwU wjL‡Z n‡e
Avbyf~wgK I Dj- ¤^ Ae¯ v‡bi gvb †jLvi ci Ges iO Gi bvg ejvi Av‡M| †hgb t
h1 {text-shadow: 2px 2px 3px orange;}
GLv‡b A¯úóZvi gvb (blur) eënvi Ki‡Z bv PvB‡j 3px ev` w`‡Z n‡e| ZLb GwU Gfv‡e wjL‡Z n‡et
h1 {text-shadow: 2px 2px orange;}
AviI fvjfv‡e †evSvi Rb¨ wb‡Pi AbykxjbxwU PP©v Ki b|
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-family:Arial;
text-shadow: 2px 2px 2px Grey;
font-size:4em;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
95
Abykxjbx t
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-family:Arial;
text-shadow: 5px 8px 10px red;
font-size:4em;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
96
Aa¨vq -14 : Text transform
1) Text-Transform wK?
2) Text-Transform Gi cÖKvi‡f` I e¨envi †K․kj
3) Text-Transform lower case
4) Text-Transform capitalize
5) Text-Transform uppercase

wmGmGm (3)
97
14.1 t Text-Transform
GwU e¨envi Kiv nq †jLv‡K CSS Gi gva¨‡g †QvU nv‡Zi (lowercase) ev eo nv‡Zi (uppercase) Kivi
Rb¨| GB property Gi Aax‡b wZbwU value Avcbvi Kv‡R jvM‡e| G¸‡jv nj-
• Uppercase: Gi gva¨‡g Avcwb HTML G †QvU nv‡Zi/eo nv‡Zi †h‡Kv‡bv ai‡bi A¶i-B wjLyb bv †Kb,
mKj †jLvB eo nv‡Zi A¶‡i cÖ`wk©Z n‡e|
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-transform:uppercase;
}
</style>
</head>
<body>
<p>This is some text.</p>
</body>
</html>

wmGmGm (3)
98
• Lowercase: GwU n‡‪Q Uppercase Gi m¤ú~Y© wecixZ| A_©vr GLv‡b mKj †jLvB †QvU nv‡Zi A¶‡i
cÖ`wk©Z n‡e|
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-transform:lowercase;
}
</style>
</head>
<body>
<p>THERE ARE SOME TEXT</p>
</body>
</html>

wmGmGm (3)
99
• Capitalize: GB property wU e¨env‡ii d‡j ev‡K¨i cÖwZwU k‡ãi cÖ_g A¶i eo nv‡Zi †`Lv‡e|
I‡qemvB‡U AwaK cwigv‡Y wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq|
Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU
Avcbv‡K mvnvh¨ Ki‡e|
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-transform:capitalize;
}
</style>
</head>
<body>
<p>This text is capitalized</p>
</body>
</html>

wmGmGm (3)
101
Aa¨vq-15 : e¨KMÖvDÛ
1) e¨KMÖvDÛ wK?
2) e¨KMÖvDÛ G wK wK eënvi Kiv hv‡e|
3) e¨KMÖvD‡Û is eënvi Kivi †K․kj|
4) c¨vivMÖv‡di e¨KMÖvD‡Û is Gi eënvi|
5) wk‡ivbv‡gi e¨KMÖvD‡Û is Gi eënvi|
6) m¤ú~b© c„óvi e¨KMÖvD‡Û is Gi eënvi|
7) cÖ‡Z¨KwU wfbœ wfbœ wWf Gi Rb¨ e¨KMÖvD‡Û is Gi eënvi|

wmGmGm (3)
102
15.1 t Background
e¨vKMÖvDÛ n‡‪Q †Kvb †cR Gi Lvwj ¯ vb, hv Avgiv GLb ch©š— Lvwj †i‡LwQ Ges Gi is wQj bv (Default
wn‡m‡e mv`v wQj)| GB e¨vKMÖvDÛ A‡bK wKQyi n‡Z cv‡i| GwU m¤ú~Y© c…ôvi, div, †Uwej Gi BZ¨vw` wewfbœ
Gwj‡g›U Gi n‡Z cv‡i| wKš‧ Avgiv GwU‡K GLb †_‡K Avi Lvwj ivLe bv| Kvib Dc‡ii D`vniY¸‡jv j¶¨
Ki‡j eyS‡Z cvi‡eb †h †m¸‡jvi meB wQj mv`vKv‡jv| ZvB G¸‡jv‡K AviI `…wó b›`b Ki‡Z Avgiv e¨vKMÖvDÛ
eënvi Ki‡ev|
e¨vKMÖvDÛ‡K ÷vBwjs Gi Rb¨ Avgiv wewfbœ is, Qwe BZ¨vw` eënvi Ki‡Z cvwi| is eënvi Ki‡j †Kvb mgm¨v
†bB| Z‡e e¨vKMÖvDÛ wn‡m‡e hw` Avgiv Qwe eënvi Ki‡Z PvB, †m wel‡q GKUy mveavbZv Aej¤^b Ki‡Z n‡e|
e¨vKMÖvDÛ m¤úwK©Z mewKQy wfZ‡i we¯—vwiZ Av‡jvPbv Kiv n‡q‡Q|
15.2 t Background color
GwU Avgiv †hB U¨vM ev Gwj‡g›U Gi Rb¨ wba©viY K‡i wè, wVK †mLv‡bB KvR Ki‡e| GwU h1, p, div, table,
span mn †h‡Kv‡bv U¨vM Gi wfZ‡iB †jLv hvq| wb‡P Avgiv GKwU D`vniY †`wL|
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
</style>
</head>
<body>
<h1>Tanvir Ahmed</h1>
<p>Portfolio Website:www.metanvir.weebly.com</p>
</body>
</html>

wmGmGm (3)
103
GLv‡b j¶¨ Ki b, Avgiv heading Gi Rb¨ Avjv`v is Ges paragraph Gi Rb¨ Avjv`v is eënvi K‡iwQ|
wKš‧ GLv‡b CSS property wKš‧ GKUvB eënvi K‡iwQ| hw` Avgiv heading ev paragraph Gi Rb¨ Avjv`v
Avjv`v background color eënvi Ki‡Z PvB, Zvn‡j Avgv‡ì Avjv`v Avjv`v K‡i e‡j w`‡Z n‡e| wKš‧
Avgiv hw` Avjv`v Avjv`v iO eënvi bv K‡i m¤ú~Y© c…ôvi Rb¨ GKUvB is eënvi Ki‡Z PvB, Zvn‡j GB
background color property wU eënvi Ki‡Z n‡e body U¨vM Gi g‡a¨| GwU wKš‧ `yB fv‡e Kiv hvq|
HTML I CSS †_‡K| Z‡e †ewkifvM †¶‡Î CSS †_‡KB Kiv nq| Gevi Avgiv †`Le wKfv‡e CSS †_‡K
wKfv‡e background color eënvi Ki‡ev| e- wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR
Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);

wmGmGm (3)
104
}
</style>
</head>
<body>
</body>
</html>
GLv‡b Avcbv‡`i †evSvi myweavi Rb¨ †Kvb wKQy cwieZ©b Kiv nqwb| ïaygvÎ body Gi Rb¨ GK jvBb ÷vBj
hy³ Kiv n‡q‡Q| Avcbviv PvB‡j GwU bZyb K‡i wb‡R‡`i B‪Qvg‡Zv wjL‡Z cv‡ib| Avevi PvB‡j Av‡Mi
Abykxjbx‡Z GLv‡bi AwZwi³ GKwU jvBb hy³ Ki‡Z cv‡ib|
Gevi AviI fvj fv‡e †evSvi Rb¨ Avgiv AviI GKwU Abykxjbx PP©v Ki‡ev|
<!DOCTYPE html>
<html>
<head>
<style>
body
{background-color:tan;
Color:blue;}
</style>
</head>
<body>

wmGmGm (3)
105
<center>
</center>
</body>
</html>
cÖkœce© t
Book Support center-Gi B-†gBj A¨v‡Wªm n‡jv infobook7@gmail.com, hv Avcbv‡`i mKj mgm¨vi mgvavb

wmGmGm (3)
107
Aa¨vq-16: Background Image
. e¨KMÖvD‡Û Qwe e¨envi
. e¨KMÖvD‡Û Qwe e¨envi Kivi †K․kj

wmGmGm (3)
108
16.1 t e¨KMÖvD‡Û Qwe eënvi
Avgv‡ì mvaviY c`©vi AvKvi (Normal Screen size) n‡‪Q 14 †_‡K 21 BwÂ| Avi †mB wn‡m‡e Avgv‡ì H
AvqZ‡bi GKwU Qwei cwigvb n‡e cÖvq 500 wK‡jvevBU n‡Z 10 †gMvevBU ev Zvi †P‡qI †ewk| wKš‧ †h‡nZy
Avgiv evsjv‡`‡k KvR Ki‡ev (A‡bK mgq evB‡ii K¬v‡q›UivI mvBU `ª Z †jvW nIqvi Rb¨ †QvU mvBR cQ›`
K‡i/ AcwUgvBRW Pvq) ZvB Avgv‡ì GiKg eo dvBj e¨venv‡ii Av‡M 2 evi wPš—v Ki‡Z n‡e| KviY Avgv‡ì
†`‡k B›Uvi‡bU Gi MwZ LyeB axi| ZvB G ai‡bi dvBj m¤^wjZ mvBU †jvW n‡Z Kgc‡¶ 30 †m‡KÛ jvM‡e|
Avi †Kvb eënviKvix G ai‡bi mvBU KL‡bvB ågb (Browse) Ki‡e bv| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z
nv‡ZLwo †bqv †_‡K ïi  K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L
wb‡Z cv‡ib|
Avi GRb¨B CSS G i‡q‡Q hyMvš—Kvix mgvavb| wb‡Pi Qwe¸‡jv j¶¨ Kwi|
Image size 328 kb Image
size-
3kb

wmGmGm (3)
109
cÖ_g QwewU j¶¨ K‡i †`Lyb, GB QwewU mvB‡R h‡_ó eo| wKš‧ Zvi Zyjbvq cv‡ki QwewU G‡Kev‡i Aí mvB‡Ri|
GLb Avcbvi g‡b n‡Z cv‡i, GB mi  Qwe w`‡q wK n‡e ?
Avm‡j Avgiv †Póv Ki‡ev m¤ú~Y© e¨vKMÖvD‡Û Av¯— GKwU Qwe eënvi bv K‡i, Gi †h‡Kv‡bv GKav‡ii †QvÆ GKwU
Ask eënvi Kivi| G‡Z K‡i †hgb Avgv‡ì Hosting G RvqMv Kg jvM‡e, †Zgwb †cR Gi mvBR I K‡g
Avm‡e| d‡j `ª Z †jvW n‡e|
Dc‡ii eo QwewU‡K Avgiv mn‡RB gvB‡µvmdU †cB›U †cÖvMÖv‡gi mvnv‡h¨ j¤^vjw¤^ fv‡e †K‡U wb‡Z cvwi| Avevi
†¶Î we‡k‡l Avgiv AvovAvwo ev j¤^vjw¤^ †K‡U wb‡Z cvwi| Zvici H mi  QwewU‡K f~wgi mgvš—iv‡j
(Horizontaly) ev Dj- ¤^fv‡e (Verticaly) cybive„wË NUv‡Z (repeat) cvwi| Z‡e Gi Rb¨ Avevi Av‡iKwU
cÖcvwU© eënvi Ki‡Z n‡e; background-repeat:{repeat-x; A_ev repeat:y}
GwU †jLvi wbqg n‡”Q t
background-image:url (Ôgreen.jpgÕ);
GLv‡b url Gi wfZ‡i QwewU †h bv‡g Av‡Q Ges Zvi mwVK G·‡Ubkb (†hgb t .jpg .png .gif) wjL‡Z n‡e|
Z‡e G‡¶‡Î †Lqvj ivL‡Z n‡e †h, HTML dvBjwU †h †dvìvi G _vK‡e, †mB GKB †dvìv‡i hw` QwewU _v‡K,
Z‡e ïay bvg wjL‡jB n‡e| bq‡Zv QwewUi m¤ú~b© cv_ wjL‡Z n‡e| †hgb t
background-image:url (Ôimages/backgrounds/green.jpgÕ)

wmGmGm (3)
110
Aa¨vq-17: Background Position
1) e¨KMÖvD‡Ûi Ae¯ vb wba©vib|
2) background position: center center
3) background position: center top
4) background position: center bottom
5) background position: right bottom
6) background position: right top
7) background position: right center
8) background position: left center
9) background position: left top
10) background position: left bottom
11) % / inch / pixel / em / e¨envi K‡i e¨KMÖvD‡Ûi Ae¯ vb wbY©q|

wmGmGm (3)
111
17.1 t e¨KMªvD‡Ûi Ae¯’vb wba©vib
GwU eënvi Kiv nq e¨vKMÖvD‡Û †Kvb Qwe‡K hw` Avgiv GKeviB †`Lv‡Z PvB Ges GwU‡K †cR Gi wbw`©ó †Kvb
¯ v‡b †`Lv‡Z PvB| Z‡e †m‡¶‡Î AviI GKwU property eënvi Ki‡Z n‡e Ges †mwU n‡‪Q
background-attachement:fixed
GwU eënvi bv Ki‡j Opera Ges Firefox G KvR Ki‡e bv| Avi B›Uvi‡bU G·‡c- vivi G KvR Kiv‡Z PvB‡j
Zvi Rb¨ ! DOCTYPE e‡j w`‡Z n‡e G‡Kev‡i WKz‡g›U Gi Dc‡i|
GLv‡b Avgiv ¯ vbwU‡K (Position) wewfbœfv‡e wba©viY Ki‡Z cvwi| †m¸‡jv ch©vqµ‡g wb‡P eY©bv Kiv nj|
I‡qemvBU wWRvBb Kivi Rb¨ Avcbvi me©cÖ_g cÖ‡qvRb n‡e GBPwUGgGj †kLvi| Avi GBPwUGgGj j¨vs¸‡qR
m¤ú‡K© cwic~Y© Ávb AR©b Kivi Rb¨ †jL‡Ki ÔÔGBPwUGgGj-5ÕÕ eBwU c‡o wb‡Z cv‡ib|
• ïay bvg eënvi K‡it background-position: †jLvi ci, Avgiv GLv‡b wewfbœ ¯ v‡bi bvg e‡j w`‡Z cvwi|
†hgbt
17.2 t background position: center center
G‡Kev‡i wVK gvSLv‡b †`Lv‡bvi Rb¨ {background-position:center center}
<html>
<head>
body {
background-image:url(Images/green.gif);
background-position:center center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using a centered image here
</body>
</html>

wmGmGm (3)
112
GLv‡b GKwU AwZwi³ U¨vM eënvi Kiv n‡q‡Q hv background-repeat:no-repeat; GwU ïaygvÎ Avgv‡ì
eënvi Kiv QwewU‡K ¯^qswµqfv‡e cybive„wË nIqv †_‡K †iva Ki‡e|
17.3 t background position: center top
gvSLv‡b Dc‡i †`Lv‡bvi Rb¨ {background-position:center top}
<html>
<head>
body {
background-position:center top;
}
</style>
</head>
<body>
We are using a image here
</body>
</html>

wmGmGm (3)
113
17.4 t background position: center bottom
gvSLv‡b Wv‡b †`Lv‡bvi Rb¨ {background-position:right center}
<html>
<head>
body {
background-position:right center;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
114
17.5 t background position: right bottom
gvSLv‡b wb‡P †`Lv‡bvi Rb¨ {background-position:center bottom}
<html>
<head>
body {
background-position:center bottom;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
115
17.6 t background position: right top
Dc‡i Wv‡b †`Lv‡bvi Rb¨ {background-position:right top}
<html>
<head>
body {
background-position:right top;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
116
17.7 t background position: right center
Wv‡b wb‡P †`Lv‡bvi Rb¨ {background-position:right bottom}
<html>
<head>
body {
background-position:right bottom;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
117
17.8 t background position: left center
evgcv‡k gvSLv‡b †`Lv‡bvi Rb¨ {background-position:left center}
<html>
<head>
body {
background-position:left center;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
118
17.9 t background position: left top
evgcv‡k Dc‡i †`Lv‡bvi Rb¨ {background-position:left top} (GwU Avm‡j default ¯ vb| ZvB e¨envi
Kiv bv Kiv mgvb K_v|)
<html>
<head>
body {
background-position:left top;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
119
17.10 t background position: left bottom
evgcv‡k wb‡P †`Lv‡bvi Rb¨ {background-position:left bottom}
<html>
<head>
body {
background-position:left bottom;
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
120
17.11 t % / inch / pixel / em / eënvi K‡i e¨vKMÖvD‡Ûi Ae¯’vb wbY©q|
% eënvi K‡i t GB % eënvi Ki‡Z n‡j Avcbv‡K x Ges y A¶ eyS‡Z n‡e| Avi GB x Ges y A¶
m¤ú‡K© ¯úó avibv _vK‡j Avcwb mvg‡b positioning Ges margin mn‡RB eyS‡Z cvi‡eb|
y
-x x
-y
x w`‡q eySvb nq horizontal axis ev Avbyf~wgK A¶| GwU fywg †hB mgvš—iv‡j Av‡Q, †mB eivei KvR K‡i|
Avi y w`‡q †evSv‡bv nq, vertical axis ev Dj- ¤^ A¶| GwU Lvovfv‡e gvc †Ìqvi Rb¨ eënvi Kiv nq|
AZGe Avcwb Gevi wbðqB x Ges y A¶ m¤ú‡K© avibv †c‡q‡Qb| GB x Ges y A¶ eënvi K‡i Avgiv
†h‡Kv‡bv Qwe Ges div †K Avgv‡ì B‡‪Q g‡Zv RvqMvq wb‡Z cvie|
†Zv †hLv‡b wQjvg, % eënvi K‡i Qwe‡K wbw`©ó ¯ v‡b emvb| GwU †jLvi dig¨vU n‡‪Q
background-position:50% 50%;

wmGmGm (3)
121
GLv‡b cÖ_‡g wjL‡Z n‡e x A‡¶i gvb| Zvici y A‡¶i gvb|
<html>
<head>
body {
background-image:url(Images/css3.jpg);
}
</style>
</head>
<body>
We are using numerick values here
</body>
</html>
wUcmt % eënvi Kivi me‡P‡q eo myweav n‡‪Q, Avcwb Avcbvi I‡qe †cR 14 BwÂ gwbUi G Pvjy Ki b, Avi
56 BwÂ gwbUi G Pvjy Ki b bv †Kb, Avcbvi Qwe Gi cwRkb GK`g wVKVvK †`Lv‡e| wKš‧ wc‡·j eënvi
Ki‡j GB myweavwU cv‡eb bv|
ai b, Avcwb wc‡·j ev Ab¨ †h‡Kv‡bv †¯‥j G GKwU gvc wjL‡jb 10, Z‡e H †cRwUi gvc GKwU 14 BwÂ
gwbU‡i nq‡Zv wVKVvKB †`Lv‡e| wKš‧ wPš—v Ki b, †mB GKB †cR hw` GKwU U¨ve‡jU G I‡cb Kiv nq, Z‡e
eënviKvix scroll Ki‡Z Ki‡Z wei³ n‡q hv‡e| mnR I ¯^í mg‡q †cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv
wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|
Gevi hw` H GKB †cR hw` GKwU 56 BwÂ gwbUi G †KD Pvjy K‡i, Z‡e Zv GK †Kvbvq R‡g _vK‡e| Kvib 2
BwÂ †Zv meRvqMv‡ZB 2 BwÂ| Zv‡K †Zv Avi AbycvZ Abyhvqx cwieZ©‡bi AbygwZ †Ìqv nqwb| ZvB Avcbv‡K
mKj wWfvBm Gi K_v gv_vq †i‡LB KvR Ki‡Z n‡e|

wmGmGm (3)
122
• Ab¨vb¨t Qwe ev div †K mwVK Ae¯ v‡b Avbvi Rb¨ GwU me‡P‡q RbwcÖq c×wZ| GB c×wZwU‡ZI Av‡Mi g‡Zv
cÖ_‡g X Ges c‡i Y A‡¶i Rb¨ Avgiv px (wc‡·j), em, mm (wgwjwgUvi), in (BwÂ), cm (†mw›UwgUvi)
BZ¨vw` unit e¨envi Ki‡Z cvie|
<html>
<head>
body {
background-position:100px 20px;
}
</style>
</head>
<body>
</body>
</html>
<html>
<head>
body {
}
</style>
</head>
<body>
</body>
</html>

wmGmGm (3)
123
Aa¨vq-18: Background Repeat
1)e¨vKMÖvDÛ wiwcU wK?
2) e¨vKMÖvDÛ wiwcU †Kb e¨envi Kiv nq|
3) e¨vKMªvDÛ wiwc‡Ui e¨envi †K․kj|
4) background repeat: x
5) background repeat: y
6) background repeat: repeat
7) background repeat: no-repeat

wmGmGm (3)
124
18.1 t e¨vKMÖvDÛ wiwcU wK?
GwU m¤ú‡K© Av‡M wKQyUv Av‡jvPbv K‡iwQjvg| GB property wU eënvi bv Ki‡j eªvDRvi ¯^qswµqfv‡e m¤ú~Y©
c`©v Ry‡o QwewUi cybive…wË (repeat) K‡i _v‡K| Gfv‡e Avgiv Avgv‡ì Pvwn`v g‡Zv Kv‡Ri myweav‡_© GB
property wU eënvi Ki‡ev| GwU †jLvi wbqg n‡‪Q t
{background-repeat:repeat}
18.2 t background repeat: x
repeat-x : GwU QwewU‡K Avbyf~wgKfv‡e cybive„wË Ki‡e|
<html>
<head>
div {
border: 1px black solid;
height: 300px;
width: 600px;
background-image:url(Images/picture.jpg);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h3>
This is the actual image
</h3>
<img src="Images/picture.jpg"/>
<br/>
<div>
<br/> <br/>
This is how it looks when we repeat
</div>
</body>
</html>

wmGmGm (3)
125
<html>
<head>
div {
border: 3px green dotted;
height: 250px;
width: 500px;
background-repeat:repeat;
}
</style>
</head>
<body>
<h3>
</h3>
<br/>
<div>
<br/> <br/>

wmGmGm (3)
126
</div>
</body>
</html>
<html>
<head>
div {
border: 2px blue dashed;
height: 300px;
width: 600px;
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h3>
</h3>
<br/>
<div>
<br/> <br/>
</div>
</body>
</html>
GLv‡b GKwU div e¨envi Kiv n‡q‡Q ïay Avcbv‡`i †evSvi myweavi Rb¨| Avcbviv PvB‡j div Gi cwie‡Z©
body wjL‡Z cv‡ib| G‡Z K‡i QwewU m¤ú~Y© c…ôv Ry‡o cÖ`wk©Z n‡e| me‡P‡q RbwcÖq gv‡K©U‡c- m I‡W¯‥ G KvR
Kivi me †K․kj AvqË¡ Ki‡Z †jL‡Ki ÔÔI‡W¯‥ A¨vÛ AvDU‡mvwm©sÕÕ eBwU msMÖn K‡i wb‡Z cv‡ib|

wmGmGm (3)
127
18.3 t background repeat: y
repeat-y: GwU QwewU‡K Dj- ¤^fv‡e cybive„wË Ki‡e|
<html>
<head>
div {
height: 300px;
width: 600px;
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h3>
</h3>
<br/>
<div>
         
</div>
</body>
</html>

wmGmGm (3)
128
18.4 t background repeat: repeat
repeat: GwU QwewU‡K m¤ú~Y© c`©v Ry‡o cybive„wË Ki‡e|
<html>
<head>
div {
height: 300px;
width: 600px;
background-image:url(Images/wood.jpg);
background-repeat:repeat;
}
</style>
</head>
<body>
<h3>
</h3>
<img src="Images/wood.jpg"/>
<p>This is how it looks when we repeat</p>
<div></div>
</body>
</html>

wmGmGm (3)
129
18.5 t background repeat:no-repeat
no-repeat : GwU QwewU‡K cybive„wË nIqv †_‡K †iva Ki‡e|
<html>
<head>
body {
background-image:url(Images/wood.jpg);
}
</style>
</head>
<body>
We are using an image here
</body>
</html>

wmGmGm (3)
131
Aa¨vq-19: Background Size
1. e¨vKMÖvDÛ mvBR wK?
2. e¨vKMÖvDÛ mvBR e¨env‡ii †K․kj|
3. background size: cover / contain
4. Background size: % / px w`‡q|

wmGmGm (3)
135

Css bangla-e-book-tutorial css3

More Related Content

What's hot (20)

Similar to Css bangla-e-book-tutorial css3 (20)

Recently uploaded (20)

Css bangla-e-book-tutorial css3