CSS - Bangla Tutorial E-Book

:
, , ! " #
$% $ & ' '( )* +& , % ,& ) + &, ". ,
/ +& . 0 . 1) 2 3
45% . %' & 6 7 2 8 "
' ........ !
26 ; 1&6 7. , , 1&6 7. < 26 ; 6 3 , .' = .' 3
, < . . 26 ; 3 , 0 > ! /0 < , 1& > 60 . ,
, 26 ; 1&6 7,6 , . 0? . @ < 1 > A B! /0 ,
6 6 C , D ' 6 E F , !G 0 G % ' . , , % 7
% % HC , D 0 < % 0 > '. , , IH / 6
.& ) , & J 1 & >& 1' 6 > +&. 6
CSS $ & C >&' M 6 <& J CSS %M .% 0 HTML R

' > </ H , ’> CSS )* 0 1 T U .% 0 > % 0? @ ) / %
/ % CSS )* %6 &, ) > R VW / H , W '
2 & XYY $% $ & ,& >&' CSS ! $ & T $ & ,& C

>& %Z [ ! 0 >& 6 ! .% , %( < ' / > , . , )1 ' 6>
CSS $ & , J 0 > > & ' .% , U 0 . T 2 )$ %J 3
3 , \ & 6) ' , %0 J < % code % %0 J %a
file Save as h File name: index.html , Save as type : All files, , & save index.html
3 Mozilla Firefox , & open 6> J 0 > >&' & ' J
>& = ) < % % 0. ,t 6 ,< . W ' JT ) 0
RM H C 3u > 0 > >&' ! 3u %v+ ) ) %( > .% %

%v+ 3u J$ J w
M %x 6 $ & %( $% h .% .% y % & 6 % '( 6 %
, $% M %x % & 6 2 % J H& 1 $% h
.% M %x % & 3 6
. ! J$ J. J W ' ! > 0 +& % % R$ +& '

. , <& 2 . , . . < ' +& $ & C .% ,
$%> , % 02& .% , ,&, > 6 1
J$ J %( 0 .% ! 0/ 0 , CONTACT US
X. ?
Cascading Style Sheet ! | 5% > 7 CSS । > )+& < & % )* $% , 1= , . ,. Z , G ,
!, 1 0 , / H > } > 7 CSS ।
2& ?
& ' 6 ~/ x HTML , & <& J > । &
J <& % )* 3u , , )* ,
% %Z [ 0 • $€ , !2& & !6 U > !2 %
2 $% , 0 . , . ,) , / H > 6 '
2 "& , ! & % 0% 6, <& XYYY /
/ % > < x CSS •‚ 0 > J RM H >&
0 > C )1
ƒ. „
CSS /0 HTML E C <& % )* ! ,W 1= , . , . Z , G , !, 1

0, / H >& HTML E C <& % ! ,W) … 0 „ 0 > >&
CSS & / H „ 0 > >& T /0 $ † 6 10 > 7 ....
01 „
h „
. J „
01 „
CSS <& % ! ,W) … 06 HTML 0 1 M> 0 > >& 01 „

6
• body{background: #FC9;
• font-family: Tahoma;
• color: #F60;}
2 „
<html>
<head>
<title> Selectors</title>
</title>
<style>
body{background: #FC9;
font-
font-family: Tahoma;
color: #F60;}
</style>
</head>
<body >
<marquee>
<marquee>
<h1>www.tutohost.com</h1>
</marquee>
</body>
</html>
body {background: #FC9; font-family: Tahoma; color: #F60;} body 0 1 „

˜. h „
CSS <& % ! / $% , ,W) … 0 %™ h „
/ $% , h „ E … 6 &, J! % H š
> 60
6 <p class="mar"> 24 / 7 Support</p> 0 css J
.mar{color: #C03;
font-size:36px}
h „ , 0 HTML 0 1 /0 class <& J- 0 > >& % … ,&J =

) h >& 6 <p class="mar">। mar h a h … J (.)
… 0 > >&
2 „
<html>
<head>
<head>
</title>
<style>
body{background: #FFC}
.post{color:#066;
font-
font-family:Tahoma;
text-
text-align:justify;}
.mar{color: #C03;
font-
font-size:36px}
</style>
</head>
<body >
<p class="post">
We are bangladeshi Hostgator hosting

hosting provider. The world wide technical and support team
is working for your best movement. </p>
<p class="post">
We are dedicated with client requrement. You can host your huge data of your company
with our secured and hacking proof server. We are taking care
care of more than 1000
bangladeshi websites and their huge information.
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
%0 J open $% code file Save as h File

name: index.html , Save as type : All files, , & save index.html 3 Mozilla Firefox , & open
2, ' ,
2 „ ¥+H
<p class="post"> /0 %0 • 3 0 post h / H >&'

<p class="post"> /0 % %0 • 3 0 post h / H >&'
.post{color:#066;
font-family:Tahoma;
/0 post / h 6; $)& %0 • 3 0a / H >&'
<p class="mar"> /0 %0 • 3 0 mar h / H >&'
.mar{color: #C03;
font-size:36px}
/0 mar / h 6; %0 • 3 0a / H >&'
¦.. J „
CSS <& % ! $% , ,W) … 2& %™ . J „ /
$% , h „ . J „ E … 6&
6 <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide
technical and support team is working for your best movement. information. </p> 0
css J
#post1{color:#066;
font-family:Tahoma;
. J „ , 0 HTML 0 1 /0 id <& J- 0 > >& % … ,&J =

h ) >& 6 <p id="post1">। post1 . J a . J … )#)
… 0 > >&
2 „
<html>
<head>
</title>
<style>
#post1{color:#066;
font-
font-family:Tahoma;
family:Tahoma;
text-
#post2{color: #639;
font-
font-family:Tahoma;
text-
#mar{color: #C03;
font-
font-size:36px}
</style>
</head>
<body >
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical
technical and support team
is working for your best movement.
</p>
<p id="post2">
with our secured and hacking proof server. We are taking care of more than 1000
bangladeshi websites
websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>

2, ' ,
2 „ ¥+H
<p id="post1"> /0 %0 • 3 0 post1 . J / H >&'

<p id="post2"> /0 % %0 • 3 0 post2 . J / H >&'
#post1{color:#066;
font-family:Tahoma;
/0 post1 / . J6; %0 • 3 0a / H >&'
#post2{color: #639;
font-family:Tahoma;
/0 post2 / . J6; %0 • 3 0a / H >&'
§. J %™
6 2• 0 J 0 > J! >&
02 ) J > $ € % ! a J3¨ J notepad
0 > 6 % ! ( / % 0 J) w J > Dreamweaver
0 > > >&6
Syntax
syntax , ! ); 6 Selector ! Declaration ।
Selector ! 01 „ > HTML 0 1 h „ > HTML 0 1 h . J „

> HTML 0 1 . J
2 Declaration property ! value
2 „
<html>
<head>
<title> Syntax</title>
</title>
<style>
#post1{color:#066;
font-
font-family:Tahoma;
text-
#post2{color: #639;
font-
font-family:Tahoma;
text-
#mar{color: #C03;
font-
font-size:36px}
</style>
</head>
<body >
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team
</p>
<p id="post2">
with our secured and hacking
hacking proof server. We are taking care of more than 1000
bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>

2, ' ,
ª. !
6; +& Tv«%M H
6; 0 %™ &' 6
• JJ a
• a -
• a
JJ a
%™ <head>………….</head> /0 <style>..</style> a 01 0 > >& ! <style>….</style>

/0 02& & Selector ! Declaration M> >& 6
<style>
.post{color:#066;
font-family:Tahoma;
</style>
JJ a a < >&
2 „
<html>
<head>
</title>
<style>
.post{color:#066;
font-
font-family:Tahoma;
text-
</style>
</head>
<body >
<h1>www.banglaebookdownload.com</h1>
<p class="post">
The Ultimate collection of bangle ebooks </p>

</body>
</html>

2, ' ,
®. a
%™ 02& & Selector ! Declaration M> . , • ‚ >& ! •‚ a
style.css 5% save >& <head>………….</head> /0 <link rel="stylesheet"
type="text/css" href="css.css"> 6; a ! C >&
2 „
HTML Code
<html>
<head>
</title>
<link rel="stylesheet" type="text/css" href="css.css">

</head>
<body >
<p class="post">
class="post">
</body>
</html>
name: index.html , Save as type : All files, , & save >
CSS Code
.post{color:#066;
font-
font-family:Tahoma;
text-
a style.css save index.html 3 Mozilla Firefox , & open 2, '

,
a 0 > $ ¯
6 <& / ! % J >& x a 0 > 2 % 0

. , a 2& >& ¯6 <& / ! % J a
0 > $ ¯
°. a -
%™ 2 0 1 $ > style $ 6; /0 0
2& & Declaration M> 6; >& 6 <p style="color:#066; font-
family:Tahoma; text-align:justify;">
2 „
HTML Code
<html>
<head>
</title>
</head>
<body >
<p style="color:#066; font-

font-family:Tahoma; text-
text-align:justify;">
</body>
</html>

2, ' ,
a 0 > -$ ¯
<& % J C 06 a JJ a a
x + HTML 0 1 a / H 0 a 0 > $ ¯
±. 0 • $€ (Background)
<& % )* $% , 6 Body, Pragaph, Table 0 , 0 0 • $€ % > 6 $% , $% ,

M> 0 • $€ > 0 > ´ 6&
0 • $€ > 0 >
0 • $€ > 0 > 0 Declaration > % background:#900; background-color:#900; । 6

body{ background-color:#900; } ।
0 • $€ > 0 >
0 • $€ > 0 > 0 Declaration > background:url(../images/4.png);।
6 :body{background:url(../images/4.png);}
0 • $€ > 0 > x. & +& Declaration $† >& T >7
• 0 • $€ % )Background repeatation )
• 0 • $€ % )Background position )
• 0 • $€ u )Background attachment )
0 • $€ %
0 • $€ 0 µ > , 0 0 • $€ % 0 > >& 6 , % 0 • $€ (

% >& > Declaration > background-repeat:repeat; 6 , x 0 >
>& > Declaration > background-repeat:no-repeat ; 6 , X- % >&
> Declaration > background-repeat:repeat-x ; Y- % >& >
Declaration > background-repeat:repeat-y ; । 6 body { background: url(images/4.png); background-
repeat:repeat-x;} । 6 , body { background: url(images/4.png); } ) Declaration >& > % 0 • $€
( % >
0 • $€ %
0 • $€ G & > , 0 0 • $€ % 0 > >& 6 ,
>& > Declaration > background-position:left ; left G right, center, bottom, top 0, >
% 6, $% , >& > Declaration > background-position:top-left; ।
0 • $€ u
0 • $€ % 0 0 $% , • ! > 2 0 0 • $€ u 0 >
>& 0 • $€ % 0 0 $% , • ! 0 Declaration > background-
attachment:scroll ; । / H ' $† 0 • $€ % 0 0 $% , • ! >&
0 • $€ % 0 0 $% , • ! 0 Declaration > background-attachment: fixed;
।
2 „
<html>
<head>
</title>
<style>
body{ background: url(../images/bg.png); background-
background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-
margin-left:50px;}
h1{ margin-
margin-top:50px; color:#C00}
</style>
</head>
<body >
<p id="post1">
We are bangladeshi Hostgator hosting
hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
Book Credit ► BanglaeBookDownload.com <br />
</p>
</body>
</html>

2, ' ,
XY.
XY. (Text)
<& 2/ $% , >7 }@6 Z ™ 0 ! + ' / %

0 css /0 a C >& a C 0
& +& Declaration $† >& T >7
• )Text Color)
• u )Text Alignment)
• J (Text Decoration)
• w3 )Text Transformation)
)Text Color)
. / H HTML /0 0 > 0 <P>, <h1>,<h2>,<a> > . ' 01 0 >
/ H 0 Declaration > p { color: #FC9 } 5% p G 0 0 0 1 x h1, h2
, a, body, 0 1 id class % / H 0 / H Declaration > %
6
p { color: #FC9}
p {color:blue;}
p {color:rgb(255,0,0);}
2 „
<html>
<head>
<title> www.tutohost.com</title>
</title>
<style>
body{background:#090}
h1{color:#C00;}
p{color:blue;}
.mar{color:rgb(150,0,0); font-
font-size:25px;}
</style>
</head>
<body >
<p>
We are bangladeshi Hostgator hosting provider.<br />
Book Credit:
Credit: BanglaeBookDownload.
BanglaeBookDownload.com <br />
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
2, ' ,
XX.
XX. u )Text Alignment)
<& % 0 u 0 > >& % % 0 Declaration
> text-align:left; 5%) J % 0 Declaration >
text-align:right; /0G 0 Declaration > text-align:center; । 6 ,
2 . > Declaration > text-
align:justify ।
2 „
<html>
<head>
</title>
<style>
#right{text-
#right{text-align:right;}
align:right;}
#left{text-
#left{text-align:left;}
#center{text-
#center{text-align:center}
#justify{text-
#justify{text-align: justify;}
</style>
</head>
<body >
<h2>Example of right align </h2>
<p id="right">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator
/>Hostgator hosting provider.
</p>
<h2>Example of left align </h2>
<p id="left">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of center align </h2>
<p id="center">
We are bangladeshi
bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of justify align </h2>
<p id="justify">
We are bangladeshi Hostgator hosting provider.
</p>
</body>
</html>

2, ' ,
Xƒ.
Xƒ. J (Text Decoration)
HTML <a> 0 1 /0 ! 6; ¹
. $; ¹ G ? 0, J 0 > >& ¹
$% G ,& 0 Declaration > text-
decoration:overline;। ¹ /0G G ,& 0 Declaration
> text-decoration:line-through; । ¹ G ,& 0
Declaration > text-decoration:underline; %6&" ) ,Z 0 !
,Z 0 0 Declaration > text-decoration:blink; ¹ RM H5 %
,M 0 Declaration > text-decoration:none;।
2 „
<html>
<head>
</title>
<style>
h3 {text-
{text-decoration:overline;}
h4{text-
h4{text-decoration:line-
decoration:line-through;}
h5{text-
h5{text-decoration:underline;}
h6 {text-
{text-decoration:blink;}
#none{text-
#none{text-decoration:none}
</style>
</head>
<body >
<h3>This is an example of overline</h3>
<h4>This is an example of line
line-through</h4>
<h5>This is an example of underline</h5>
<h6>This is an example of blink</h6>
<a href="www.tutohost.com"id="none"><h2>This is a link and an example of text-
text-decoration
none </h2></a>
</body>
</html>

2, ' ,
X˜.
X˜. w3 )Text Transformation)
?)M ; M> ( > ' > 2 º 2 (> 5% ? 0

w3 0 > >& ?)M ; ( > 5% ? 0 Declaration
> text-transform:uppercase; ' > 5% ? 0 Declaration > text-transform:lowercase;
2 º 2 (> 5% ? 0 Declaration > text-transform:capitalize; ।
2 „
<html>
<head>
</title>
<style>
p.uppercase {text-
{text-transform:uppercase;}
p.lowercase {text-
{text-transform:lowercase;}
p.capitalize {text-
{text-transform:capitalize;}
</style>
</head>
<body >
<p class="uppercase">This
class="uppercase">This is an example of uppercase.</p>
<p class="lowercase">This is an example of lowercase.</p>
<p class="capitalize">This
class="capitalize">This is an example of capitalize ( BanglaeBookDownload.com)</p>
BanglaeBookDownload.com)</p>
</body>
</html>

2, ' ,
X¦.
X¦. 3u )Font)
<& 2/ $» 0 >7 0 > 2& & 0 2,
<& 0 2, x 2/ )M % &
/ H 0 > > , . . Z > ' &¼ >&
3u /0 3u a C 0 & +&
Declaration $† >& T >7
• 3u 30 )Font family)
• 3u )Font size)
• 3u ) &u )Font variant)
• 3u < & )font-weigh)
3u 30 )Font family)
M> / H 3u 0 > > , , 0 3u 30 0 > >& M> 0 Arial 3u

„ 0 Declaration > font-family:Arial; 5%) Tahoma 3u „ 0 Declaration
> font-family:Tahoma; । & M> 0 % %M > / 3u Declaration
$† >& 6 font-family:Verdana, Geneva, Tahoma; । 6 ¿$ 2 3u % M>
ƒ& ˜& 3 u 2, >
2 „
<html>
<head>
</title>
<style>
h1{font-
h1{font-family:Arial;}
h2{font-
h2{font-family:Tahoma; color: #C00}
p{ font-
font-family:Verdana, Geneva, Tahoma}
</style>
</head>
<body >
<h1>This text is written by Arial font.</h1>
<h2>This text is written by Tahoma font.</h2>
<p>Normaly,this
<p>Normaly,this text is written by Verdana font, But when browser does not support
Verdana font, this text will be displayed by Geneva font or Tahoma font. </p>
</body>
</html>

2, ' ,
X§.
X§. 3u )Font size)
M> 0 µ 3u M> . > , , 0 3u 0 >

>& M> 0 25px 3u „ 0 Declaration > font-size:25px; 5%) 20px 3u
„ 0 Declaration > font-size:20px;। M> 0 µ 3u M> . % px
,& > < ,6 6 % , x Declaration > font-size:100% 5% M > 3u
Declaration . ' %™ .' 6 font-size:larger; font-size:medium; font-size:small; font-
size:smaller; font-size:xx-large; font-size:large; font-size:x-large; font-size:x-small; font-size:xx-small; 0,
2 „
<html>
<head>
</title>
<style>
p{font-
p{font-size:25px;}
h3{font-
h3{font-size:20px;}
#100{ font-
font-size:100%}
#250{ font-
font-size:150%}
#xx-
#xx-large{ font-
font-size:xx-
size:xx-large;}
</style>
</head>
<body >
<p> The font size of the text is 25px. </p>
<h3>The font size of the text is 20px.</h3>
<p id="100">The
id="100">The font size of the text is 100%.</p>
<p id="250">The font size of the text is 150%.</p>
<p id="xx-
id="xx-large">The font size of the text is xx-
xx-large</p>
</body>
</html>

2, ' ,
Xª.
Xª. 3u ) &u )Font variant)
6, <& % + ) 2, 2& % (, 6 4) )
M> T (> > Â 6G ' > ><& G (> T 3u
M 4) 3u & ' > , x 3u ) &u 0 > >& This Is an Example Of
Variant Text ) &u a C 0 Declaration > font-variant: small-caps; ।
2 „
<html>
<head>
</title>
<style>
#variant{ font-
font-variant: small-
small-caps; color:#C00;}
</style>
</head>
<body >
<h2>This is an example of normal h2 text .</h2>
<h2 id="variant">This Is an Example Of h2 Variant Text .</h2>
</body>
</html>
2, ' ,
X®.
X®. 3u < & )font-
font-weigh)
weigh)
<& % 0 µ M> > > / H 0 3u
<& 0 > >& Å C 0 Declaration > font-weight:bold; ।
M> > / H 0 ! 0 0 > 6 % , 6 font-
weight:900; font-weight:800; । ' ( 3u < & a > font-weight:lighter;
! font-weight:bolder; 0 > >&
2 „
<html>
<head>
</title>
<style>
#normal{font-
#normal{font-weight:normal;}
weight:normal;}
#bold{font-
#bold{font-weight:bold;}
#lighter{font-
#lighter{font-weight:lighter;}
#ni{font-
#ni{font-weight:900;}
</style>
</head>
<body >
<p id="normal"> This is an example of normal p text . </p>
<p id="bold"> This is an example of bold p text . </p>
<p id="lighter"> This is an example of lighter p text . </p>
<p id="ni"> This is an example of 900 p text . </p>
</body>
</html>

2, ' ,
X°.
X°. ! )Link)
Link)
HTML 0 0 % ! 61 G% 0 <a></a> y 01 0 >
! C >& . ! & 0 > >& )1 / H
! G 6
• ! / H G )Normal Condition of link)

• ! ) J G )Visited Condition of link )
• ! > G )Hover Condition of link)
• ! "& G )Active Condition of link)
! / H G )Normal Condition of link)
! 2 0 > %6? 6) 2, >& Ç ! / H G G& !

, a C 0a > a:link {color: #090;} ।
! ) J G )Visited Condition of link )

! / 0 > > ! ! $% $ ! 6) 2, >& Ç
! ) J G G& ! , a C 0 a > a:visited
{color:#303} ।
! > G )Hover Condition of link)
! 0 > > > , ! $% $ ! 6) 2, >& Ç ! >

G G& ! , a C 0 a > a:hover { background:
#639} ।
! "& G )Active Condition

Condition of link)
6 ! "& G& , ¯ $ h M> ! 6) 2, >& Ç ! "& G

G& ! , a C 0a > a:active {color:#960;}
G ! 0• $€ % 6& ! )1 0 µ >& ! 0• $€
% 0a >
a:hover{background:#F60; 5%
2 „
<html>
<head>
</title>
<style>
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}
#nav ul li {float:left; list-

list-style:none;}
#nav ul li a {padding:10px; display:block; text-
text-decoration:none;}
#nav ul li a:link{background:#FCC;}
#nav ul li a:hover{background:#F60;}
#nav ul li a:hover { background: #639}
#nav ul li a:active { background:#39F;}
</style>
</head>
<body >
<a href="https://www.tutohost.com"><h1>This is a Link.</h1></a><br>
<div id="nav">
<ul>
<li><a href="https://www.tutohost.com"><h2>HTML</h2></a></li>
href="https://www.tutohost.com"><h2>HTML</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>CSS </h2></a></li>
<li><a href="https://www.tutohost.com"><h2>PHP</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>Wordpress</h2></a></li>
</ul>
</div>
</body>
</html>

2, ' ,
X±.
X±. a )List)
<& % 0 $%G % 0 %™ W CSS E / H a C
6 &, >7 J a ! % >7 . J a J a )* 0
%6 &" ) & $%G % >& ! 2 ~v " ! 0 , .
J a 2 ' ZÈ 1 … '( a 6
É % ' . 0 > 6&
J a )Ordered List)
J a )* 0 %6 &" ) & $%G % >& ! 2

~v " ! 0 J a & / H > % 6 0 3 , J , 0,
0 3 a a C 0 Declaration > list-style-type:upper-alpha; list-style-
type:lower-alpha; । J a a C 0 Declaration > list-style-type:decimal; a
aC 0 Declaration > list-style-type:upper-roman; list-style-type:lower-roman; ।
2 „
<html>
<head>
</title>
<style>
body{background:#00CC99; margin-
margin-left:120px;}
h1{color:#F00;}
#alphabet {list-
{list-style-
style-type:lower-
type:lower-alpha;}
#decimal {list-
{list-style-
style-type:decimal;}
#roman {list-
{list-style-
style-type:lower-
type:lower-roman; }
</style>
</head>
<body >
h1>Ordered list</h1>
list</h1>
<h3>Alphabet Type list</h3>
<ol id="alphabet">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<h3>Number Type list</h3>
<ol id="decimal">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<h3>Roman Number Type list</h3>
<ol id="roman">
<li>Pragaph</li>
<li>Pragap h</li>
<li>Table</li>
<li>List</li>
</ol>
</body>
</html>

2, ' ,
ƒY.
ƒY. . J a )Unrdered List)
. J a 2 ' ZÈ 1 … , . J a
& / H > % 6 J a , a , Ë& a 0, J
a a C 0 Declaration > list-style-type:disc;। a
a C 0 Declaration > list-style-type:circle; Ë& a a
C 0 Declaration > list-style-type:square;।
2 „
<html>
<head>
</title>
<style>
margin-left:120px;}
h1{color:#F00;}
#disc {list-
{list-style-
style-type:disc;}
#circle {list-
{list-style-
style-type:circle}
#square {list-
{list-style-
style-type:square;}
</style>
</head>
<body >
<h1>Unordered
<h1>Unordered list</h1>
<h4>Disc Type list</h4>
<ul id="disc">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<h4>Circle Type list</h4>
<ul id="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
<ul id="square">
<li>Pragaph</li>
<li>Pragap h</li>
<li>Table</li>
<li>List</li>
</ul>
</body>
</html>

2, ' ,
ƒX.
ƒX. a 0 >
a 6 É % ' . 0 > 6& )1 a
0 > 2& / H J )1 0 µ a a a >
0 > , 6& a a > 0 > 0 Declaration > list-
style-image:url(images/b.png)।
2 „
<html>
<head>
</title>
<style>
body{background:#c9f3fa; margin-
margin-left:120px;}
h1{color:#F00;}
ul{list-
ul{list-style-
style-image:url(images/b.png)}
</style>
</head>
<body >
<h1>List Style Image</h1>
<ul id="disc">
<li><a href="www.tutohost.com">Home</a></li>
<li><a href="www.tutohost.com">About Us</a></li>
<li><a href="www.tutohost.com">HTML</a></li>
<li><a href="www.tutohost.com">CSS</a></li>
<li><a href="www.tutohost.com">PHP</a></li>
href="www.tutohost.com">PHP</a></li>
<li><a href="www.BanglaeBookDownload.com
href="www.BanglaeBookDownload.com">
www.BanglaeBookDownload.com">Bangla
">Bangla Ebook</a></li>
Ebook</a></li>
</ul>
</body>
</html>
62H
imstyle folder C /0 images folder C > images folder /0

6 a 2, > > 2 „ b.png 0 > >&'
J$ J ! http://www.tutohost.com/bangla/css/images/pic/b.png । % imstyle C folder /0
%0 J open $% code file Save as h File name: index.html , Save as
type : All files, , & save index.html 3 Mozilla Firefox , & open 2, ' ,
ƒƒ.
ƒƒ. )Table )
<& % 0 > > 0 $% È-,% ! 0 $%G % 6& Tv«%M H $% ,

0 > C Z . . +H & ! 0 >
Ì 6& 0 > a C 0 & +&
$% >& T > 7,
• J )Table Border)
• <& J €> )Table Width and Height)
• u )Table Text Alignment)
• )Table Color)
J )Table Border)
M ,Z 0 M 1= C >& J E 2 C 0 HTML <tr></tr> 0 >

>&, ! 2 C 0 <td></td> 0 > >& <th></th> /0 >J C >& CSS E
J a C 0 a0 > ,
table,th,td
{
border:1px solid #F00;
}
M , 2 !2 0 a0 J / H >&'
2 „
<html>
<head>
</title>
<style>
margin-left:120px;}
table,th,td
{
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
2, ' ,
' . / H J C >& 2 % V . , >&'
{
border-
border-collapse:collapse;
}
6, a $% J 6; >& > , / H > ! Mozilla Firefox

, & open 2, ' ,
ƒ˜.
ƒ˜. <& J €> )Table Width
Width and Height)
J x 6 +& 2 ? >&, >7 <( > ! $Í > ,
>J 2 2 > <( > ! $Í
/ H 0a > ,
table
{
width:300px; height:100px;
}
M > px % % > ,& 6 % 6 ,
table
{
width:50%; height:20%;
}
> , . % > Â % , % >

>J 2 2 $Í / H 0a > ,
th
{
height:50px;
}
x< M > px % % > ,& 6 % / H >J 2

2 $Í / H , T . width E / >&
2 „
<html>
<head>
</title>
<style>
body{background:#00CC99;margin-
body{background:#00CC99;margin-left:120px; }
table{
border-
}
table,th,td
{
#F00;
}
table
{
}
th
{
height:50px;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
2, ' ,
ƒ¦.
ƒ¦. u )Table Text Alignment)
M> ) , 0 u 0 > >&
2 M> > a > ,
td
{
text-
text-align:right;
J > Declaration > text-align:left;

U > Declaration > text-align:center;
6, 2 M> ) 0 u ¯ 2 /0 M > $% ,
, U U G / H >& > Declaration vertical-align / H ,
> M> , 0 Declaration > ,
td
{
vertical-
vertical-align:bottom;
}
2 „
<html>
<head>
</title>
<style>
body{background:#00CC99;margin
in-left:120px; }
table{
border-
}
table,th,td
{
}
table
{
}
th
{
height:50px;
}
td
{
text-
text-align:center;
}
td
{
vertical-
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>

2, ' ,
ƒ§.
ƒ§. )Table Color)
<& ~/ x 0 2 $» 0 J >& 0
@ ) ! > 0 > 6 10 0 > $%G % > , < /
Tv«%M H < & % $%G % % ! 0 0 >
. +H &5 % 0 > 2, 6& x >J ! 2
/ Tv«%M H )M % >J 0 • $€
/ H 0a > ,
th
{
background:#F69;
}
2 0 • $€ / H 0a > ,
td
{
background:#FAC;
}
2 „
<html>
<head>
</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-
width:300px;
}
table,th,td
{
}
th
{
height:50px;
}
td
{
text-
text-align:center;
vertical-
}
th
{
background: #F69;
}
td
{
background:#FAC;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>

2, ' ,
ƒª J ! J a
J <& % Tv«%M H $% , ! 0 > Î
J & )* $% , 0 = ! ! . Z J C $% J
/6 ! ) 0 > )* / H J C 6&
)* / H J C x ' + & $% >& T > 7,
• J a (Border Style)
• J <& J (Border Width)
• J (Border Color)
• %Z J ( Individual Border )
J a
J a0 , J , > J a0 C 0 Declaration > , border-style:dotted

5% 0 > )* / H J a0 C 6 & J J a0 J C 0 Declaration
> , border-style:dotted ; J0 J a0 J C 0 Declaration > , border-style:dashed; J
a0 J C 0 Declaration > , border-style:double; • ) a0 J C 0 Declaration
> , border-style:groove; J a0 J C 0 Declaration > , border-style:ridge; a0
J C 0 Declaration > , border-style:inset; .$ a0 J C 0 Declaration > ,
border-style:outset; ।
2 „
<html>
<head>
</title>
<style>
body{background:#00CC99;}
#dotted{border-
#dotted{border-style:dotted ;}
#dashed{border-
#dashed{border-style:dashed;}
#double{border-
#double{border-style:double;}
#groove{border-
#groove{border-style:groove;}
#ridge{border-
#ridge{border-style:ridge;}
#inset{border-
#inset{border-style:inset;}
#outset{border-
#outset{border-style:outset;}
style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
border</h3>
<h3 id="groove">This is an example of groove border</h 3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body>
</body>
</html>

name: index.html , Save as type : All files, , & save index.html 3 Mozilla Firefox , &
open 2, ' ,
ƒ® J <& J (Border Width)
J <& J , J > J <& J / H 0
Declaration > , border-width:thin; 5% 0 > )*
/ H J <& J / H 6& J C 0 Declaration > ,
border-width:thin; J& J C 0 Declaration > , border-
width:medium; J C 0 Declaration > , border-width:thick; 1px
X % <( J C 0 Declaration > ,border-width:1px; 15px X§
% <( J C 0 Declaration > , border-width:15px; ।
HTML $% , % J / H <& J > % , / H J C 0 Declaration

> , border-width:2px 8px 6px 4px; X 2px , top border ; ƒ& 8px , right border; ˜&
6px , down border ; ¦ 4px , left border।
2 „
<html>
<head>
</title>
<style>
h3{border-
h3{border-style:solid;}
#thin{border-
#thin{border-width:thin;}
#medium{border-
#medium{border-width:medium;}
#thick{border-
#thick{border-width:thick;}
#1px{border
#1px{border-
rder-width:1px;}
#15px{border-
#15px{border-width:15px;}
div{border-
div{border-style:solid;
border-
border-width:2px 8px 6px 4px;}
</style>
</head>
<body >
<h3 id="thin">This is an example of thin border</h3>
<h3 id="medium">This is an example of medium border</h3>
<h3 id="thick">This is an example of thick border</h3>
<h3 id="1px">This is an example of 1px border</h3>
<h3 id="15px">This is an example of 15px border</h3>
<div>
<p>
<h2>This is an example of multi size border</h2>
We are bangladeshi Hostgator hosting provider. The world wide
wide technical and support team
is working for your best movement. We are bangladeshi Hostgator hosting provider. The
world wide technical and support team is working for your best movement. </p>
</div>
</body>
</html>

2, ' , ।
ƒ° J (Border Color)
J , J ! > J / H 0 Declaration
> , border-color:yellow; 5% 0 > )* / H J
/ H 6& > , Ï J C 0 Declaration > , border-
color:yellow; %! J C 0 Declaration > , border-color:pink;
rgb %™ < J / H 6 &, %™ J C 0 Declaration
> , border-color:rgb(240,060,155); hex %™ < J / H 6 &,
%™ J C 0 Declaration > , border-color:#ff0000; J
w% u > % , w% u J C 0 Declaration > ,border-
color:transparent; ।
HTML $% , % J / H Ï > % , / H J C 0 Declaration > ,

border-color:#a03090 #f00000 #C06000 #0030F0; X #a03090 , top border color ; ƒ& #f00000
, right border color; ˜& #C06000 , down border color; ¦ #0030F0; , left border
color ;
2 „
<html>
<head>
</title>
<style>
h3{border-
h3{border-style:solid;}
#yellow{border-
#yellow{border-color:yellow;}
#pink{border-
#pink{border-color:pink;}
#rgb{border-
#rgb{border-color:rgb(240,060,155);}
#hex{border-
#hex{border-color:#ff0000;}
#transparent{border
#transparent{border-
{border-color:transparent;}
div{border-
div{border-style:solid;
border-
border-color:#a03090 #f00000 #C06000 #0030F0;}
</style>
</head>
<body >
<h3 id="yellow">This is an example of yellow border</h3>
<h3 id="pink">This is an example of pink border</h3>
<h3 id="rgb">This is an example of rgb border</h3>
<h3 id="hex">This is an example of hex border</h3>
<h3 id="transparent">This is an example of transparent border</h3>
<div>
<p>
<h2>This is an example of multi colour border</h2>
</div>
</body>
</html>

2, ' , ।
ƒ± %Z J ( Individual Border )
HTML $% , % J a , <& J ! )* > %
/ H J C x $% , J 0 Declaration > , border-
top:dotted 8px #F00 ; J , J 0 Declaration > , border-right:dashed
6px #F60 ; , J 0 Declaration > , border-bottom:double 6px
#C09; , J 0 Declaration > , border-left:solid 5px #960;।
2 „
<html>
<head>
</title>
<style>
div{
border-
border-top:dotted 8px #F00 ;
border-
border-right:dashed 6px #F60 ;
border-
border-bottom:double 6px #C09;
border-
border-left:solid 5px #960;}
</style>
</head>
<body >
<div>
<p>
<h2>This is an example of individual style border</h2>
</div>
</body>
</html>

2, ' , ।
˜Y (Margin)
)* HTML $% , % G 3F , 0 0 >
>& 0 CSS margin Property 0 > >& / H) HTML $% ,
% % C 0 Declaration >& margin:15px;
5% px % cm, pt, auto, % 0 > 6 & 6 , $% , ,
>& > Declaration > margin-top:20px; , ,& 0
Declaration > margin-bottom:25px; , ,& 0 Declaration
> margin-left:30px; J , ,& 0 Declaration > margin-
right:35px;। , Declaration 6& 6 margin:20px 25px 30px
35px 20px $% , , , 25px J , , , 30px
, , , 35px , , ।
2 „
<html>
<head>
</title>
<style>
h3,div{border-
h3,div{border-style:solid; border-
border-color:rgb(240,060,155);}
#auto{margin-
#auto{margin-left:auto;}
#px{margin-
#px{margin-left:50px;}
#cm{margin-
#cm{margin-left:3cm;}
#pt{ margin-
margin-left:120pt;}
#per{ margin-
margin-left:25%;}
div{margin:20px 25px 30px 35px; }
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left margin.</h3>
<h3 id="px">This is an example of 50px left margin.</h3>
margin.</h3>
<h3 id="cm">This is an example of 3cm left margin.</h3>
<h3 id="pt">This is an example of 120 pt left margin.</h3>
<h3 id="per">This is an example of 25% left margin.</h3>
<div>
<h2>This is an example of multi margin.</h2>
<p>
We are bangladeshi Hostgator
Hostgator hosting provider. The world wide technical and support team
</div>
</body>
</html>

2, ' , ।
˜X %0 J! (Padding)
(Padding)
)* HTML $% , 6, J , > J u % G 3F
, 0 %0 J! 0 > >6 %0 J! M )* HTML $% , 0 • $€
& Z™ । %0 J! 0 > 0 CSS padding Property 0 > >&
/ H) HTML $% , % % %0 J! C 0 Declaration
>& padding:15px; 5% px % cm, pt, auto, % 0 > 6& 6,
$% , %0 J! , >& > Declaration > padding-top:20px; ,
%0 J! ,& 0 Declaration > padding-bottom:25px; , %0 J! ,& 0
Declaration > padding-left:30px; J , %0 J! ,& 0 Declaration >
padding-right:35px;। , %0 J! Declaration 6& 6 padding:20px 25px 30px 35px 20px
$% , %0 J! , , 25px J , %0 J! , , 30px , %0 J! , , 35px
, , ।
2 „
<html>
<head>
</title>
<style>
h3,div{border-
h3,div{border-style:solid; border-
border-color:rgb(240,060,155);}
#auto{padding-
#auto{padding-left:auto;}
#px{padding-
#px{padding-left:50px;}
#cm{padding-
#cm{padding-left:3cm;}
#pt{padding-
#pt{padding-left:120pt;}
#per{padding-
#per{padding-left:25%}
div{padding:20px 25px 30px 35px; }
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left padding.</h3>
<h3 id="px">This is an example of 50px left padding.</h3>
<h3 id="cm">This is an example of 3cm left padding.</h3>
<h3 id="pt">This is an example of 120 pt left padding.</h3>
<h3 id="per">This is an example of 25% left padding.</h3>
<div>
<h2>This is an example of multi padding.</h2>
<p>
movement. We are bangladeshi Hostgator hosting provider. The
</div>
</body>
</html>

2, ' , ।
˜ƒ .$ ! .$ a
J M 5% < & % % Tv«%M H $% , .$ !
0 > Î J & )* , J 0 , J x
.$ 0 > >& 0 > )* / H .$ C 6&
)* / H .$ C x ' + & $% >& T > 7,
• .$ a (Outline Style)
• .$ <& J (Outline Width)
• .$ (Outline Color)
.$ a0
.$ a0 , .$ , > .$ a0 C 0 Declaration > ,

outline-style:dotted; 5% 0 > )* / H .$ C 6 & J J a0 .$
C 0 Declaration > , outline-style:dotted; J0 J a0 .$ C 0 Declaration
> , outline-style:dashed; J a0 .$ C 0 Declaration > , outline-style:double; • )
a0 .$ C 0 Declaration > , outline-style:groove; J a0 .$ C 0
Declaration > , outline-style:ridge; a0 .$ C 0 Declaration > , outline-
style:inset; .$ a0 .$ C 0 Declaration > , outline-style:outset; ।
2 „
<html>
<head>
</title>
<style>
h3{border:solid #666 10px;}
#dotted{outline-
#dotted{outline-style:dotted;}
#dashed{outline-
#dashed{outline-style:dashed;}
#double{outline-
#double{outline-style:double;}
#groove{outline-
#groove{outline-style:groove;}
#ridge{outline-
#ridge{outline-style:ridge;}
#inset{outline-
#inset{outline-style:inset;}
#outset{ outline-
outline-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This
id="dotted">This is an example of dotted outline.</h3>
<h3 id="dashed">This is an example of dashed outline.</h3>
<h3 id="double">This is an example of double outline.</h3>
<h3 id="groove">This is an example of groove outline.</h3>
<h3 id="ridge">This is an example of
of ridge outline.</h3>
<h3 id="inset">This is an example of inset outline.</h3>
<h3 id="outset">This is an example of outset outline.</h3>
</body>
</body>
</html>

2, ' , ।
˜˜ .$ <& J (Outline Width)
.$ <& J , .$ > .$ <& J / H
0 Declaration > , outline-width:thin; 5% 0 > )*
/ H .$ <& J / H 6& .$ C 0 Declaration
> , outline-width:thin; J& .$ C 0 Declaration > , outline-
width:medium; .$ C 0 Declaration > , outline-width:thick;
1px X % <( .$ C 0 Declaration > , outline-width:1px;
10px XY % <( .$ C 0 Declaration > , outline-
width:10px;।
2 „
<html>
<head>
</title>
<style>
div,h3{border:solid #666 10px; outline:dotted #C30; }
#thin{outline-
#thin{outline-width:thin;}
#medium{outline-
#medium{outline-width:medium;}
#thick{outline-
#thick{outline-width:thick;}
#apx{outline
#apx{outline-
utline-width:1px;}
#bpx{outline-
#bpx{outline-width:10px;}
div{outline:solid #C30;
outline-
outline-width:5px; }
</style>
</head>
<body >
<h3 id="thin">This is an example of thin outline.</h3>
<h3 id="medium">This is an example of mediumoutline.</h3>
<h3 id="thick">This is an example of thick outline.</h3>
<h3 id="apx">This is an example of 1px outline.</h3>
<h3 id="bpx">This is an example of 10px outline.</h3>
<div>
<p>
<h2>This is an example of solid 5px outline.</h2>
We are bangladeshi Hostgator hosting provider. The world wide
wide technical and support team
</div>
</body>
</body>
</html>

2, ' , ।
˜¦.
˜¦. .$ (Outline Color)
.$ , .$ ! > .$ / H 0
Declaration > , outline-color:yellow; 5% 0 > )* / H
.$ / H 6& > , Ï .$ C 0 Declaration > ,
outline-color:yellow; %! .$ C 0 Declaration > , outline-
color:pink; rgb %™ < .$ / H 6 &, %™ .$ C 0
Declaration > , outline-color:rgb(240,060,155); hex %™ < .$
/ H 6 &, %™ .$ C 0 Declaration > , outline-
color:#ff0000; ।
2 „
<html>
<head>
</title>
<style>
div,h3{border:solid #666 10px; outline:dashed #C03; padding:5px;}
padding:5px;}
#yellow{outline-
#yellow{outline-color:yellow;}
#pink{outline-
#pink{outline-color:pink;}
#rgb{outline-
#rgb{outline-color:rgb(240,060,155);}
#hex{outline-
#hex{outline-color:#ff0000;}
div{outline:red 10px double}
</style>
</head>
<body >
<h3 id="yellow">This is an example of yellow outline.</h3>
<h3 id="pink">This
id="pink">This is an example of pink outline.</h3>
<h3 id="rgb">This is an example of rgb outline.</h3>
<h3 id="hex">This is an example of hex outline.</h3>
<div>
<p>
<h2>This is an example of 10px red double outline.</h2>
provider. The world wide technical and support team
</div>
</body>
</html>

2, ' , ।
˜§ J (Box Model)
HTML $% , CSS E a0 6; x >
>& < & % .$ J x J
Tv«%M H J 2 Z % 6,
HTML $% , . Z ।
J C 0 Declaration & 2% / H
, >& T > 7,
• width - ( 2G)
• border - ( J !, . ! a0
/ H , >& )
• padding - ( ) , 6% 3F G )
• margin – ( , 6% 3F G )
2 „
<html>
<head>
</title>
<style>
body{
font-
font-family:Arial, Helvetica, sans-
sans-serif;
font-
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px
padding:15p x 10px 15px 50px;
background-
background-repeat: no-
no-repeat;
background-
background-position: 10px center;
}
.info {
color:#00529B;
background-
background-color: #BDE5F8;
background-
background-image: url('info.png');
}
.success {
color:#4F8A10;
background-
background-color:#DFF2BF;
}
.warning {
color:#9F6000;
background
background-
round-color:#FEEFB3;
}
.error {
color:#D8000C;
background-
background-color:#FFBABA;
}
div{width:350px;
border:#F5D349 10px solid;
margin:15px;
padding:8px;
background:#FEEFB3;}
</style>
</head>
<body >
<div class="info">Information message.</div>
<div class="success">Successful
class="success">Successful operation message.</div>
<div class="warning">Warning message.</div>
<div class="error">Error message.</div>
<div>
<p>
<h2 style="color:#C33;">This is an example of Box Model.</h2>
</div>
</body>
</html>

2, ' , ।
˜ª v %! „ (Grouping Selector)
) J 2• 0 C W0 > 7, 6 \ J
| Ò %! „ 0 > CSS J ! \
>& & ' HTML $% , 0 / H a0 0 >
2& >& 6 h1,h2,p 0, 0 color, font-family, text-align
0 , 2% 0 > 2& > T 0 . , . , ) a0
, „ M> ,& a0 / H J
>
2 „
<html>
<head>
</title>
<style>
h1,h2,p{color:#333;
font-
font-family:Tahoma;
text-
</style>
</head>
<body >
<h2>Reliable & Fast Web Hosting</h2>
<p>
We are relaibale Bangladeshi hosting provider. The world wide technical and support team
is working for your best movement. We are dedicated with client requrement. You can host
your huge data of your company with our secured and hacking proof server. We are taking
care of more than 1000 bangladeshi websites
websites and their huge information.
</p>
</body>
</html>

2, ' , ।
˜® a! „ (Nesting Selector)
„ ?)M ; % „ 0 a0 / H
x a! „ 0 > >& / 6 a0 %0 • 3 P 0
a0 / H > rap id W0 div $% , /0 %
%0 • 3 . ' rap 0< a0 / H > 6 , rap /0 G
%0 • 3 0 , a0 C 2& >& > a! „ 0 >
>& 0 „ > rap p ।
2 „
<html>
<head>
</title>
<style>
p{color:#333;
font-
font-family:Tahoma;
text-
#rap{
background:#00bbaa;
padding:15px;}
#rap p{color:#F00;}
p{color:#F00;}
</style>
</head>
<body >
<p>www.tutohost.com</p>
<h2>Reliable & Fast Web Hosting</h2>
<p>
We are relaibale Bangladeshi hosting provider. The world wide technical and support team
is working for your best movement. We are dedicated with client requrement.
requrement.
<div id="rap">
<h2>24/7 World Class Support</h2>
<p>Reliable and fast server is here. You will get 99.99% uptime guaranty. Many Bangladeshi
techie people have no ability to make their site with huge taka. So we are also offering
Free hosting plan.</p>
plan.</p>
</div>
</body>
</html>

2, ' , ।
˜° J (Dimention)
HTML $% , 2G ! $Í &¼ H 0 J 0 >
>& J / H 0 ' 2% 0 >
>& T > 7, height, width, max-height, max-width, min-width, min-height
।
2 „
<html>
<head>
</title>
<style>
h2{height:50px;
background:#C30;}
p{max-
p{max-height:100px;
max-
max-width:250px;
background:#C03}
h3{background:#C60;
margin-
margin-left:150px;}
#main{min-
#main{min-height:350px;
min-
min-height:250px;
background:#F99;
padding:10px;}
</style>
</head>
<body >
<h2>This is an example of Box Model.</h2>
<p>
is working for your best
best movement. We are bangladeshi Hostgator hosting provider. The
<h3>24/7 World Class Support</h3>
guaranty.
<p id="main">Reliable and fast server is here. You will get 99.99% uptime guaran ty. Many
Bangladeshi techie people have no ability to make their site with huge taka. So we are also
offering Free hosting plan.</p>
</body>
</html>

2, ' , ।
˜± 2, %™ (display)
J Î 2% 2 $% , ) 2, > J Î
2% ' value > % , , /0 & 0 µ >&,
• J Î -(display:none)
• J Î -(display:inline)
• J ÎÔ – (display:block)
J Î -(display:none)
+ $%, 2, 0 J Î 0 > >&, 0 Declaration >& display:none;।
2 „
<html>
<head>
</title>
<style>
#none{width:265px;
background:#F30;
padding:10px;}
#none:hover{display:none;}
</style>
</head>
<body >
<div id="none">
<h1>Please Touch Me.</h1></div>
<h2>We are bangladeshi Hostgator hosting provider.</h2>
</body>
</html>
2, ' , ।
J! ¥+H:
¥+H:
$% $, > H Please Touch Me. $% $ % &u & 1 ,Z 0 > & 6 & 0 J!
> & ' #none:hover{display:none;} । ¯ none div $ > display:none ।
¦Y J Î - (display:inline)
/0 HTML $% , M> 2, 0 J Î
0 > >&। M & 0 µ >& )1 HTML $% ,
M> 2, 0 Declaration >& display:inline; 5%।
2 „
<html>
<head>
</title>
<style>
li{display:inline;
background:#C06;
background:#C06;
color:#FFC;
padding:10px;}
a{color:#FCC;
font-
font-size:24px;}
</style>
</head>
<body >
<ul>
<li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li>
<li><a href="http://banglaebookdownload.com/" target="_blank">CSS</a></li>
<li><a href="http://www.tutohost.com"
href="http://www.tutohost.com" target="_blank">PHP</a></li>
<li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li>
</ul>
</body>
</html>
2, ' , ।
¦X J Î Ô (display:block)
/0 HTML $% , M> 2, 0 J ÎÔ 0 >

>& M & 0 µ >& ) 0 )1 , J
)1 HTML $% , M> 2, 0 Declaration >&
display:block; 5%।
2 „
<html>
<head>
<title> www.tutohost.com</titl
</title>
</title>
<style>
li{display:block;
background:#C06;
color:#FFC;
padding:10px;
width:140px;
border:#600 solid 1px;}
a{color:#FCC;
font-
font-size:24px;}
</style>
</head>
<body >
<ul>
<li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li>
target="_blank">HTML</a></li>
<li><a href="http://tutohost.com/bangla/css/" target="_blank">CSS</a></li>
<li><a href="http://www.tutohost.com" target="_blank">PHP</a></li>
<li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li>
</ul>
</body>
</html>

2, ' , ।
¦ƒ ) (visibility)
$% , 2, > , 0 )
2% 0 > >& 6 $% , 2, 0 Declaration >&
visibility:visible; । $% , 2, 0 Declaration >&,
visibility:hidden; । ) 2% ' value > % , , /0
$ † 6 10 > 7,
• ) > J – (visibility:hidden)
• ) ) – (visibility:visible)
• ) %Ö –(visibility:collapse)
2 „
<html>
<head>
<title>
</title>
<style>
body{background:#FFC}
#hide{width:245px;
background:#F30;
visibility:hidden; }
#show{width:245px;
background:#F30;
visibility:visible;}
</style>
</head>
<body >
<h2>Hidden Text & Visible Text.</h2>
<div id="hide">
<h1>Hidden
<h1>Hidden Text.</h1></div>
<div id="show">
<h1>Visible Text.</h1></div>
</body>
</html>
2, ' , ।
J! ¥+H:
¥+H:
Hidden Text & Visible Text. ' 3F ! 2, >7
J! HTML ! <div id="hide"><h1>Hidden Text.</h1></div> ' ! CSS ! #hide{width:245px;

background:#F30;}
visibility:hidden; 0 Hidden Text. 2, >7

Visible Text. 2, >7 H CSS ! #show{width:245px;
background:#F30; visibility:visible;} . '।
¦˜ ) > J – (visibility:hidden)
J Î -(display:none) ! ) >J – (visibility:hidden;)$) HTML
$% , 0 0 > >& Â $) & /0 % 0 &' HTML
$% , 0 CSS visibility:hidden; HTML $% , 2, >& = Â
HTML $% , % G 3F Â HTML $% , 0 CSS
display:none; HTML $% , 2, >& ! 3F G C >& ।
2 „
<html>
<head>
</title>
<style>
body{background:#FFC;}
#none{width:245px;
#none{width:245px;
background:#C6C; }
#none:hover{display:none;}
#hidde{width:245px;
background:#F30; }
#hidde:hover{visibility:hidden;}
</style>
</head>
<body >
<div id="none"><h1>Please touch me.</h1></div> <br /><br />
<div id="hidde">
<h1>Please touch me.</h1></div>
me.</h1></div>
<h2>Please touch me.</h2>
</body>
</html>

2, ' , ।
J! ¥+H:
¥+H:
$% Please Touch Me. $% $ & 1 ,Z 0 > & 6 & ! $% $=. H
display:none; 0 > >&'
U Please Touch Me. $% $ & 1 ,Z 0 > & 6 & Â % G 3F H

visibility:hidden; 0 > > & '।
˜¦ ) %Ö – (visibility:collapse)
/ H ( ,Z 0 0 ) %Ö
0 > >& 0 Declaration >& visibility:collapse; ।
display:none ।
2 „
<html>
<head>
</title>
<style>
table{border:1px #C00 solid;
font-
font-size:24px;}
size:24px;}
td{border:1px #C00 solid;
background:#F63;
color:#CFF; }
tr.col:hover{visibility:collapse;}
</style>
</head>
<body >
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>PHP</td>
</tr>
<tr class="col">
<td>Text</td>
<td>Audio</td>
<td>Video</td>
</tr>
</table>
</table>
<h2>Please put your mouse pointer on text/audio/video.</h2>
</body>
</html>

2, ' , ।
˜§ G (Positioning)
<& % )* HTML $% , M> & ) 2, > 2 0
position 2 % 0 > >& top, bottom, left, and right 2 % M>
0 > HTML $% , 2 Z G / H >& position 2 %
/ H > % T > 7,
• % a0 (position:static)
• % 3 J (position:fixed)
• % ) (position:relative)
• % $ (position:absolute)
2 „
<html>
<head>
</title>
<style>
h1 {
color:#F09;
background:#CC9;
padding:10px;
border:#960 1px solid; }
#static{
position:static;
left:100px;
top:70px;}
#absolute{position: absolute;
absolute;
left:150px;
top:100px;}
#fixed{position: fixed;
left:0px;
top:70px;}
#relative{position: relative;
left:150px;
top:100px;}
p{background:#FCF;
padding:10px;
border:#F09 1px solid;}
</style>
</head>
<body >
<h1 id="static">Position static</h1>
<h1 id="absolute">Position
id="absolute">Position absolute</h1>
<h1 id="fixed">Position fixed</h1>
<h1 id="relative">Position relative</h1>
<p>We are bangladeshi Hostgator hosting provider. The world wide technical and support
team is working for your best movement.We are bangladeshi Hostgator
Hostgator hosting provider.
The world wide technical and support team is working for your best movement.We are
bangladeshi Hostgator hosting provider. The world wide technical and support team is
working for your best movement. </p>
</body>
</html>

2, ' , ।
¦ª % a0 (position:static)
(position:static)
HTML $% , % 2% 6 , a0 ,<& >&; > HTML
$% , M> / H ! 4) % , x top, bottom, left, and
right 2 % M > Jh < 6& > ; ¯ top, bottom, left,
and right 2 % M> •& > & 6 ।
2 „
<html>
<head>
</title>
<style>
body{background:#FFC;}
h1{color:#F06;
background:#CC9;
border:#960 1px solid;
padding:10px;
position:static;
top:30px;
top:30px;
leftt:5px; }
p{ margin-
margin-top:100px;
background:#FCF;
border:#F0F 1px solid;
padding:10px;
text-
</style>
</head>
<body >
team
team is working for your best movement. We are bangladeshi Hostgator hosting provider.
working
working for your best movement. We are bangladeshi Hostgator hosting provider. The
world wide technical and support team is working for your best movement. We are
world wide technical and support team is working for your best movement.</p>
</body>
</html>

2, ' , ।
¦® % 3 J (position:fixed)
HTML $% , • % ,W G G ) G%
0 % 3 J 0 > >& 0 2 position:fixed; Jh , %
top, bottom, left, and right 2 % M > Jh >&
2 „
<html>
<head>
</title>
<style>
body{background:
h1{color:#F06;
background:#CC9;
padding:10px;
position:fixed;
top:30px;
leftt:5px; }
p{ margin-
margin-top:100px;
background:#FCF;
border:#F0F 1px solid;
padding:10px;
text-
</style>
</head>
<body >
team is working for your best movement. We are bangladeshi Hostgator hosting provider.
movement.
world wide technical and support team is working for your best move ment. We are
movement.</p>>
world wide technical and support team is working for your best movement.</p
</body>
</html>

2, ' , ।
• < www.tutohost.com G % >& ।

¦° % ) (position:relative)
HTML $% , M > 4) G % top, bottom, left, and right 2 %
0 > /0 × G / H 0 ) % 2% 0 >
>& % 2% 6 , a0 ,<& >&, > HTML $% , M> / H
! 4) % , , Â % ) !% a0 2% /0
% 0 >7 % a0 2% x top, bottom, left, and right 2 % M>
•& ; . % ) 2% x top, bottom, left, and right 2 %
M> /0 × G , >&।
% ) 2% > ~v >& Ç $% , 4) G
¯% ! > $% , 6G G ।
2 „
<html>
<head>
</title>
<style>
body{background:#FFC; }
h3 {
color:#F09;
background:#CC9;
padding:10px;
border:#960
width:370px; }
#right{position:relative;
left:100px;}
#left{position:relative;
right:100px; }
#down{position:relative;
top:150px;}
</style>
</head>
<body >
<h1>Normal Position</h1>
<h1 id="right">Position 100px right from Normal Position. </h1>
</h1>
<h1 id="left">Position 100px left from Normal Position. </h1>
<h1 id="down">Position 150px down from Normal Position.</h1>
</body>
</html>

2, ' , ।
¦± % $ (position:absolute)
HTML $% , M> 2 Z G / H 0 % $ 2% 0 >
>& HTML $% , % 2% 6, $ ,<& >& >
G 4) " , >& , x top, bottom, left, and right 2 %
M> /0 Ç $% , G / >& x 0 $% , $% <
<) 0% Ç $% , G / H \ >&।
2 „
<html>
<head>
</title>
<style>
h1
{position:absolute;
left:100px;
top:70px;
color:#F09;
background:#CC9;
padding:10px;
border:#960
}
p{background:#FCF;
padding:10px;
</style>
</head>
<body >
team is working for your best movement.We are bangladeshi Hostgator hosting provider.
</body>
</html>
</html>

2, ' , ।
§Y <) Ø (Overflow)
top, left, height,width, padding, border 0 , 2% 0 >
J % 6, . 2& & u . Z & ' >&, >
( u ) 2, > <) Ø 2% /0 / H >& <)
Ø 2% ' > % /0 $ † 6 10 > 7,
• <) Ø ) (overflow:visible)
• <) Ø > J (overflow:hidden)
• <) Ø (overflow:auto)
• <) Ø • (overflow:scroll)
2 „
<html>
<head>
<title>
</title>
<style>
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
#visible{overflow:visible;
margin-
margin-bottom:60px;}
#hidden{overflow:hidden;}
#auto{overflow:auto;}
#scroll{overflow:scroll;}
</style>
</head>
<body >
<h3> This is an example of visible overflow</h3>
<p id="visible">
is working for your best movement.We
movement.We are bangladeshi Hostgator hosting provider. The
world wide technical and support team is working for your best movement.We are
</p >
<h3> This is an example of hidden overflow</h3>
<p id="hidden">
is working for your best movement.We are bangladeshi Hostgator hosting provider. The
world wide technical
technical and support team is working for your best movement.We are
working for your best movement.</p>
<h3> This is an example of auto overflow</h3>
<p id="auto">
We are bangladeshi
bangladeshi Hostgator hosting provider. The world wide technical and support team
world wide technical and support team is working for your best movement.We are
bangladeshi Hostgator
Hostgator hosting provider. The world wide technical and support team is
working for your best movement.</p>
<h3> This is an example of scroll overflow</h3>
<p id="scroll">
team
world wide technical and support team is working for your best movement.</p>
</body>
</html>

2, ' , ।

CSS - Bangla Tutorial E-Book

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS - Bangla Tutorial E-Book

Uploaded by

Copyright:

Available Formats

:

CSS $ & C >&' M 6 <& J CSS %M .% 0 HTML R

2 & XYY $% $ & ,& >&' CSS ! $ & T $ & ,& C

3 , \ & 6) ' , %0 J < % code % %0 J %a

RM H C 3u > 0 > >&' ! 3u %v+ ) ) %( > .% %

M %x 6 $ & %( $% h .% .% y % & 6 % '( 6 %

. ! J$ J. J W ' ! > 0 +& % % R$ +& '

CSS /0 HTML E C <& % )* ! ,W 1= , . , . Z , G , !, 1

CSS <& % ! ,W) … 06 HTML 0 1 M> 0 > >& 01 „

body {background: #FC9; font-family: Tahoma; color: #F60;} body 0 1 „

6 <p class="mar"> 24 / 7 Support</p> 0 css J

h „ , 0 HTML 0 1 /0 class <& J- 0 > >& % … ,&J =

We are bangladeshi Hostgator hosting

%0 J open $% code file Save as h File

<p class="post"> /0 %0 • 3 0 post h / H >&'

. J „ , 0 HTML 0 1 /0 id <& J- 0 > >& % … ,&J =

%0 J open $% code file Save as h File

<p id="post1"> /0 %0 • 3 0 post1 . J / H >&'

syntax , ! ); 6 Selector ! Declaration ।

Selector ! 01 „ > HTML 0 1 h „ > HTML 0 1 h . J „

2 Declaration property ! value

%0 J open $% code file Save as h File

%™ <head>………….</head> /0 <style>..</style> a 01 0 > >& ! <style>….</style>

The Ultimate collection of bangle ebooks </p>

%0 J open $% code file Save as h File

<link rel="stylesheet" type="text/css" href="css.css">

a style.css save index.html 3 Mozilla Firefox , & open 2, '

6 <& / ! % J >& x a 0 > 2 % 0

<p style="color:#066; font-

%0 J open $% code file Save as h File

<& % )* $% , 6 Body, Pragaph, Table 0 , 0 0 • $€ % > 6 $% , $% ,

0 • $€ > 0 > 0 Declaration > % background:#900; background-color:#900; । 6

0 • $€ 0 µ > , 0 0 • $€ % 0 > >& 6 , % 0 • $€ (

%0 J open $% code file Save as h File

<& 2/ $% , >7 }@6 Z ™ 0 ! + ' / %

%0 J open $% code file Save as h File

%0 J open $% code file Save as h File

?)M ; M> ( > ' > 2 º 2 (> 5% ? 0

%0 J open $% code file Save as h File

M> / H 3u 0 > > , , 0 3u 30 0 > >& M> 0 Arial 3u

%0 J open $% code file Save as h File

M> 0 µ 3u M> . > , , 0 3u 0 >

%0 J open $% code file Save as h File

%0 J open $% code file Save as h File

• ! / H G )Normal Condition of link)

! / H G )Normal Condition of link)

! 2 0 > %6? 6) 2, >& Ç ! / H G G& !

! ) J G )Visited Condition of link )

! > G )Hover Condition of link)

! 0 > > > , ! $% $ ! 6) 2, >& Ç ! >

! "& G )Active Condition

6 ! "& G& , ¯ $ h M> ! 6) 2, >& Ç ! "& G

#nav ul li {float:left; list-

%0 J open $% code file Save as h File

J a )* 0 %6 &" ) & $%G % >& ! 2

%0 J open $% code file Save as h File

%0 J open $% code file Save as h File

imstyle folder C /0 images folder C > images folder /0

<& % 0 > > 0 $% È-,% ! 0 $%G % 6& Tv«%M H $% ,

M ,Z 0 M 1= C >& J E 2 C 0 HTML <tr></tr> 0 >

' . / H J C >& 2 % V . , >&'

6, a $% J 6; >& > , / H > ! Mozilla Firefox

M > px % % > ,& 6 % 6 ,