Css+tutorial+in+bangla

e ee ee ee e uuuu
• k (Selector)
• in e e
• ek e e
• i i e e
• e e k
• e e g un
• e e n
• e e kk
• e e
• e e
• e e s
• e e
• e e
• e e p я
• e e я
• e e
• e e
• ID Class
e ee ee ee e ((((CSSCSSCSSCSS)))) uuuu ||||
:
я web designing e k u u n i Cascading Style Sheets (CSS) e
l i e e e u e e e web site e d
।
e e e ---
1 e e e ei e e e я o n ।
2 e e m web site e restyle ।
stylesheet ( ) m ei e e documents
e e and ei e e e k aя e i e e a i ei e e
m n я webcoachbd.com e u e e ।
e e k ue e k ue e k ue e k u ( CSS Sel ect or )( CSS Sel ect or )( CSS Sel ect or )( CSS Sel ect or )

:
e e k e e e n , ei e e ei n e e
e mk a e ( CSS selectors) m n ।
e e k e :
SELECTOR { PROPERTY: VALUE }
"Property" e e e e e n ic "VALUE" ,
property ।
e ee ee ee e Selector Name:
selector name d ei e e e m ic m ।
p { PROPERTY: VALUE }
selector name p d paragraph tag ।
i e e ui e e ui e e ui e e u ( I nt er nal CSS)( I nt er nal CSS)( I nt er nal CSS)( I nt er nal CSS)
:
Cascading Style Sheets - internal, external e inline। in
e e a i e c <style> tag e HTML <head>
e 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 a s я ei style b uя ei я CSS element
c ।
i e ei e ei e ei e e ::::

HTML code e CSS code , a ei CSS 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>
pppp :
White text on a black background!
u u CSS code e <body> and <p> HTML tags e e n ।
e ee ee ee e
"HTML tag" { "CSS Property" : "Value" ; }
• s e e ei e e e n ।
p e ei e e e n i я - p{ : ; }
CSS attribute color - p { color: ; }
Value n e color - p { color: white; }
e paragraph tag e a s ।
• e e e <body> background ।
p e HTML Body element i - body { : ; }

CSS attribute, background-color - body { background-color: ; }
CSS attribute background-color e - body { background-color: black; }
a e e s i p o p k
e e attribute e e e e attribute e { CSS attribute :
value;}।
ek e eek e eek e eek e e ( Ext er nal CSS)( Ext er nal CSS)( Ext er nal CSS)( Ext er nal CSS)
:
e e ei e e ek e e i t e e code
e ei i ".css" i extension e e i <style> e <link>
e ।
iiii ::::
p e e ।
1.body{ background-color: gray;}
2.p { color: blue; }
3.h3{ color: white; }
e e i (.css) i extension i test.css । test o
a i extension(.css) ।
e ei e e i e e i ।
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 / h ,e n
ei e e i index.html e i l a e e i e
ei e e i b uя e e k ।

pppp :
A WHI TE HEADERA WHI TE HEADERA WHI TE HEADERA WHI TE HEADER
This paragraph has a blue font. The background color of this page is gray because we changed it
with e e !
ekekekek e ee ee ee e ????
o i я i k e content h ।
i яi e e e i e e p o я e
t "link" e e e e i p o я e k ।
i i e e ui i e e ui i e e ui i e e u ( I nl i ne CSS)( I nl i ne CSS)( I nl i ne CSS)( I nl i ne CSS)
:
i i e e c e e style ei e e e ।
ek in e e i i e e e p e a c e in e e d s i
o s i override , i i e e e e e u d
i e u ।
e ee ee ee e I NLI NEI NLI NEI NLI NEI NLI NE ---- HTML ATTRI BUTE:HTML ATTRI BUTE:HTML ATTRI BUTE:HTML ATTRI BUTE:
p ei e e e e e ei e e e n e s i
style HTML attribute e p e e property ।
1.<p style="background: blue; color: white;">A new background and
2.font color with inline CSS</p>
pppp :
A new background and font color with inline CSS
HTML element m inline CSS e e :
PSEUDO CODE:PSEUDO CODE:PSEUDO CODE:PSEUDO CODE:
<html tag style="css property1: value; css property2: value;"> </html tag>
p e e statement a i semicolon ";" d e e e property o value ":"colons

d ।
e e k ue e k ue e k ue e k u ( CSS Cl ass)( CSS Cl ass)( CSS Cl ass)( CSS Cl ass)
:
e e e ei e e e n e a s i e u s ।
o c n e c e ei a e e
classes ic ।
CLASSCLASSCLASSCLASS eeee FORMATFORMATFORMATFORMAT
Class e e e a (extension) ei a
a i ei e e 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>
pppp :
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!
ei e e e n e e e class <p> s i
e e e class a e s i default s i
я ।
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....

pppp :
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!
e ee ee ee e g ug ug ug u uuuu ( CSS Backgr ound)( CSS Backgr ound)( CSS Backgr ound)( CSS Backgr ound)
:
i background a tt i ei u u
professional website light background e dark k u
я n g ।
e e e e e e n e background color or image
background image p nt n e horizontally,
vertically repeat background fixed position e scroll ।
e e background e ।
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
pppp
Thi s i s a <h4> wi t h a whi t e backgr oundThi s i s a <h4> wi t h a whi t e backgr oundThi s i s a <h4> wi t h a whi t e backgr oundThi 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
e ee ee ee e BACKGROUND I MAGE:BACKGROUND I MAGE:BACKGROUND I MAGE:BACKGROUND I MAGE:
gradient background e image left-to-right a iuя sk image
fixed a s ।
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.Thi s <h4> has a backgr ound i mage usi ng t he compl et e ur l pat h.Thi s <h4> has a backgr ound i mage usi ng t he compl et e ur l pat h.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;}
pppp :
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 dThi s <h4> has a backgr ound i mage r epeat i ng ver t i cal l y ( y) . You coul dThi s <h4> has a backgr ound i mage r epeat i ng ver t i cal l y ( y) . You coul dThi 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 ot hi s t ot hi s t ot hi s t o add a st yl e t o t he si de of your el ement .add a st yl e t o t he si de of your el ement .add a st yl e t o t he si de of your el ement .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.
e ee ee ee e BACKGROUND I MAGEBACKGROUND I MAGEBACKGROUND I MAGEBACKGROUND I MAGE eeee a sa sa sa s ::::
ei e e e n e image p CSS's background-
position e (length, percentages, keywords) p ।
p {
background-position: 20px 10px;
}
h4 {
background-position: 30% 30%;
}
ol {
background-position: top center;
}
pppp :
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.Thi s <h4> has a backgr ound i mage posi t i oned wi t h per cent ages.Thi s <h4> has a backgr ound i mage posi t i oned wi t h per cent ages.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.
e ee ee ee e GRADI ENT BACKGROUND:GRADI ENT BACKGROUND:GRADI ENT BACKGROUND:GRADI ENT BACKGROUND:
gradient background p я ।
Image:
image । e horizontal । ei image 1 pixel e repeat attribute e
e value repeat-x image e s
u paragraph e n e gradient background
p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
pppp :
Thi s i s a <h4> wi t h a whi t e backgr oundThi s i s a <h4> wi t h a whi t e backgr oundThi s i s a <h4> wi t h a whi t e backgr oundThi 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
e ee ee ee e ( CSS Font )( CSS Font )( CSS Font )( CSS Font )
:
k p nt e e k size, color, style i
я k bold underline n я percentage n
resize ei ।
e ee ee ee e ::::
o k e e n a n p k e s e e attribute। n e
u ।
view source
print?
1.h4 { color: red; }
2.h5 { color: #9000A1; }
3.h6 { color: rgb(0, 220, 98); }
pppp :
Thi s i s a r ed h4 header .Thi s i s a r ed h4 header .Thi s i s a r ed h4 header .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 ।
e ee ee ee e FAMI LY:FAMI LY:FAMI LY:FAMI LY:
n family i group e k : serif and sans-serif । serif fonts sans-serif
fonts computer monitor e я ।
view source

print?
1.h4 { font-family: sans-serif; }
2.h5 { font-family: serif; }
3.h6 { font-family: arial; }
pppp :
Thi s i s a header wi t h sansThi s i s a header wi t h sansThi s i s a header wi t h sansThi s i s a header wi t h sans---- ser i f f ontser i f f ontser i f f ontser i f f ont
This is a header with a serif font
This is a header with an arial font
e ee ee ee e ::::
values, percentages key terms n default n
Percentages 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 : bold, bolder, and normal.
e ee ee ee e VARI ANT:VARI ANT:VARI ANT:VARI ANT:
e e n Variant e n small caps e Note: n n, e e n
Variant i p u ।
view source

print?
1.p { font-variant: small-caps; }
pppp :
this text was written normally and converted to small-caps
e ee ee ee e kkkkkkkk uuuu ( CSS Text )( CSS Text )( CSS Text )( CSS Text )
:
e e k e k e spacing, decoration, e alignment nt ।
kkkk DECORATI ON:DECORATI ON:DECORATI ON:DECORATI ON:
k Decoration e e underline 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; }
pppp :
Thi s header has a l i ne t hr ough t he mi ddl eThi s header has a l i ne t hr ough t he mi ddl eThi s header has a l i ne t hr ough t he mi ddl eThi 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
kkkk I NDENT:I NDENT:I NDENT:I NDENT:
e e text-indent ei e e (<pre>) values or percentages

text-indent ।
view source
print?
1.p { text-indent: 20px; }
2.h5 { text-indent: 30%; }
pppp :
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.
kkkk ALI GN:ALI GN:ALI GN:ALI GN:
website e default k Align: left k Align attribute e k e n
Alignment ।
view source
print?
1.p { text-align: right; }
2.h5{ text-align: justify; }
pppp :
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.
kkkk TRANSFORM:TRANSFORM:TRANSFORM:TRANSFORM:
k Transform e k e d capitalize ।
view source
print?
1.p { text-transform: capitalize; }
2.h5{ text-transform: uppercase; }

3.h6{ text-transform: lowercase; }
pppp :
Hi, I Am Happy To See You.
HI , I AM HAPPY TO SEHI , I AM HAPPY TO SEHI , I AM HAPPY TO SEHI , I AM HAPPY TO SEE YOU.E YOU.E YOU.E YOU.
hi, i am happy to see you.
e ee ee ee e WHI TE SPACE:WHI TE SPACE:WHI TE SPACE:WHI TE SPACE:
white-space attribute e e i k break <br /> ।
view source
print?
1.p { white-space: nowrap; }
pppp :
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.
e ee ee ee e WORD SPACI NG:WORD SPACI NG:WORD SPACI NG:WORD SPACI NG:
e e Word Spacing attribute e b gap e ।
view source
print?
1.p { word-spacing: 10px; }
pppp :
This paragraph has a word-spacing value of 10px.
e ee ee ee e LETTER SPACI NG:LETTER SPACI NG:LETTER SPACI NG:LETTER SPACI NG:
e e letter-spacing attribute e b gap e ।
view source
print?
1.p { letter-spacing: 3px; }
p :
T h i s i s a p a r a g r a p h w i t h l e t t e r - s p a c i n g o f 3 p x .

e ee ee ee e uuuu ( CSS Paddi ng)( CSS Paddi ng)( CSS Paddi ng)( CSS Paddi ng)
:
e e ei e e e n (paragraphs, tables i ) e default
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!
e ee ee ee e : 1 VALUE: 1 VALUE: 1 VALUE: 1 VALUE
1 Value (top, right, bottom, left.) uniform padding ।
view source
print?
1.p {padding: 2%; border: 1px solidblack; }
2.h5{padding: 0px; border: 1px solidred;}
pppp :
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!
e ee ee ee e : PADDI NG: PADDI NG: PADDI NG: PADDI NG---- ( DI RECTI ON) :( DI RECTI ON) :( DI RECTI ON) :( DI RECTI ON) :
p ei e e e n e p k n top, right, bottom, e left । direction
attribute e e direction ( -left) e 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;
}
pppp :
This paragraph had one padding specified(left), using directional declaration.
This header had each padding specified separately, using directional declaration.
e ee ee ee e : 2 & 4 VALUES: 2 & 4 VALUES: 2 & 4 VALUES: 2 & 4 VALUES
i Value p Value top e bottom Value e d
Value left and right Value Value top e
clockwise e left e 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.}
pppp :
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.
e ee ee ee e MARGI N:MARGI N:MARGI N:MARGI N:

e e Margins p e e attribute e e t c:Margin ei e e e n
e border e a border e a e Margin e
Value ।
view source
print?
1.p {margin: 5px; border: 1px solidblack; }
2.h5{margin: 0px; border: 1px solidred;}
pppp :
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.
e ee ee ee e MARGI N: 1 VALUEMARGI N: 1 VALUEMARGI N: 1 VALUEMARGI N: 1 VALUE
e e e : 1 Value e
view source
print?
1.<b> </b>
2.p {margin: 2%; border: 1px solidblack; }
3.h5{margin: 0px; border: 1px solidred;}
pppp :
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.
e ee ee ee e MARGI N: MARGI NMARGI N: MARGI NMARGI N: MARGI NMARGI N: MARGI N---- ( DI RECTI ON) :( DI RECTI ON) :( DI RECTI ON) :( DI RECTI ON) :
e e e : 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; }
pppp :
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.
e ee ee ee e MARGI N: 4 VALUESMARGI N: 4 VALUESMARGI N: 4 VALUESMARGI N: 4 VALUES
e e e : 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;}
pppp :
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.
e e ue e ue e ue e u ( CSS Bor der )( CSS Bor der )( CSS Bor der )( CSS Bor der )
:
ei e e e ns e e e e m customize e e
e e s i ।
STYLE TYPES:STYLE TYPES:STYLE TYPES:STYLE TYPES:
a p Style n n ।

ei u e e k ,k n я e e k u
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; }
pppp :
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
WI DTH:WI DTH:WI DTH:WI DTH:
-width attribute e e t n key terms -width
n term 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; }
pppp :
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.
COLOR:COLOR:COLOR:COLOR:
border-color attribute e n color combination n ।
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; }
pppp :
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".
e e se e se e se e s uuuu ( CSS Li st )( CSS Li st )( CSS Li st )( CSS Li st )
:
ss i p : unordered e ordered ।সিএসএস s ei e e a customize
e image bullet points unordered s e я ।
e ee ee ee e ssss STYLE TYPE:STYLE TYPE:STYLE TYPE:STYLE TYPE:
default number e ordered s unordered s e bullets/discs n s i
s e я n s i n s i :
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; }
pppp :
Here is an ordered list:
I. This list is
II. using roman
III. numerals
IV. with CSS!
and now an unordered list:
o This list is
o using circle types
o with CSS!
e ee ee ee e s i яs i яs i яs i я ::::
i normal bullet e image ।
1.ul { list-style-image: url("listArrow.gif"); }
2.ol { list-style-image: url("listArrow2.gif"); }
pppp :
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!
Unordered s e k t image ।
e ee ee ee e ssss POSI TI ON:POSI TI ON:POSI TI ON:POSI TI ON:
list-style-position e inside s я Outside normal s
Position e Outside e default setting ।
1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }
pppp :
• This list is

• using inside
• positioning with CSS!
1. This list is
2. using outside
3. positioning with CSS!
ssss:::: eeee
ei list-style-type e e e s list-style image a list-
style ।
1.ul { list-style: upper-
roman insideurl("http://www.example.com/notHere.gif");}
pppp :
I. This list's image did
II. NOT load correctly
III. But because we chose to include
IV. A CSS list type, we avoided a bland list!
e e s ue e s ue e s ue e s u ( CSS Li st )( CSS Li st )( CSS Li st )( CSS Li st )
:
ss i p : unordered e ordered ।সিএসএস s ei e e a customize
e image bullet points unordered s e я ।
e ee ee ee e ssss STYLE TYPE:STYLE TYPE:STYLE TYPE:STYLE TYPE:
default number e ordered s unordered s e bullets/discs n s i
s e я n s i n s i :
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; }
pppp :
Here is an ordered list:

I. This list is
II. using roman
III. numerals
IV. with CSS!
and now an unordered list:
o This list is
o using circle types
o with CSS!
e ee ee ee e s i яs i яs i яs i я ::::
i normal bullet e image ।
1.ul { list-style-image: url("listArrow.gif"); }
2.ol { list-style-image: url("listArrow2.gif"); }
pppp :
Here is an unordered list:
• This list is
• using a picture with CSS!
1. This list is
2. using a picture
3. with CSS!
Unordered s e k t image ।
e ee ee ee e ssss POSI TI ON:POSI TI ON:POSI TI ON:POSI TI ON:
list-style-position e inside s я Outside normal s
Position e Outside e default setting ।
1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }
pppp :
• This list is
• using inside
• positioning with CSS!

1. This list is
2. using outside
3. positioning with CSS!
ssss:::: eeee
ei list-style-type e e e s list-style image a list-
style ।
1.ul { list-style: upper-
roman insideurl("http://www.example.com/notHere.gif");}
pppp :
I. This list's image did
II. NOT load correctly
III. But because we chose to include
IV. A CSS list type, we avoided a bland list!
e e ue e ue e ue e u ( Pseudo Cl ass)( Pseudo Cl ass)( Pseudo Cl ass)( Pseudo Cl ass)
:
e e e e e i k ।
e ee ee ee e eeee //// a sa sa sa s ::::
я e n a s e e e p a s customize
keyword a s ।
1111 link –e e ।
2222 visited - e e n mouse ।
3333 hover - e e u visual i k ।
4444 active - this is a link that is in the process of being clicked

e ee ee ee e PSEUDOPSEUDOPSEUDOPSEUDO---- CLASSES:CLASSES:CLASSES:CLASSES:
e e Pseudo-Classe e
view source
print?
1.a:(STATE'S NAME) { attribute: value; }
state a s pseudo class
ei order
1.a: { color: red; }
2.a:visited { color: red; }
3.a:hover { color: blue; }
1.<a href="/">This is a special CSS Link<
pppp :
This is Link
Underline text
1.a:link { color: red; text
2.a:visited { color: red;
3.a:hover { color: blue; }
pppp :
u
u
Underline
a s e hover e
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.}
CLASSES:CLASSES:CLASSES:CLASSES:
e e e a s (state)modify
1.a:(STATE'S NAME) { attribute: value; }
pseudo class ei e e e n
e e ।
red; }
blue; }
1.<a href="/">This is a special CSS Link</a>!
text-decoration e none i।
text-decoration: none; }
red; text-decoration: none; }
blue; }
o normal text e
n o u ।
black;
none;
white;
black;
none;
white;
white;
none;
black;
।
link, visited e hover
s я

pppp :
u
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;
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;
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
26.text-decoration: line
27.letter-spacing: 3px;
28.word-spacing: 6px;
29.font-weight: normal;
30.}
pppp :
u
u
the-top
red;
blue;
serif;
lowercase;
none;
red;
blue;
serif;
lowercase;
none;
red;
blue;
uppercase;
line-through;

e ee ee ee e ( CSS Cur sor )( CSS Cur sor )( CSS Cur sor )( CSS Cur sor )
:
ui n я, k n u i n s k u e i n
я site visit o n s k u e i n e e
d m ।
e ee ee ee e iiii ::::
e n ei e e e n e я u i ।
1111 default - normal mouse cursor icon p ।
2222 wait – ei mouse icon computer n ।
3333 crosshair - cross hair h p ।
4444 text - ei "I" shape icon , text select ।
5555 pointer – ei hand icon , ei e e link hover ।
6666 help- ei icon p c (question mark)
1.p { cursor: wait }
2.h4 { cursor: help }
3.h5 { cursor: crosshair }
pppp :
Please Wait While this Web Page Loads
How May I Hel p You?How May I Hel p You?How May I Hel p You?How May I Hel p You?
Stick Your Hands in the Air!
e e p я ue e p я ue e p я ue e p я u ( CSS Pr oper t i es)( CSS Pr oper t i es)( CSS Pr oper t i es)( CSS Pr oper t i es)
:
ei e e e ( <b>, <body>, <a>, i ) ei e e language e e e e e
tutorial a property ( Font, Text, Box, Color i ) k ।নিচে
।

e ee ee ee e p яp яp яp я::::
e e n p я e e k e graphical representation nt ।
e e n property ।
• font
• font-family
• font-size
• font-style
• font-weight
• font-variant
e ee ee ee e kkkk p яp яp яp я::::
e e k p я k e spacing, alignment, decoration i nt e e k
property ।
• letter-spacing
• word-spacing
• text-decoration
• vertical-align
• text-transform
• text-align
• text-indent
• line-height
e ee ee ee e kkkk p яp яp яp я::::
e e k p я ei e e e n e e a e Border, Margin e
Padding property property top, right, bottom e left ।নিচে e e box
property ।
• Margin
• Padding
• Border
• Border-width
• Border-color
• Border-style

• Width
• Height
• Float
• Clear
e ee ee ee e p яp яp яp я::::
e e property , ei e e e n e k e я
e e property ।
Color
e ee ee ee e g ug ug ug u p яp яp яp я::::
e e background p я background e e nt , background single color
image । image image e position । image
repeat left-to-right a top-to-bottom e e background property ।
• Background
• Background Color
• Background Image
• Background Repeat
• Background Attachment
• Background Position
e ee ee ee e CLASSI FI CATI ONCLASSI FI CATI ONCLASSI FI CATI ONCLASSI FI CATI ON p яp яp яp я::::
Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position
e e я ue e я ue e я ue e я u ( CSS Posi t i on)( CSS Posi t i on)( CSS Posi t i on)( CSS Posi t i on)
:
e e я e ei e e e ns e exact я ।

POSI TI ON RELATI VE:POSI TI ON RELATI VE:POSI TI ON RELATI VE:POSI TI ON RELATI VE:
Relative position d ei e e e n e position a e n e k ।
01.h3 {
02.position: relative;
03.top: 15px;
04.left: 150px;
05.}
06.p {
08.left: -10px;
09.}
Move Left - e k t left e я negative value ।
Move Right - e k t left e я positive value ।
Move Up - e k t top e я negative value .
Move Down - e k t left e я positive value ।
u :
e e e e я
POSI TI ON ABSOLUTE:POSI TI ON ABSOLUTE:POSI TI ON ABSOLUTE:POSI TI ON ABSOLUTE:
absolute position d ei e e e n e exact position (pixel value) ।
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 :
e e e e я
POSI TI ON FI XEDPOSI TI ON FI XEDPOSI TI ON FI XEDPOSI TI ON FI XED
e e n я k b uя ui n k a s e b uя sk o
s (fixed) ।
u :e "sk o " ei i я k i sk o e a s
।
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 e !DOCTYPE ।
e ee ee ee e ( CSS Layer s)( CSS Layer s)( CSS Layer s)( CSS Layer s)
:
e e n u , e e e nt
e e e p e n priority overlapping CSS positioned
elements , priority u ।
Priority z-index value ।যার z-index value 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.}
pppp :
e e ue e ue e ue e u ( CSS Fl oat )( CSS Fl oat )( CSS Fl oat )( CSS Fl oat )
:
d e a a s e kk । magazines
t n k e a s ।
FLOAT I MAGE:FLOAT I MAGE:FLOAT I MAGE:FLOAT I MAGE:
e e Float attribute e я k Wrapping ।
ic Float ।
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>
pppp :
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 PLEFLOATI NG MULTI PLEFLOATI NG MULTI PLEFLOATI NG MULTI PLE I MAGES:I MAGES:I MAGES:I MAGES:
a float i e a s k t e e Clear attribute
e 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>
pppp :
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.

e e i ke e i ke e i ke e i k ( CSS( CSS( CSS( CSS I D Vs Cl ass)I D Vs Cl ass)I D Vs Cl ass)I D Vs Cl ass)
:
e p i n e e ID e e Classes ei a
e s ।
iiii ( I D( I D( I D( I D SELECTOR)SELECTOR)SELECTOR)SELECTOR)
e ei e e e n e s i e я e e яs k e
"id" e "selector"
ID k e (a ) e n s i id e n e unique identifier ।সিএসএস ID p i
e e classes n 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 e я k я ।
pppp :
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.
kkkk ( CLASS SELECTOR)( CLASS SELECTOR)( CLASS SELECTOR)( CLASS SELECTOR)
e e n s i я class selector class selector ei e e e class attribute
e e "." ( ) u ei e e e ns e class="center" e
Align ।
1..center {text-align:center;}
i c ei e e e e e n e class d p :
1.p.center {text-align:center;}
**class e in ek p e я ।
ID = e я Identification (ID) e я k я unique ।
Class = a я e class e ।

e e p ue e p ue e p ue e p u ( CSS Di spl ay)( CSS Di spl ay)( CSS Di spl ay)( CSS Di spl ay)
:
e e d я n я ei e e e line break i ।তবে
anchor e line break ei। line break block value e
।
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>
pppp :
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 DDENDI SPLAY NONE ( HI DDENDI SPLAY NONE ( HI DDENDI SPLAY NONE ( HI DDEN) :) :) :) :
content, Hide p я p я । none value e
content, Hide ।
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>
pppp :
This paragraph is displayed correctly because it has a display value of "block".
i © 2011 webcoachbd. st k

Css+tutorial+in+bangla

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Semelhante a Css+tutorial+in+bangla

Semelhante a Css+tutorial+in+bangla (20)

Último

Último (20)

Css+tutorial+in+bangla