WP-CSS Tutorial in Bangla

ee u
k (Selector)
in ee
ek ee
ii ee
ee k
ee gun
ee n
ee kk
ee
ee
ee s
ee
ee
ee p
ee
ee !
ee "
ID # Class
ee (CSS)
CSS) u |
$ #:
# %& '#
' web designing e %k) u * un) ) ,i Cascading Style Sheets (CSS) e
l i e$ * /0 ee u ! 12 ', / ee e #*# web site e 3 4d
6!
ee e #*# 6 7! 12 /--1 ee e #*# ei,e#e e 9) :4 ) ' o %4<n 6!
2 ?2 ee ) m20 web site e restyle 6!
' stylesheet (6$ ' 12 $) m20 ei,e#e documents /) 4A / 6$ '
ee and ei,e#e e %k) a ) ' e A i ! ee $ '1 a i ei,e#e
mn 0 ) /webcoachbd.com e u !12 E ' ee $)
ee k u (
u ( CSS Sel ect or )
Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks
$ #:
# %& '#
ee k ee e F%n /! ) % , 6 ei,e#e ei#n ' 0 ee
e A m4k a)e )% ( CSS selectors) mn 0 * A) /
ee k e 1H:
SELECTOR { PROPERTY: VALUE }
"Property" / e# e ee e#n 6 ' ic#) , ) ' "VALUE" /, 6 % <
property # %
ee Selector Name:
selector name d ei,e#e 1 e A m 9) : 6! 6 ' ic26!: m% )
p { PROPERTY: VALUE }
selector name / p d paragraph tag % ?
i ee u ( I nt er nal CSS)

$ #:
# %& '#
Cascading Style Sheets $ ) * '? 6# - internal, external e inline 6$ ' in
ee / )$ a i e )2 1 61 ) / 6 /c <style> tag e 6 HTML <head> 1
e 0) $) / , u%/ %! /
01.<html>
02.<head>
03.<style>
04.</style>
05.</head>
06.<body>
07.<p>Your page's content!</p>
08.</body>
09.</html>
e#) as! )2 ?2 %$ ei style 1 2*2 bu 6 ) ei )2 ?2 CSS element 61
) 6c
i ee "# $% &:

$% &:
HTML code e #) CSS code $ /! , 6 aA ei %E! CSS 6 HTML e #) !

, u%/ %! /
01.<html>
02.<head>
03.<style>
04.p {color: white; }
05.body {background-color: black; }
06.</style>
07.</head>
08.<body>
09.<p>White text on a blackbackground!</p>
10.</body>
11.</html>
p% :
White text on a black background!
u u%/ ' %$? CSS code e #*# <body> and <p> HTML tags e e#n ) ) /! 1?
( ee )
"HTML tag" { "CSS Property" : "Value" ; }
7! s ) * * %$ 6 0 ee %! ei,e#e e#n ) ) /! 1?
pA# e ei,e#e e#n ?i ? 6 ! '# ? - p{ : ; }

) CSS attribute color , ? - p { color: ; }
Value / '# n e color , ? - p { color: white; }
e /!? paragraph tag e #* as) $ % /! 1?
e$ '# ', ee 0 <body> 1 background ) ?
pA# e HTML Body element ?i ? - body { : ; }
) CSS attribute, background-color , ? - body { background-color: ; }

CSS attribute background-color e , ? - body { background-color: black; }
a #! %$ 6 6 ee si p!1 o ) p% ? )$ '#% 6 7! k $) ) / '#
ee attribute e e ee attribute e 02 # N #) %!? { CSS attribute :
value;}
ek + ee ( Ext er nal CSS)

$ #:
# %& '#
,! 0 /! 6% ' ee ei,e#e /) 4A $ek ee i *2 #2 t ee code *
e ei i ".css" i extension %! 0 /! ee i <style> 1 e ) <link> 1
e /6 /!
)i $% &:
$% &:
pA#0 '# %! , ee $
1.body{ background-color: gray;}
2.p { color: blue; }
3.h3{ color: white; }
) ee i (.css) i extension %! 0 i # / test.css ) test ?Eo '#
a # %) ) i extension(.css) N $) /
e )2 ei,e#e i 9) : ee i A
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="/test.css" />
04.</head>
05.<body>
06.<h3> A White Header </h3>
07.<p> This paragraph has a blue font.
08.The background color of this page is gray because
09.we changed it with CSS! </p>
10.</body>
11.</html>
3 m i test.css e '1 6 / ,h '? ) 02 ,e % %

$2n
) ei,e#e i index.html / ei l aA. 6$ ee i '? $ 0 e
' ei,e#e i bu e $22 2 e ) k 2
p% :
A WHI TE HEADER
This paragraph has a blue font. The background color of this page is gray because we changed it
with ee!
" 5 ek + ee 6768 6?
6?
' o
i i k e content 4A $) h) /!
'% i / $ $2 /i ee 2 ! / 6! ei ee p) o
e
$ )
*2 #2 t "link" 1 e /6 e ee i p) o

e 62k 6!
ii ee u (
u ( I nl i ne CSS)
$ #:
# %& '#
ii ee /c ee style ei,e#e e 0) / !#
ek in ee /) ii ee e p* e aA /c e in ee d si
% ) Ao ' si override ) 6/, ii ee 6 ee e N ud /) ,2 ) T!
)i e ' 0 / u,)
ee I NLI NE - HTML ATTRI BUTE:

U p) ei,e#e 1 e #* ee 9) : 6! 6% ' ei,e#e e#n e si
) , )/ style # HTML attribute e #* p) ) ee property 12 $2
1.<p style="background: blue; color: white;">A new background and
2.font color with inline CSS</p>
p% :
A new background and font color with inline CSS
6 HTML element m) inline CSS e e * # %! /:
PSEUDO CODE:
<html tag style="css property1: value; css property2: value;"> </html tag>
p) ee statement a i semicolon ";" d 4A A e ee property o ) value ":"colons
d 4A A
ee k u ( CSS Cl ass)

$ #:
# %& '#
ee e #*# ei,e#e e#n e a$ si %! 6! e u%/ %! 7! s 6 * 2 '
$o ,c ' $ n E e % / ' ,c ? e / ' 01 ei aA 6 ee
classes / #*# ' ' ic 2 )
CLASS e FORMAT
Class / $2 * * ee e a *) (extension) ) / ' ei *) a
a i ei,e#e 1 e Class e # / ) / , u%/ %! /:
1.p.first{ color: blue; }
2.p.second{ color: red; }
01.<html>
02.<body>
03.<p>This is a normal paragraph.</p>
04.
05.<p class="first">This is a paragraph that uses the p.first CSS code!</p>
06.<p class="second">This is a paragraph that uses the p.second CSS code!</p>
07.</body>
08.
09.</html>
p% :
This is a normal paragraph.
This is a paragraph that uses the p.first CSS code!
This is a paragraph that uses the p.second CSS code!
' 6 ei,e#e e#n e A ee class / ) * 2 ' <p> 1 / si
%!? e ee class / a e si %< %!? '1 default si ' %< $
V
1.p{ color: red; font-size: 20px; }
2.p.test1{ color: blue; }
3.p.test2{ font-size: 12px; }
1.<html>
2.<body>
3.<p>This is a normal paragraph.</p>
4.<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
5.<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
6....
p% :
This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code!
This is a paragraph that uses the p.test2 CSS code!
ee 67gu# u ( CSS Backgr ound)

$ #:
# %& '#
' i background a 12 tt2 2 )i ei u

'% #61 / %$ u,) ' 6%
professional website 9) : ) , )/ light background e #* dark k / u,) ' 6% *2 2
$ 9) : ) , )/ 6 #n! g/61
ee e #*# ' 6 ee e#n e background color or image ) )?E
background image 0 p% ) / 7! ' !nt ) ' ?n#) e horizontally,
vertically repeat ) )?E ' background fixed position e $) scroll )
, ee background e V%/ %! /
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
p%
Thi s i s a <h4> wi t h a whi t e backgr ound
This is a <p> with a background using the hexadecimal value of #1078E1
This is an unordered list
with an RGB value of 149, 206, 145
ee BACKGROUND I MAGE:

gradient background e #) image left-to-right 6! aA 6$ iu sk )$ ' image
fixed as! $)
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.webcoachbd.com/pics/cssT/smallPic.jpg);
}
This <p> has a background image using a local path to the picture.
Thi s <h4> has a backgr ound i mage usi ng t he compl et e ur l pat h.
p {
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {
background-repeat: repeat-y;}
ol {
background-repeat: repeat-x;}
ul {
background-repeat: no-repeat;}
p% :
This <p> has a background image repeating in both directions (default repeat). If you use this
option, make sure that your image was designed to be repeated.
Thi s <h4> has a backgr ound i mage r epeat i ng ver t i cal l y ( y) . You coul d
t hi s t o add a st yl e t o t he si de of your el ement .
1. This is an ordered list
2. With a background that repeats
3. Horizontally (x)
With a background that repeats
in neither direction.
ee BACKGROUND I MAGE e a6s:

a6s:
' 6% % < ) , 6 ei,e#e e#n e #* A! image p% ) / )/ CSS's backgroundposition e #*# 6!, ) (length, percentages, keywords) p % < V! %$ /
p {
background-position: 20px 10px;
}
h4 {
background-position: 30% 30%;
}
ol {
background-position: top center;
}
p% :
This <p> has a background image positioned with pixel values.
Thi s <h4> has a backgr ound i mage posi t i oned wi t h per cent ages.
1. This is an ordered list

2. With a background that was positioned
3. using keywords.
ee GRADI ENT BACKGROUND:

6% gradient background 9) : ) , )/ ' pA# ) /
Image:
V image $2 * '# e horizontal 0 $? ei image 1 pixel e repeat attribute e
#*# e value
repeat-x ? 6 image % < e # /) % s4 ) 0 ,
u%/ paragraph e#n e gradient background 61 /!?
p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
p% :
Thi s i s a <h4> wi t h a whi t e backgr ound
This is a <p> with a background using the hexadecimal value of #1078E1
with an RGB value of 149, 206, 145
ee ) ( CSS Font )

$ #:
# %& '#
k 0 p% ) / ) !nt 0 ee ' %!? ' k size, color, style i)% ) )
' ? 0 k bold underline ) /! n ' percentage / 0 n
resize 6! ei 7! ', , /!?
ee ) \:
\:
6%o k ee n a # /! n p4 )k e s*: ee attribute , n e )
u%/ %! /
view source
print?
1.h4 { color: red; }
2.h5 { color: #9000A1; }
3.h6 { color: rgb(0, 220, 98); }
p% :
Thi s i s a r ed h4 header .
This is a hexadecimal #9000A1 h5 header.
This is an rgb(0, 220, 98) h6 header.
u u%/ % ) '# ) p # / ?
ee ) FAMI LY:

n family %2i group e 0k 6#: serif and sans-serif 17! %$ 1!? serif fonts /) sans-serif
fonts 6 computer monitor e $2 / E 6!
view source
print?
1.h4 { font-family: sans-serif; }
2.h5 { font-family: serif; }
3.h6 { font-family: arial; }
p% :
Thi s i s a header wi t h sans - ser i f f ont
This is a header with a serif font
This is a header with an arial font
ee ) 5 :
5 :
' values, percentages key terms / n ' N ) 6$ ' default n )
) , )$ Percentages / 0 n static value u,) !
view source
print?
1.p { font-size: 120%; }
2.ol{ font-size: 10px; }
3.ul{ font-size: x-large; }
Display:
This is a font size of 120%

1.
This is a font size of 10px
This is a font size of "x-large"
n-weight e a key terms 12 /: bold, bolder, and normal.

ee ) VARI ANT:
ee n Variant e /6 ' n small caps e ) ) ) Note: n n, ee n
Variant )i p '1 ]) /! ! u,)
view source
print?
1.p { font-variant: small-caps; }
p% :
this text was written normally and converted to small-caps
ee " kk u ( CSS Text )

$ #:
# %& '#
ee k e #*# ' k e spacing, decoration, e alignment !nt )
" k DECORATI ON:
k Decoration e #*# '# e underline %2 ) )?E line-through, overline e
underline i)% k e ^/ )
view source
print?
1.h4{ text-decoration: line-through; }
2.h5{ text-decoration: overline; }
3.h6{ text-decoration: underline; }
4.a { text-decoration: none; }
p% :
Thi s header has a l i ne t hr ough t he mi ddl e
This header has an overline
This header has an underline
This is a link without an underline - See our CSS Link tutorial for more information
" k I NDENT:
ee text-indent '# ei,e#e (<pre>) 1 ) / ) values or percentages /
'# text-indent % <

view source
print?
1.p { text-indent: 20px; }
2.h5 { text-indent: 30%; }
p% :
This is a paragraph that uses a text indentation with the value of 20px. This is the recommended
usage of text indentation.
This is a header that uses a text indentation of 30%. Tizag does not recommend indenting your text
with percentages.
" k ALI GN:

* ) website e default / k Align: left , ) A k Align attribute e /6 k e 0n
Alignment %! 6!
view source
print?
1.p { text-align: right; }
2.h5{ text-align: justify; }
p% :
This paragraph is aligned to the right side of the HTML element. If you ever find a use for using
right justify, please let us know. Just kidding, we don't really want to know.
This header is justified. We recommend that you either align your text to the left, which is the
default setting, or justify your text. But feel free to experiment with all the available alignment
options that are at your disposal.
" k TRANSFORM:
k Transform e #*# k e d) capitalize 6!
view source
print?
1.p { text-transform: capitalize; }
2.h5{ text-transform: uppercase; }
3.h6{ text-transform: lowercase; }
p% :
Hi, I Am Happy To See You.
SEE
HI , I AM HAPPY TO SE
E YOU.
hi, i am happy to see you.
ee WHI TE SPACE:

white-space attribute e #*# $ e i ,) A 6)k ' break <br /> 1 %
view source
print?
1.p { white-space: nowrap; }
p% :
This paragraph will not wrap until I tell it to with a break tag. As you can see, it makes the page
look quite ugly.
ee WORD SPACI NG:
ee Word Spacing attribute e #*#
b1 #* gap e # * %! 6!
view source
print?
1.p { word-spacing: 10px; }
p% :
This paragraph has a word-spacing value of 10px.
ee LETTER SPACI NG:
ee letter-spacing attribute e #*# b #* a 12 #* gap e # * %! 6!
view source
print?
1.p { letter-spacing: 3px; }
p% :
This is a paragraph with letter-spacing of 3px.
ee _7#\ u ( CSS Paddi ng)

$ #:
# %& '#
ee / ' ei,e#e e#n (paragraphs, tables i)% ) e default ) )
' ) b! e#n e border e ) content e #* a
view source
print?
1.p {padding: 15px; border: 1px solidblack; }
2.h5{padding: 0px; border: 1px solidred;}
This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.
This header has no padding, which places the text right against the border!
ee _7#\:
_7#\: 1 VALUE
1 Value < (top, right, bottom, left.) uniform padding 9) :
view source
print?
1.p {padding: 2%; border: 1px solidblack; }
2.h5{padding: 0px; border: 1px solidred;}
p% :
This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.
This header has no . It is only spaced away from the paragraph because the paragraph has a of
5 pixels!
ee _7#\:
_7#\: PADDI NGNG- ( DI RECTI ON) :
p) ei,e#e e#n e p4 )k , 0n A 6# top, right, bottom, e left direction
attribute e #*# 4A 4A % 6! e direction (6# -left) e % a12 a ) ) A
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}
p% :
This paragraph had one padding specified(left), using directional declaration.
This header had each padding specified separately, using directional declaration.
ee _7#\:
_7#\: 2 & 4 VALUES
6$ '# %2i Value / )$ pA# Value top e bottom Value % e d):!
Value left and right Value % # $) / * ) Value top %! 2 2 /! e
clockwise 0 e left e 7 /! Value e * /) / top, right, bottom e left
view source
print?
1.p {
2.padding: 5px 15px;
3.border: 1px solid black;
4.}
5.h5{
6.padding: 0px 5px 10px 3px;
7.border: 1px solid red;
8.}
p% :
This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15
pixels.
This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels,
and a left padding of 3 pixels.
ee MARGI N:
ee Margins p! ee attribute e #) *2 2 e 12 t2 d A /c:Margin ) ei,e#e e#n
e border e , a b! ' ) border e 0) a b! e #) Margin e
Value 6!
view source
print?
1.p {margin: 5px; border: 1px solidblack; }
2.h5{margin: 0px; border: 1px solidred;}
p% :
This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.
ee MARGI N: 1 VALUE

e ee : 1 Value e #)
view source
print?
1.<b> </b>
2.p {margin: 2%; border: 1px solidblack; }
3.h5{margin: 0px; border: 1px solidred;}
p% :
This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.
ee MARGI N: MARGI NN- ( DI RECTI ON) :

e ee : padding-(direction) e #)
view source
print?
1.p { margin-left: 5px; border: 1pxsolid black; }
2.h5{ margin-top: 0px;
3.margin-right: 2px;
4.margin-bottom: 13px;
5.margin-left: 21px;
6.border: 1px solid red; }
p% :
This paragraph had one margin specified (left), using directional declaration. Note that
there is still a margin below and above this paragraph. This is because our CSS only replaced
one of the four margins, which didn't effect the top and bottom margins.
This header had each margin specified separately, using directional declaration.
ee MARGI N: 4 VALUES

e ee : 2 & 4 Values e #)
view source
print?
1.p {margin: 5px 15px;
2.border: 1px solid black; }
3.h5{margin: 0px 5px 10px 3px;
4.border: 1px solid red;}
p% :
This paragraph has a top and bottom margin of 5 pixels and a right and left margin of
15 pixels.
This header has a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels,
and a left margin of 3 pixels.
ee 6#+ u ( CSS Bor der )

$ #:
# %& '#
ei,e#e e#ns e , 6 %$ 6! ) ee e #*# m20 customize 6! ee
e #*# e si ) 6!
6#+ STYLE TYPES:
a$ p Style !? 6 ' ' ?n#) 0n * 9) : )
ei u
ee k / ?,k #n A '1 '#% ee k u
'2
http://www.webcoachbd.com/css-tutorials/css-class
view source
print?
01.p.solid {border-style: solid; }
02.p.double {border-style: double;
03.p.groove {border-style: groove;
04.p.dotted {border-style: dotted;
05.p.dashed {border-style: dashed;
06.p.inset {border-style: inset; }
07.p.outset {border-style: outset;
08.p.ridge {border-style: ridge; }
09.p.hidden {border-style: hidden;
}
}
}
}
}
}
p% :
This is a solid border
This is a double border
This is a grooved border
This is a dotted border
This is a dashed border
This is an inset border
This is an outset border
This is a ridged border
This is a hidden
6#+ WI DTH:
-width attribute e /6 e 2 t2 ) 6! 0n key terms 02 %! -width % <
6! 0n term / 6) 6# thin, medium, thick i)%
view source
print?
1.table { border-width: 7px;
2.border-style: outset; }
3.td { border-width: medium;
4.border-style: outset; }
5.p { border-width: thick;
6.border-style: solid; }
p% :
This table has an outset border with a width of 7 pixels.
Each cell has an outset border
with a "medium" width.
This paragraph has a solid border with a "thick" width.

6#+ COLOR:
border-color attribute e #*# ' ?n#) color combination %4< n )2 )
view source
print?
01.table { border-color: rgb( 100, 100, 255);
02.border-style: dashed; }
03.
04.
05.td { border-color: #FFBD32;
06.border-style: ridge; }
07.
08.
09.p { border-color: blue;
10.border-style: solid; }
p% :
This table has a dashed border with the RGB value ( 100, 100, 255).
Each cell has a ridged border
with a hexadecimal color of #FFBD32.
This paragraph has a double border with a color of "blue".
ee s u ( CSS Li st )

$ #:
# %& '#
ss #2) %2i p 6A: unordered e ordered %! s ei,e#e /) a customize
6! e# image bullet points / unordered s e / 6!
ee s STYLE TYPE:
' 6% default number e ordered s unordered s e bullets/discs /) 0n si / ) ,
)/ ' s e 0n * si / ) , 0n si %! /:
1. Unordered list styles: square, circle, disc (default), e none
2. Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default),
e none
1.ol { list-style-type: upper-roman; }

2.ul { list-style-type: circle; }
p% :
Here is an ordered list:
I.
This list is
II.
using roman
III.
numerals
IV.
with CSS!
and now an unordered list:
o
o
o
This list is
using circle types
with CSS!
ee s i e:
e:
'# '1i ? normal bullet e ) image / 6!
1.ul { list-style-image: url("listArrow.gif"); }
2.ol { list-style-image: url("listArrow2.gif"); }
p% :
Here is an unordered list:
This list is
using a picture with CSS!
and now an ordered list:
1. This list is
2. using a picture
3. with CSS!
,! 0 /! Unordered s e kt image /
ee s POSI TI ON:
list-style-position e 02 inside % )$ s12 # /) 0) % A ' Outside % normal s
Position e A Outside 02 e default setting
1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }
p% :
This list is
using inside
positioning with CSS!
1. This list is
2. using outside
3. positioning with CSS!
s:
s:6 e %
ei list-style-type e #*# e# e s 6! 6$ ' list-style image )$ a liststyle %$
1.ul { list-style: upperroman insideurl("http://www.example.com/notHere.gif");}
p% :
I.
II.
III.
IV.
This list's image did

NOT load correctly
But because we chose to include
A CSS list type, we avoided a bland list!
ee s u ( CSS Li st )

$ #:
# %& '#
ss #2) %2i p 6A: unordered e ordered %! s ei,e#e /) a customize
6! e# image bullet points / unordered s e / 6!
ee s STYLE TYPE:
' 6% default number e ordered s unordered s e bullets/discs /) 0n si / ) ,
)/ ' s e 0n * si / ) , 0n si %! /:
1. Unordered list styles: square, circle, disc (default), e none
2. Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default),
e none
1.ol { list-style-type: upper-roman; }
2.ul { list-style-type: circle; }
p% :
Here is an ordered list:
I.
This list is
II.
using roman
III.
numerals
IV.
with CSS!
and now an unordered list:
o
o
o
This list is
using circle types
with CSS!
ee s i e:
e:
'# '1i ? normal bullet e ) image / 6!
1.ul { list-style-image: url("listArrow.gif"); }
2.ol { list-style-image: url("listArrow2.gif"); }
p% :
Here is an unordered list:
This list is
using a picture with CSS!
1. This list is
2. using a picture
3. with CSS!
,! 0 /! Unordered s e kt image /
ee s POSI TI ON:
list-style-position e 02 inside % )$ s12 # /) 0) % A ' Outside % normal s
Position e A Outside 02 e default setting
1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }
p% :
This list is
using inside
positioning with CSS!
1. This list is
2. using outside
3. positioning with CSS!
s:
s:6 e %
ei list-style-type e #*# e# e s 6! 6$ ' list-style image )$ a liststyle %$
1.ul { list-style: upperroman insideurl("http://www.example.com/notHere.gif");}
p% :
I.
II.
III.
IV.
This list's image did

NOT load correctly
But because we chose to include
A CSS list type, we avoided a bland list!
ee \ u ( Pseudo Cl ass)

$ #:
# %& '#
ee e #*# e 1 e '# ik 61 )

ee e /
e /\ a6s:
a6s:
' e , 0n as '? ee e #*# p) as
customize 6! ,
keyword 12 '% as %

1 link e e 6 / /!
2 visited - e e 6 d / /!? nd V mouse $ /!
3 hover - e e 6 V #u $ A A visual ik %$

4 active - this is a link that is in the process of being clicked
ee PSEUDOPSEUDO- CLASSES:

ee Pseudo-Classe e #*# '# ee e , as(state)modify )
view source
print?
1.a:(STATE'S NAME) { attribute: value; }
state as # / pseudo class 6 ei,e#e e#n %$) # / ) % link, visited e hover
ei order # , '# N0 6 ee 9) : )
1.a: { color: red; }
2.a:visited { color: red; }
3.a:hover { color: blue; }
1.<a href="/">This is a special CSS Link</a>!
Link<
p% :
This is Link
'# Underline %2 ) text-decoration
text
e 02 none %i
1.a:link { color: red; text-decoration:
text
none; }
2.a:visited { color: red; text-decoration: none; }
3.a:hover { color: blue; }
p% :
#u $ d
#u $
Underline %2 #! ) /o! V,) normal text e ,) # 4s /)
%2 as 6# e hover e 0n /o! u,)
01.a:link {
02.color: white;
03.background-color: black;
04.text-decoration: none;
05.border: 2px solid white;
06.}
07.a:visited {
08.color: white;
09.background-color: black;
11.border: 2px solid white;
12.}
13.a:hover {
14.color: black;
15.background-color: white;
17.border: 2px solid black;
18.}
p% :
#u $ d
the-top
This link is a almost over-the
#u $
01.a:link {
02.color: blue;
03.background-color: red;
04.font-size: 26px;
05.border: 10px outset blue;
06.font-family: sans-serif;
serif;
07.text-transform: lowercase;
09.}
10.a:visited {
11.color: blue;
13.font-size: 26px;
14.border: 10px outset blue;
15.font-family: sans-serif;
serif;
16.text-transform: lowercase;
18.}
19.a:hover{
20.color: blue;
22.font-size: 27px;
23.border: 10px inset blue;
24.font-family: serif;
25.text-transform: uppercase;
uppercase
26.text-decoration: line-through;
line
27.letter-spacing: 3px;
28.word-spacing: 6px;
29.font-weight: normal;
30.}
p% :
#u $ d
#u $
ee + ( CSS Cur sor )

$ #:
# %& '#
'# uin, k / #! 0n #u 'i %$? 0n s) k #u e 'i 0n /!
* 6$ ' site visit $o 0n s) k #u e 'i 0n 9) : 6! 6 ee
d m
ee + 5i:
5i:
e '% %$ 0 0n ei,e#e e#n e #u 'i ) 6!
1 default - normal mouse cursor icon p%
2 wait ei mouse icon % 6 computer ,n ?
3 crosshair - cross hair ,h p%
4 text - ei "I" shape icon % 6, 6$ ' text select
5 pointer ei hand icon % 6, 6$ ' ei,e#e link V hover
6 help- ei icon % 6 ' 7! /6 pk ) ,c (question mark)
1.p { cursor: wait }
2.h4 { cursor: help }
3.h5 { cursor: crosshair }
p% :
Please Wait While this Web Page Loads
How May I Hel p You?
Stick Your Hands in the Air!
ee "p_ + u (
u ( CSS Pr oper t i es)
$ #:
# %& '#
ei,e#e e ) 1 ( <b>, <body>, <a>, i)%) 12 / ei,e#e language e 1) e '2 ee e
' tutorial E #! a 12 property ( Font, Text, Box, Color i)%) k ? ',
/
ee ) "p_ +:
ee n p e /6 e k e graphical representation !nt 6!
, ee n property 12 %! /
font
font-family
font-size
font-style
font-weight
font-variant
ee " k "p_ +:

ee k p 6 k e spacing, alignment, decoration i)% 7!12 !nt , ee k
property 12 %! /
letter-spacing
word-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
ee 6k "p_ +:
ee k p 6 ei,e#e e#n e 0) e , a % e% #* Border, Margin e
Padding property 12 ' , property !? 12 / top, right, bottom e left ee box
property 12 %! /
Margin
Padding
Border
Border-width
Border-color
Border-style
Width
Height
Float
Clear
ee "p_ +:
ee property % 6, * '# % < ei,e#e e#n e k e /
, ee property %! /
Color
ee 67gu# "p_ +:
ee background p 6 background e e# 7! !nt ,) / 6% background single color
image /! A 6% ) image /! A )/ ' image e position N ) ' image
repeat left-to-right
aA top-to-bottom ) , ee background property 12 %! /
Background
Background Color
Background Image
Background Repeat
Background Attachment
Background Position
ee CLASSI FI CATI ON "p_ +:

Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position
ee _h u ( CSS Posi t i on)

$ #:
# %& '#
ee e #*# '# ei,e#e e#ns e exact % )
POSI TI ON RELATI VE:

Relative position d ei,e#e e#n e position a e#n e k ) 6!
01.h3 {
02.position: relative;
03.top: 15px;
04.left: 150px;
05.}
06.p {
08.left: -10px;
09.}
Move Left - ekt left e negative value / ) /

Move Right - ekt left e positive value / ) /
Move Up -
ekt top e negative value / ) /
Move Down - ekt left e positive value / ) /

u%/ :
ee %! '1
ee %! N
POSI TI ON ABSOLUTE:
absolute position d ei,e#e e#n e exact position (pixel value) % 6!
01.h3 {
02.position: absolute;
03.top: 50px;
04.left: 45px;
05.}
06.p{
07.position: absolute;
08.top: 75px;
09.left: 75px;
10.}
u%/ :
ee %! '1
ee %! N
POSI TI ON FI XED
e e#n 6% k % )/ bu uin k as e bu 6% sk )2o
s (fixed) A
u%/ :e$ %$2 "sk o '# " ei i k %! /!? )i sk o e ) as A

sk o '#
Note: Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
:Internet Explorer e e support 6% e !DOCTYPE % < %
ee " ( CSS Layer s)

$ #:
# %& '#
e '# %$

/ #*# e#n u %$, 6 ee
e #*# '# !nt )
ee e p) e#n priority %! /! A 6% %2 overlapping
CSS positioned
elements A, )/ 6 priority ) '1 u %$
Priority * ) '# z-index value A z-index value 6) ) priority ))
01.h4{
03.top: 30px;
04.left: 50px;
05.z-index: 2;
06.background-color: #336699;
07.}
08.
09.
10.p {
12.z-index: 1;
13.background-color: #FFCCCC;
14.}
p% :
ee j u ( CSS Fl oat )

$ #:
# %& '#
" d ? e
a as 6! ? e , kk A 6# %$ 6! magazines
%t 0n ' ? , k e as

FLOAT I MAGE:
ee Float attribute e /6 $2 / k ? , Wrapping 6!
' ic#) ? # Float ) , V%/ %! /
1.img.floatLeft {
2.float: left;
3.margin: 4px;
4.}
5.img.floatRight {
6.float: right;
7.margin: 4px;
8.}
1.<body>
2.<img src="/sunset.gif">
3.<p>The images are contained with...</p>
4.
5.
7.<p>This second paragraph has an...</p>
8.</body>
p% :
The images are contained within the paragraph tag. The image has floated
to the left, and also to the right because we have used both types of image floating in this
example. Notice how the text wraps around the images quite nicely. The images are contained
within the paragraph tag. The image has floated to the left, and also to the right because we have
used both types of image floating in this example. Notice how the text wraps around the images
quite nicely.
This second paragraph has an image that is floated to the right. It should
be noted that a margin should be added to images so that the text does not get too close to the
image. There should always be a few pixels between words and borders, images, and other
content. This second paragraph has an image that is floated to the right. It should be noted that a
margin should be added to images so that the text does not get too close to the image. There
should always be a few pixels between words and borders, images, and other content.
FLOATI NG MULTI PLE I MAGES:
6% '# a 12 ? float ) ,i 6 e , ' as kt '# ee Clear attribute
e #*# ) ) , V%/ '# % float ?
1.img.floatRightClear {
2.float: right;
3.clear: right;
4.margin: 4px;
5.}
1.<body>
4.<p>The images are appearing...</p>
5.<p>If we had specified...</p>
6.<p>The number of paragraphs...</p>
7.</body>
p% :
The images are appearing below one another because the CSS clear attribute was used with the
value of "right". This forces all right floating items to appear below any previous right floating
items.
If we had specified clear:left in our CSS code, then there would be no effect on the images, and
they would appear in their default pattern, next to each other, all on one line.
The number of paragraphs, and the size of the paragraphs, will not effect how these images will
appear.
ee 5i# 6 k ( CSS I D Vs Cl ass)

$ #:
# %& '#
e p!i n/ 4< 6 $ '# ee ID / ' $ '# ee Classes / ei a*!
e 7! s ', /
5i# 6+k ( I D SELECTOR)
e ei,e#e e#n e si # / e N ee ' s k / 2* %
e%
"id" e "selector"
ID k e (a) e#n si %) F) /
id / e#n e unique identifier ID p!i
ee classes ??nd ) e#n e special case %
1.p#exampleID1 { background-color: orange; }
2.p#exampleID2 { text-transform: uppercase; }
1.<p id="ExampleID1">This paragraph has an ID name of
2."exampleID1" and has a orange CSS defined background</p>
3.<p id="ExampleID2">This paragraph has an ID name of
4."exampleID2" and has had its text transformed to uppercase letters. </p>
**id # $ %

2 2 )/ e #
k
p% :
This paragraph has an ID name of "exampleID1" and has a orange CSS defined background.
THIS PARAGRAPH HAS AN ID NAME OF "EXAMPLEID2" AND HAS HAD ITS
TEXT TRANSFORMED TO UPPERCASE LETTERS.
k 6+k ( CLASS SELECTOR)
e% e#n si %
class selector F) /
class selector ei,e#e e class attribute /
e e "." %
$ (l
)) /
, u%/ 6 ei,e#e e#ns e class="center" e A )%
Align #b$ /
6
1..center {text-align:center;}
' ic ei,e#e e 6 e e#n N %) 6 e class d p0) /6#:
1.p.center {text-align:center;}
**class # $ %

2 2 )/ e in ekp e
ID = e Identification (ID) e k unique
Class = a 1a e class e E
ee plh+ u ( CSS Di spl ay)

$ #:
# %& '#
ee V%/ %$? '# #2 3 4d 0n ? ei,e#e e ?2 V%/ line break i
'# ?2 % < V%/ anchor 1 e line break 9) : ? ei line break 12 block value e #*#
9) : /!?
1.a { display: block; }
2.p { display: inline; }
01.<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip
the Web
02.</a>
03....
04.<a href="http://www.webcoachbd.com/" target="_blank">Webcoachbd - Learn to
Whip the Web
05.</a>
06.<br />
07.<p>These paragraph </p>
08.<p>elements</p>
09.<p>have been </p>
10.<p>inlined.</p>
p% :
Webcoachbd - Learn to Whip the WebWebcoachbd - Learn to Whip the Web
Webcoachbd - Learn to Whip the Web
Webcoachbd - Learn to Whip the Web
These paragraph
elements
have been
inlined.
DI SPLAY NONE ( HI DDEN)

DDEN) :
?2 #! ' content, Hide $ p! /) %$ p! /) none value e #*#
?2 6 content, Hide $ 6!
1.p.show { display: block }
2.p.hide { display: none; }
1.<p class="show">This paragraph is displayed correctly because
2.it has a display value of "block".</p>
3.<p class="hide">This paragraph is hidden because

4.it has a display value of "none". Why am I even
5.writing anything in here?</p>
p% :
This paragraph is displayed correctly because it has a display value of "block".
i 2011 webcoachbd. st k)

WP-CSS Tutorial in Bangla

Uploaded by

Document Information

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

WP-CSS Tutorial in Bangla

Uploaded by

Copyright:

Available Formats

ee u

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

i   ee u   ( I nt er nal CSS)

i   ee " # $% &:

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

HTML code e #)  CSS code  $ /! , 6 aA ei %E! CSS 6 HTML e #) !

pA# e ei,e#e e #n ?i  ? 6 ! '#    ? - p{ : ; }

pA# e HTML Body element ?i  ? - body { : ; }

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

)  CSS attribute, background-color ,  ? - body { background-color: ; }

ek +  ee ( Ext er nal CSS)

3 m i test.css e '1 6 / ,h '? ) 02 ,e % %

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

*2 #2 t "link" 1 e /6 e ee i  p) o

ee I NLI NE - HTML ATTRI BUTE:

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

ee k u   ( CSS Cl ass)

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

This is a normal paragraph.

ee 67 g u# u   ( CSS Backgr ound)

' i background a  12 tt2 2 )i ei u

This is a <p> with a background using the hexadecimal value of #1078E1

This is an unordered list

with an RGB value of 149, 206, 145

ee BACKGROUND I MAGE:

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

This is an unordered list

With a background that repeats

ee BACKGROUND I MAGE e a6s :

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

1. This is an ordered list

ee GRADI ENT BACKGROUND:

Thi s i s a <h4> wi t h a whi t e backgr ound

This is a <p> with a background using the hexadecimal value of #1078E1

This is an unordered list

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

with an RGB value of 149, 206, 145

ee ) ( CSS Font )

u u%/    %  ) '#    ) p  # /  ?

ee ) FAMI LY:

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

This is a font size of 120%

This is a font size of 10px

This is a font size of "x-large"

n-weight e a key terms 12  / : bold, bolder, and normal.

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

ee " kk u   ( CSS Text )

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

 '#  text-indent % < 

" k ALI GN:

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

3.h6{ text-transform: lowercase; }

ee WHI TE SPACE:

b1  #* gap e  # *   %! 6!

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

ee _7 #\ u   ( CSS Paddi ng)

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

ee MARGI N: 1 VALUE

ee MARGI N: MARGI NN- ( DI RECTI ON) :

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

ee MARGI N: 4 VALUES

ee 6#+ u   ( CSS Bor der )

Wants More Updated Bangla e-books(pdf): www.facebook.com/tanbir.ebooks

ee u

i ee u ( I nt er nal CSS)

i ee "# $% &:

HTML code e #) CSS code $ /! , 6 aA ei %E! CSS 6 HTML e #) !

pA# e ei,e#e e#n ?i ? 6 ! '# ? - p{ : ; }

pA# e HTML Body element ?i ? - body { : ; }

) CSS attribute, background-color , ? - body { background-color: ; }

ek + ee ( Ext er nal CSS)

3 m i test.css e '1 6 / ,h '? ) 02 ,e % %

*2 #2 t "link" 1 e /6 e ee i p) o

ee k u ( CSS Cl ass)

ee 67gu# u ( CSS Backgr ound)

' i background a 12 tt2 2 )i ei u

ee BACKGROUND I MAGE e a6s:

ee ) ( CSS Font )

u u%/ % ) '# ) p # / ?

ee ) FAMI LY:

n-weight e a key terms 12 /: bold, bolder, and normal.

ee " kk u ( CSS Text )

'# text-indent % <

b1 # gap e # %! 6!

ee _7#\ u ( CSS Paddi ng)

ee 6#+ u ( CSS Bor der )

ee s u ( CSS Li st )

ee s u ( CSS Li st )

ee \ u ( Pseudo Cl ass)

ee e #*# e 1 e '# ik 61 )

customize 6! ,

keyword 12 '% as %

3 hover - e e 6 V #u $ A A visual ik %$

ee + ( CSS Cur sor )

ee " k "p_ +:

aA top-to-bottom ) , ee background property 12 %! /

ee CLASSI FI CATI ON "p_ +:

ee _h u ( CSS Posi t i on)

ee e #*# '# ei,e#e e#ns e exact % )

Move Left - ekt left e negative value / ) /

ekt top e negative value / ) /

Move Down - ekt left e positive value / ) /

ee " ( CSS Layer s)

e '# %$

ee j u ( CSS Fl oat )

" d ? e

%t 0n ' ? , k e as

ee 5i# 6 k ( CSS I D Vs Cl ass)

**id # $ %

**class # $ %

ee plh+ u ( CSS Di spl ay)

i 2011 webcoachbd. st k)