2. css tutorial in bangla

36
(Selector) ID Class (CSS CSS CSS CSS) ) ) ) | | | | : web designing Cascading Style Sheets (CSS) web site --- web site restyle stylesheet ( ) documents and webcoachbd.com ( CSS Sel ect or ) ( CSS Sel ect or ) ( CSS Sel ect or ) ( CSS Sel ect or )

Upload: npti

Post on 02-Feb-2023

1 views

Category:

Documents


0 download

TRANSCRIPT

������������������������ ��������������������������������

• ����� (Selector) • ����� ������

• �������� ������

• ��� � ������

• ������ ���

• ������ ��������

• ������ ��

• ������ ����

• ������ ������

• ������ ��� �

• ������ ���

• ������ ����

• ������ ����

• ������ ������� �

• ������ ��� �

• ������ ��!�

• ������ "�

• ID ���# Class

������ ������ ������ ������ ((((CSSCSSCSSCSS) ) ) ) ���� ��� ���� ��� ���� ��� ���� ��� | | | | ��������������������������$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

'���� ���� web designing � %()� ��� *��� ��+) ��) ,� �� Cascading Style Sheets (CSS) � �������- �� । �$��� *�����/�0��� ������ ������!�� 12��� '���,�� �� /��। ������ � #�*��# web site � 3 �4�5 ��

6�!। ������ � #�*��# �6�� ��7! �� ��12��� /���---

8 ������ � #�*��# � ,��#�� � 9):�4 ) ���� '; %4�<�=� �� 6�!।

> ��?2 ������ ���� ���)� � �� �@2��0��� web site � restyle �� 6�!।

'��� stylesheet (�6$��� '��� ����12��� ��$���) � �@2��0��� � ,��#�� documents /�) �4A� /�� 6$� '��� ������ and � ,��#�� � %()� B��� ��) �����। ' ��� �A� �� ���� �! ������ � $� '�1 B� � � ,��#��

�C�D 0�� ����) /��।webcoachbd.com � ������!��12�� �E�� '��� ������ � $�) �����।

������ ����� ���� ��������� ����� ���� ��������� ����� ���� ��������� ����� ���� ���( CSS Sel ect or )( CSS Sel ect or )( CSS Sel ect or )( CSS Sel ect or )

��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ ����� �� ������ � F%��� ��� /!। )�� ���%� ��, �6 ���� � ,��#�� � ��#� �� '��� ��0��� ������ ����

� ���A �@4G ����। B)�� )��% ( CSS selectors) �C�D 0�� *��� A���) /��। ������ ����� � 1H�:

SELECTOR { PROPERTY: VALUE }

"Property" /� �#� ���� ������ ����#� 6� '��� I�#) ��,���� ��) ����। ' "VALUE" /�, 6� ���%�<

property #�� ���%� ��।

������������������������ Selector Name:

selector name J�� � ,��#�� ���1 � ���A ���� �@�� 9): �� 6�! 6� '��� I��26�!: �@�%� ��) ����।

p { PROPERTY: VALUE }

selector name �/���� p J�� paragraph tag �� ���%� ��?।

��� ��� ������ ���� ��� ��� ��� ������ ���� ��� ��� ��� ������ ���� ��� ��� ��� ������ ���� ��� ( I nt er nal CSS)( I nt er nal CSS)( I nt er nal CSS)( I nt er nal CSS)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

Cascading Style Sheets ��$� �)�� *� '�? �6#� - internal, external ��� inline। 6$� '���� �����

������ ���/� ���� )$� B� � ���� �)2 � ���1 �6�1 ��) /�� �6�� /�I <style> tag ��� 6� HTML <head> ���1

� �0)� �$�) /��। ���, �%�/� �%!� /���। 01.<html> 02.<head> 03.<style> 04.</style> 05.</head> 06.<body> 07.<p>Your page's content!</p> 08.</body> 09.</html>

�#) B�K�! ���� �)2 � ��?2 �%$��� ��। � style ���1 � 2*2 L���� �� ���� �6 )�� � ���� �)2 � ��?2 CSS element �6�1

��) 6��I ।

��� ��� ������ "��#��� ��� ������ "��#��� ��� ������ "��#��� ��� ������ "��# $% &$% &$% &$% &::::

HTML code � #) �� CSS code ��$� /! ��, 6� BA� � %�E�! CSS 6� HTML � #) �!।

���, �%�/� �%!� /���। 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>

�% ���% ���% ���% ��:

White text on a black background!

��� �%�/�� '���� �%�$�?� CSS code � #�*��# <body> and <p> HTML tags � ����#� ����)�) /�! �1�?।

��(� ���(� ���(� ���(� � ������ ) �������� ) �������� ) �������� ) ��

"HTML tag" { "CSS Property" : "Value" ; }

• ��7!� ��M� ��) *��� *��� �%$� 6�� ��0��� ������ ���� �%�! � ,��#�� ����#� ����)�) /�! �1�?।

�A�# ���� � ,��#�� ����#� ��?� ���? 6��� ���! '#� ��� ���? - p{ : ; }

)�� CSS attribute color �����,� ���? - p { color: ; }

�� Value �/���� '#� �� � color �����,� ���? - p { color: white; }

��� �� ��� �� /�!�? paragraph tag � #�*� B��K) ��� ��$� ��%� /�! �1�? ।

• �$� '#� '���,�� ���� ������ ���� ��0��� <body> ����1 background �� ���)� � ���?।

�A�# ���� HTML Body element ��?� ���? - body { : ; }

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

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

B��� �#! �%$� 6��� �6 ������ �� � ��!�1 �� �; )� �% �� ��? �� )$� '#��% �6�� ��7! �( �$�) )� /��� '#�

������ attribute � � ����� ��� ������ attribute � �0�2 � ���#����� N� #) �%�!�? ���� { CSS attribute :

value;}।

�*��+�� ������ �*��+�� ������ �*��+�� ������ �*��+�� ������ ( Ext er nal CSS)( Ext er nal CSS)( Ext er nal CSS)( Ext er nal CSS)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

���,�! 0�� /! 6�% '���� ������ �� � ,��#�� /�) �4A� ��$�।�������� ������ �� �� 2*2#�O ������ code *�� ����� � �� ���� ".css" �� � extension �%�! ��0 �� /!। ������ �� � ��� <style> ���1 � ����)� <link> ���1

� ��/��6� ���� �� /! ।

)���)���)���)��� $% &$% &$% &$% &::::

��A�#�0��� '#� �������� �%�! ���, ������ ���� � ��$���। 1.body{ background-color: gray;} 2.p { color: blue; } 3.h3{ color: white; }

)�� ������ �� ���� (.css) �� � extension �%�! ��0 ����। �� �� ��# /�� test.css । )�� test ?�E�; '#�

B�� ��# �%�) ��� )�� �� � extension(.css) � N� �$�) /�� ।

�� �)2 � � ,��#�� �� � 9): �� ������ �� �� ���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 becaus e 09.we changed it with CSS! </p> 10.</body> 11.</html>

3 �C �� �� test.css � '�1 �6 / �,P�� '�? )� 02 �,��� ��% �%� ��$2Q

)�� � ,��#�� �� � ��� index.html �/���� �� ���R�� BA��. �6$��� ������ �� � '�? ��$��� ��0 ����। ���

'��� � ,��#�� �� � ��� L����� � $2�2� �2� ��� ���)� � �(� �2�।

�% ���% ���% ���% ��:

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 ������!

"�� 5� � �*��+��"�� 5� � �*��+��"�� 5� � �*��+��"�� 5� � �*��+�� ������ 6768� � �6������� 6768� � �6������� 6768� � �6������� 6768� � �6�????

'��� ;���� � ���� � �� ��(� ��� content �� �4A� �$�) ���P) /!। '��%� �� � �/���� �$�� $2� �/�� ������ ���� �� �2��! ���/� �� 6�!। ���� �� ������ ���� ��)�� ;�� ��� �

��$� ����)� 2*2#�O "link" ���1 � ��/��6� ���� ������ �� � �� ��)�� ;�� ��� � 62G �� 6�!।

������ ������ ���� ��������� ������ ���� ��������� ������ ���� ��������� ������ ���� ���( I nl i ne CSS)( I nl i ne CSS)( I nl i ne CSS)( I nl i ne CSS)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

��� � ������ /�I ������ style �� � ,��#�� ���� � �0)� ���/� �� ��!#। �������� �� ����� ������ /�) ��� � ������ � ��*��� ��� । � BA� /�I ��������� �� ����� ������ J�� �� �

���%�� ) A����; '��� �� � override ��) ����। 6��/��, ��� � ������ 6� ������ � �N� ��S � /�) ��,2 ��) T��!

)� ��� '�� �0��� ���/� �� ��,)।

������������������������ I NLI NE I NLI NE I NLI NE I NLI NE ---- HTML ATTRI BUTE:HTML ATTRI BUTE:HTML ATTRI BUTE:HTML ATTRI BUTE: ��U�� ��� �� �� ��� ��)�� � ,��#�� ���1 � #�*� ������ �� 9): �� 6�!। 6�% '��� �� � ,��#�� ����#� � �� �

��) ,�� )�/�� style ��#� HTML attribute � #�*� �)��� ) ������ property 12��� ��$2�। 1.<p style="background: blue; color: white;">A new background and 2.font color with inline CSS</p>

�% ���% ���% ���% ��:

A new background and font color with inline CSS

�6 ���� HTML element �C��) inline CSS ���� � ��� ��*�� ��#� �%!� /���:

PSEUDO CODE:PSEUDO CODE:PSEUDO CODE:PSEUDO CODE:

<html tag style="css property1: value; css property2: value;"> </html tag>

��)�� ������ statement B� � semicolon ";" J�� �4A� A���� ��� ������ property ; )� value ":"colons

J�� �4A� A����।

������ C�� ���� ��� ������ C�� ���� ��� ������ C�� ���� ��� ������ C�� ���� ��� ( CSS Cl ass)( CSS Cl ass)( CSS Cl ass)( CSS Cl ass)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ � #�*��# � ,��#�� ����#� � B��$� �� � �%!� 6�!। ���� �%�/� �%�! ��7!� ��M� �� 6�� । *2� '���

�$�; ,��I� '��� ��$�� �� �E ��� ��%� �/��। '�� ,��I� �?�� ��� ��� �/��। '��� 0�1���� � B�A� �6 ������

classes ���/� �� #�*��# '��� '��� I� �2� ��) ����।

CLASSCLASSCLASSCLASS � � � � FORMATFORMATFORMATFORMAT

Class ���/� �� $2� ��*��। ��*�� ������ ���� � B� �� ��*�) (extension) ��) /��। ' � ��*�) B� ��B� � � ,��#�� ���1 � Class � #�� �/���� ����) /��। ���, �%�/� �%!� /���: 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.f irst CSS code!</p> 06.<p class="second">This is a paragraph that uses the p. second CSS code!</p> 07.</body> 08. 09.</html>

�% ���% ���% ���% ��:

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���� � ,��#�� ����#� � ���A ������ class ���/� ��) ����।*2� '��� <p> ���1 ���/� �� �� �

�%�!�?� ��� ������ class ���/� �� B�� ��� �� � ���%< �� �%�!�?�� ��� '�1 default �� � � ' ���%< ��$�

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.t est1 CSS code!</p> 5.<p class="test2">This is a paragraph that uses the p.t est2 CSS code!</p> 6....

�% ���% ���% ���% ��:

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!

������������������������ 67��F��#67��F��#67��F��#67��F��# ���� ������� ������� ������� ��� ( CSS Backgr ound)( CSS Backgr ound)( CSS Backgr ound)( CSS Backgr ound)

��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

'��� �� �� background B��� ��� 122W�2�� )� � �������� � '����% #����6�1 �/��� �%$� ��,)। '��� 6�%professional website 9): ��) ,�� )�/�� light background � #�*� dark ��� ���/� �� ��,)। ' 6�% 2*2

�$ ��� 9): ��) ,�� )�/�� �6���� ����� �#+! �/��6�1�। ������ � #�*��# '��� �6���� ������ ����#� � background color or image ��� ��) ����। )�?�E� background image ��0��� �%�� ) /�� �� ��7!� '��� ��!X� ��) �����। '��� �?=#) ���� horizontally,

vertically repeat ��) ����।)�?�E� '��� background �� fixed position � �$�) ���� �� scroll ��) ����।

���, ������ background � V%�/� �%!� /���। h4 { background-color: white; } p { background-color: #1078E1; } ul { background-color: rgb( 149, 206, 145); }

�% ���% ���% ���% ��

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

������������������������ BACKGROUND I MAGE:BACKGROUND I MAGE:BACKGROUND I MAGE:BACKGROUND I MAGE:

gradient background � #) image �� left-to-right �� 6�!। BA�� 6$� ��� Y� ��� )$� '��� image ��

fixed B�K�! �$�) ���� । 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(s mallPic.jpg);

background-repeat: repeat; } h4 { background-image: url(smallPic.jpg); background-repeat: repeat-y;} ol { background-image: url(smallPic.jpg); background-repeat: repeat-x;} ul { background-image: url(smallPic.jpg); background-repeat: no-repeat;}

�% ���% ���% ���% ��:

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 Thi s <h4> has a backgr ound i mage r epeat i ng ver t i cal l y ( y) . You coul d Thi s <h4> has a backgr ound i mage r epeat i ng ver t i cal l y ( y) . You coul d 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 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)

• This is an unordered list

• With a background that repeats

• in neither direction.

������������������������ BACKGROUND I MAGEBACKGROUND I MAGEBACKGROUND I MAGEBACKGROUND I MAGE � � � � Z6[��Z6[��Z6[��Z6[��::::

'��� 6�% ���%�< ��) ,�� �6 � ,��#�� ����#� � #�*� ���A�! image � �%� �) /�� )�/�� ���� CSS's background-

position � #�*��# �� 6�!।���, �)� (length, percentages, keywords) ���� ���%�< �� V��! �%$���� /���। p { background-image: url(smallPic.jpg); background-position: 20px 10px; } h4 { background-image: url(smallPic.jpg); background-position: 30% 30%; } ol { background-image: url(smallPic.jpg); background-position: top center; }

�% ���% ���% ���% ��:

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.

������������������������ GRADI ENT BACKGROUND:GRADI ENT BACKGROUND:GRADI ENT BACKGROUND:GRADI ENT BACKGROUND:

6�% gradient background 9): ��) ,�� )�/�� '����� �A�# ���� ���� �� ��) /��। Image:

V�� image � $2� ��*�� । '#� ����� horizontal 0��� ��$�? । � image � 1 pixel �। repeat attribute �

#�*��# � value repeat-x ��� ���? 6� ��� image � ���%�< � ��# /�) ��� �%�� ��Z4�) ��0 ���। ���,�%�/�� paragraph ����#� � gradient background �6�1 /�!�? p { background-image: url(http://www.example.com/gradie nt.gif); background-repeat: repeat-x; }

�% ���% ���% ���% ��:

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

������������������������ )�)�)�)� ( CSS Font )( CSS Font )( CSS Font )( CSS Font )

��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

��� ��0��� �%� �) /�� )� ��!X� 0� ������ '����� �%�!�?। '��� ���� size, color, style )���% ���)� � ��)����। '��� �����?� ��0��� ��� bold �� underline ��) /! ��[ '��� �� ����� percentage ���/� ��0��� ��

resize �� 6�!। � ��7�! '���,�� ���, �� /�!�? ।

������������������������ )�)�)�)� \ \ \ \::::

6�%; ���� ������ ������ �� B� #�� /! ��[ ��4 )��( ��� \�*:� ������ attribute। ���, �� � ���� ���)� ��

�%�/� �%!� /���। view source

print?

1.h4 { color: red; }

2.h5 { color: #9000A1; }

3.h6 { color: rgb(0, 220, 98); }

�% ���% ���% ���% ��:

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.

��� �%�/�� ���� ���%� ��) '#� ����� �)� ���� ��#� ���/� ���?।

������������������������ )�)�)�)� FAMI LY:FAMI LY:FAMI LY:FAMI LY:

�� family %2 � group � ��0G �6#�: serif and sans-serif । 1��7��! �%$� �1�!�? serif fonts /�) sans-serif

fonts 6� computer monitor � $2� �/�� �E� 6�! । view source

print?

1.h4 { font-family: sans-serif; }

2.h5 { font-family: serif; }

3.h6 { font-family: arial; }

�% ���% ���% ���% ��:

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

������������������������ )�)�)�)� 5�� 5�� 5�� 5�� ::::

'��� values, percentages �� key terms ���/� �� �� '�� N� ��) ����। 6$� '��� default �� ���)� �

��) ,���� )$� Percentages ���/� �� 0�� ��[ static value ��� �� ��,) �!।

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" ��-weight � B����� key terms 12��� /�: bold, bolder, and normal.

������������������������ )�)�)�)� VARI ANT:VARI ANT:VARI ANT:VARI ANT:

������ �� Variant � ��/��6� '��� �� �� small caps � ����)�) ��) ����। Note: ��[ ��� ��, ������ ��

Variant �� ������� �� �� )� ��� �� '�1 ���]) /�! ��!� ��,)। view source

print?

1.p { font-variant: small-caps; }

�% ���% ���% ���% ��:

this text was written normally and converted to small-caps

������������������������ "*�"*�"*�"*� ���� ������� ������� ������� ��� ( CSS Text )( CSS Text )( CSS Text )( CSS Text )

��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ ���� � #�*��# '��� ���� � spacing, decoration, ��� alignment ��!X� ��) ����।

"*"*"*"* DECORATI ON:DECORATI ON:DECORATI ON:DECORATI ON:

���� Decoration � #�*��# '#� ���� � underline %2 ��) ���। )�?�E� line-through, overline ���

underline )���% ���� � ��^/� ��) ���। view source

print?

1.h4{ text-decoration: line-through; }

2.h5{ text-decoration: overline; }

3.h6{ text-decoration: underline; }

4.a { text-decoration: none; }

�% ���% ���% ���% ��:

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

"*"*"*"* I NDENT:I NDENT:I NDENT:I NDENT:

������ text-indent �� '#� � ,��#�� (<pre>) ���1 ����)� ���/� ��) ���। values or percentages ���/�

�� '#� text-indent ���%�< ��। view source

print?

1.p { text-indent: 20px; }

2.h5 { text-indent: 30%; }

�% ���% ���% ���% ��:

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.

"*"*"*"* ALI GN:ALI GN:ALI GN:ALI GN:

��*��) website � default �/���� ���� Align: left �����,� ) A���। ���� Align attribute � ��/��6� ���� � ���0+

Alignment �%!� 6�!। view source

print?

1.p { text-align: right; }

2.h5{ text-align: justify; }

�% ���% ���% ���% ��:

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.

"*"*"*"* TRANSFORM:TRANSFORM:TRANSFORM:TRANSFORM:

���� Transform � #�*��# ���� � _) capitalize �� 6�!। view source

print?

1.p { text-transform: capitalize; }

2.h5{ text-transform: uppercase; }

3.h6{ text-transform: lowercase; }

�% ���% ���% ���% ��:

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.

������������������������ WHI TE SPACE:WHI TE SPACE:WHI TE SPACE:WHI TE SPACE:

white-space attribute � #�*��# ��$�� �� �� �� ,��) A���� 6)(� �� '��� break <br /> ���1 �� �%���। view source

print?

1.p { white-space: nowrap; }

�% ���% ���% ���% ��:

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.

������������������������ WORD SPACI NG:WORD SPACI NG:WORD SPACI NG:WORD SPACI NG:

������ Word Spacing attribute � #�*��# �� ���� `1��� #�*� gap � ��#�� ��*��� �� �%!� 6�!। view source

print?

1.p { word-spacing: 10px; }

�% ���% ���% ���% ��:

This paragraph has a word-spacing value of 10px.

������������������������ LETTER SPACI NG:LETTER SPACI NG:LETTER SPACI NG:LETTER SPACI NG:

������ letter-spacing attribute � #�*��# �` #�*� �a� 12��� #�*� gap � ��#�� ��*��� �� �%!� 6�!। view source

print?

1.p { letter-spacing: 3px; }

�% ��:

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 .

������������������������ _7��#\_7��#\_7��#\_7��#\ ���� ������� ������� ������� ��� ( CSS Paddi ng)( CSS Paddi ng)( CSS Paddi ng)( CSS Paddi ng)

��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ ������ ���/� �� '��� � ,��#�� ����#� (paragraphs, tables )���% ) � default ������ ���)�� ��)

����। ' ������ ���) ���b�! ����#� � border ��� )� content � #�*� B� ��। 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!

������������������������ _7��#\_7��#\_7��#\_7��#\: 1 VALUE: 1 VALUE: 1 VALUE: 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;}

�% ���% ���% ���% ��:

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!

������������������������ _7��#\_7��#\_7��#\_7��#\: PADDI NG: PADDI NG: PADDI NG: PADDI NG---- ( DI RECTI ON) :( DI RECTI ON) :( DI RECTI ON) :( DI RECTI ON) :

��)�� � ,��#�� ����#� � ��4 )��( ,�� �0+ ������ A��� �6#� top, right, bottom, ��� left । ������ direction

attribute � #�*��# �4A� �4A� ������ ���%� �� 6�!। �� direction (�6#� -left) � ���%� ��� B��12��� B����)�) 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; }

�% ���% ���% ���% ��:

This paragraph had one padding specified(left), using directional declaration.

This header had each padding specified separately, using directional declaration.

������������������������ _7��#\_7��#\_7��#\_7��#\: 2 & 4 VALUES: 2 & 4 VALUES: 2 & 4 VALUES: 2 & 4 VALUES

6$� '#� %2 � ������ Value ���/� ���� )$� �A# Value � top ��� bottom ������ Value ���%� ��� ��� �J):! Value � left and right ������ Value ���%� ���। #�� �$�) /�� ��*��) ������ Value � top �%�! 22 /! ���

clockwise 0��� �� left � � 7 /!। ������ Value � *�����/�)� /� top, right, bottom ��� 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.}

�% ���% ���% ���% ��:

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.

������������������������ MARGI N:MARGI N:MARGI N:MARGI N:

������ Margins ��! ������ ������ attribute � #)। 2*2 ���� 122c�d�� ��A�� � /�I:Margin ���) � ,��#�� ����#�� border � ,���� B� �� ���b�! ' ������ ���) border � �0)� B� �� ���b�!। ������ � #) Margin �

Value ��� �� 6�!। view source

print?

1.p {margin: 5px; border: 1px solidblack; }

2.h5{margin: 0px; border: 1px solidred;}

�% ���% ���% ���% ��:

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.

������������������������ MARGI N: 1 VALUEMARGI N: 1 VALUEMARGI N: 1 VALUEMARGI N: 1 VALUE

��� ������ ������: 1 Value � #)

view source

print?

1.<b> </b>

2.p {margin: 2%; border: 1px solidblack; }

3.h5{margin: 0px; border: 1px solidred;}

�% ���% ���% ���% ��:

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.

������������������������ 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) :

��� ������ ������: padding-(direction) � #) । 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; }

�% ���% ���% ���% ��:

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.

������������������������ MARGI N: 4 VALUESMARGI N: 4 VALUESMARGI N: 4 VALUESMARGI N: 4 VALUES

��� ������ ������: 2 & 4 Values � #) । 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;}

�% ���% ���% ���% ��:

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.

������ 6#+� ���� ��� ������ 6#+� ���� ��� ������ 6#+� ���� ��� ������ 6#+� ���� ��� ( CSS Bor der )( CSS Bor der )( CSS Bor der )( CSS Bor der )��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

� ,��#�� ����#�s � ,���� �6 ��� � �%$� 6�! )� ������ ��� � � #�*��# �@2��0��� customize �� 6�!। ������ ��� �

� #�*��# ��� � � �� � ���)� � �� 6�!।

6#+� 6#+� 6#+� 6#+� STYLE TYPES:STYLE TYPES:STYLE TYPES:STYLE TYPES:

B��$� ���� ��� � Style �!�? 6� '��� '��� �?=#) ���0+ *�� ��� � 9): ��) ����।

� ��������� ������ ��� ���/� ���?,��� �#�D ��� �� A���� '�1 '#��% ������ ��� ��������� �� '�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; }

�%�%�%�% �� �� �� ��:

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#+� 6#+� 6#+� 6#+� WI DTH:WI DTH:WI DTH:WI DTH:

��� �-width attribute � ��/��6� ��� � � �22c ���)� � �� 6�!। ���0+ key terms �� �0�2 �%�! ��� �-width ���%�< ��

6�!। ���0+ term ���/� �� �6�) ��� �6#� thin, medium, thick )���%। 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; }

�% ���% ���% ���% ��:

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#+� 6#+� 6#+� 6#+� COLOR:COLOR:COLOR:COLOR:

border-color attribute � #�*��# '��� �?=#) color combination �� ��� ��� %4�< �=� �� )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; }

�% ���% ���% ���% ��:

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".

������ ��c ������ ��c ������ ��c ������ ��c ���� ��� ���� ��� ���� ��� ���� ��� ( CSS Li st )( CSS Li st )( CSS Li st )( CSS Li st )��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

���s #2�) %2 ��� 6A�: unordered ��� ordered ।সিএসএস �%�! ��� �� � ,��#�� /�) B��� ��� customize

�� 6�!। �#��� image �� bullet points �/���� unordered ��� � ��� ���/� �� 6�!।

������������������������ ��c��c��c��c STYLE TYPE:STYLE TYPE:STYLE TYPE:STYLE TYPE:

'��� 6�% default number � ordered ��� �� unordered ��� � bullets/discs /�) �0+ �� � ���/� ��) ,��)�/�� '��� ��� � ��� ���0+ *�� �� � ���/� ��) ����। ���, ���0+ �� � �%!� /���:

8. Unordered list styles: square, circle, disc (default), ��� none । >. Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default),

��� none ।

1.ol { list-style-type: upper-roman; } 2.ul { list-style-type: circle; }

�% ���% ���% ���% ��:

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!

������������������������ ��c ����d ���e��c ����d ���e��c ����d ���e��c ����d ���e::::

'#� '�1 ����? normal bullet � ����)� image �� ���/� �� 6�!। 1.ul { list-style-image: url("listArrow.gif"); } 2.ol { list-style-image: url("listArrow2.gif"); }

�% ���% ���% ���% ��:

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 ��� � �(�O image �� ���/� ��।

������������������������ ��c��c��c��c POSI TI ON:POSI TI ON:POSI TI ON:POSI TI ON:

list-style-position � �0�2 inside �%�� )$� ���12��� #���� � /�) �0)� �%�� A���� ' Outside �%�� normal ���

Position � A����। Outside �0�2� ��� default setting । 1.ul { list-style-position: inside; } 2.ol { list-style-position: outside; }

�% ���% ���% ���% ��:

• This list is

• using inside

• positioning with CSS!

and now an ordered list:

1. This list is

2. using outside

3. positioning with CSS!

��c��c��c��c::::�6 ����%�6 ����%�6 ����%�6 ����%

� list-style-type � #�*��# �#� ���� ���K� �� 6�! 6$� '��� list-style image ���� ���� �� )$� B�� list-

style �%$���। 1.ul { list-style: upper-

roman insideurl(" http://www.example.com/notHere.gif ");}

�% ���% ���% ���% ��:

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!

������ ��c ���� ��� ������ ��c ���� ��� ������ ��c ���� ��� ������ ��c ���� ��� ( CSS Li st )( CSS Li st )( CSS Li st )( CSS Li st )��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

���s #2�) %2 ��� 6A�: unordered ��� ordered ।সিএসএস �%�! ��� �� � ,��#�� /�) B��� ��� customize

�� 6�!। �#��� image �� bullet points �/���� unordered ��� � ��� ���/� �� 6�!।

������������������������ ��c��c��c��c STYLE TYPE:STYLE TYPE:STYLE TYPE:STYLE TYPE:

'��� 6�% default number � ordered ��� �� unordered ��� � bullets/discs /�) �0+ �� � ���/� ��) ,��)�/�� '��� ��� � ��� ���0+ *�� �� � ���/� ��) ����। ���, ���0+ �� � �%!� /���:

8. Unordered list styles: square, circle, disc (default), ��� none । >. Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default),

��� none । 1.ol { list-style-type: upper-roman; } 2.ul { list-style-type: circle; }

�% ���% ���% ���% ��:

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!

������������������������ ��c ����d ���e��c ����d ���e��c ����d ���e��c ����d ���e::::

'#� '�1 ����? normal bullet � ����)� image �� ���/� �� 6�!। 1.ul { list-style-image: url("listArrow.gif"); } 2.ol { list-style-image: url("listArrow2.gif"); }

�% ���% ���% ���% ��:

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 ��� � �(�O image �� ���/� ��।

������������������������ ��c��c��c��c POSI TI ON:POSI TI ON:POSI TI ON:POSI TI ON:

list-style-position � �0�2 inside �%�� )$� ���12��� #���� � /�) �0)� �%�� A���� ' Outside �%�� normal ���

Position � A����। Outside �0�2� ��� default setting । 1.ul { list-style-position: inside; } 2.ol { list-style-position: outside; }

�% ���% ���% ���% ��:

• This list is

• using inside

• positioning with CSS!

and now an ordered list:

1. This list is

2. using outside

3. positioning with CSS!

��c��c��c��c::::�6 ����%�6 ����%�6 ����%�6 ����%

� list-style-type � #�*��# �#� ���� ���K� �� 6�! 6$� '��� list-style image ���� ���� �� )$� B�� list-

style �%$���। 1.ul { list-style: upper-

roman insideurl(" http://www.example.com/notHere.gif ");}

�% ���% ���% ���% ��:

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!

������ ��\� ���� ��� ������ ��\� ���� ��� ������ ��\� ���� ��� ������ ��\� ���� ��� ( Pseudo Cl ass)( Pseudo Cl ass)( Pseudo Cl ass)( Pseudo Cl ass)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ � #�*��# ��� ���1 �� ����� � '#� ��� �6�1 ��) ���।

������������������������ ��� ��� ��� ��� ////��\���\���\���\� Z6[�Z6[�Z6[�Z6[�::::

'��� �� ����� ���� � ,�� �0+ B�K� '�?। ������ � #�*��# ��)� B�K��� customize �� 6�!। ���,

keyword 12��� '��%� B�K� ���%� ��।

8888 link –�� ��� ���� �6� ���/� /!�� ।

>>>> visited - �� ��� ���� 6� �d��� ���/� /�!�? ��ed ����� V� mouse �$� /!��।

ffff hover - �� ��� ���� 6� V� #��� �$� ���A ���A visual ��� �%$���।

gggg active - this is a link that is in the process of being clicked

������������������������ PSEUDOPSEUDOPSEUDOPSEUDO---- CLASSES:CLASSES:CLASSES:CLASSES:

������ Pseudo-Classe � #�*��#

view source print? 1.a:(STATE'S NAME) { attribute: value; }

state �� B�K� ��# /� pseudo class

� order �#�� ,��� '#� �N�0��� ��6��

1.a: ���� { color: red; } 2.a:visited { color: red; }3.a:hover { color: blue; }1.<a href="/">This is a special CSS Link<

�% ���% ���% ���% ��:

This is Link

'#� ����� Underline %2 ��) text

1.a:link { color: red; text2.a:visited { color: red;3.a:hover { color: blue; }

�% ���% ���% ���% ��: #��� �$� �d���

#��� �$� ��

����� Underline %2 �� �#! �)��

%2� B�K� �6#� ���� ��� hover � ����

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;10.text-decoration: none;

11.border: 2px solid white;12.} 13.a:hover { 14.color: black; 15.background-color: white;16.text-decoration: none;

17.border: 2px solid black;18.}

CLASSES:CLASSES:CLASSES:CLASSES:

#�*��# '#� ������ ���� � ,�� B�K���(state)modify ��)

1.a:(STATE'S NAME) { attribute: value; }

pseudo class 6� � ,��#�� ����#� �%$�) ��#� /�� )� ���%� ��।

��6�� ������ ���� 9): ��) �����।

red; } blue; }

1.<a href="/">This is a special CSS Link< /a>!

text-decoration � �0�2 none �� �% । text -decoration: none; }

red; text-decoration: none; } blue; }

�)�� /;!� V�,) ����� normal text ��� ���� �,��) �#���

���� �0+ /;!� ��,)।

black; none; white;

black; none; white;

white; none; black;

��) ���।

��। link, visited ��� hover

�#��� �4�� /�) ���। ����� �����

�% ���% ���% ���% ��: #��� �$� �d���

This link is a almost over-the

#��� �$� ��

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;08.text-decoration: none;09.} 10.a:visited { 11.color: blue; 12.background-color: red;13.font-size: 26px; 14.border: 10px outset blue;15.font-family: sans- serif;16.text-transform: lowercase;17.text-decoration: none;18.} 19.a:hover{ 20.color: blue; 21.background-color: red;22.font-size: 27px; 23.border: 10px inset blue;24.font-family: serif; 25.text-transform: uppercase26.text-decoration: line27.letter-spacing: 3px; 28.word-spacing: 6px; 29.font-weight: normal; 30.}

�% ���% ���% ���% ��: #��� �$� �d���

#��� �$� ��

the-top

red;

blue; serif;

lowercase; none;

red;

blue; serif;

lowercase; none;

red;

blue;

uppercase ; line -through;

������������������������ ���+ ���+ ���+ ���+ ( CSS Cur sor )( CSS Cur sor )( CSS Cur sor )( CSS Cur sor )

��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

'#� � ����, ����� ���/� �#! ���0+ #��� ���� ' �� �%�$�?। ���0+ ���K�) �����( #��� ���� � ' �� ���0+ /!।����*�� 6$� '��� site visit ��� ��$���; ���0+ ���K�) �����( #��� � ' �� ���0+ �� 9): �� 6�!। 6� ������

J�� �� �h� ।

������������������������ ���+ 5������+ 5������+ 5������+ 5���::::

��� '����% �%$���� ��0��� ���0+ � ,��#�� ����#� � ��� #��� ���� ' �� ���)� � �� 6�!।

8888 default - normal mouse cursor icon �% �� ��।

>>>> wait – � mouse icon ���%� �� �6 computer �,e� ��?।

ffff crosshair - cross hair �,P �% �� ��।

gggg text - � "I" shape icon � ���%� �� �6, 6$� '��� ���� text �� select ����।

iiii pointer – � hand icon � ���%� �� �6, 6$� '��� ���� � ,��#�� link V� hover ����। jjjj help- � icon � ���%� �� �6 '��� ���� ��7�! ��/�6� �� �k ��) ,��I� (question mark) 1.p { cursor: wait }

2.h4 { cursor: help }

3.h5 { cursor: crosshair }

�% ���% ���% ���% ��:

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!

������ "g�_�+d ���� ��������� "g�_�+d ���� ��������� "g�_�+d ���� ��������� "g�_�+d ���� ���( CSS Pr oper t i es)( CSS Pr oper t i es)( CSS Pr oper t i es)( CSS Pr oper t i es)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

� ,��#�� � )� ���1 ( <b>, <body>, <a>, )���%) 12��� /� � ,��#�� language � �1��) ��� '�2। ������ �

'���� tutorial �E� �#! B��� 12��� property ( Font, Text, Box, Color )���%) �(� ���?� ।নিচে '���,�� ��

/���।

������������������������ )�)�)�)� "g�_��+d"g�_��+d"g�_��+d"g�_��+d::::

������ �� ������� � � ��/��6� � ���� � graphical representation �� ��!X� �� 6�!।

���, ������ �� property 12��� �%!� /��� ।

• font

• font-family

• font-size

• font-style

• font-weight

• font-variant

������������������������ "*"*"*"* "g�_��+d"g�_��+d"g�_��+d"g�_��+d::::

������ ���� ������� � 6� ���� � spacing, alignment, decoration )���% ��7!12��� ��!X� ��। ���, ������ ����

property 12��� �%!� /��� ।

• letter-spacing

• word-spacing

• text-decoration

• vertical-align

• text-transform

• text-align

• text-indent

• line-height

������������������������ 6*6*6*6* "g�_��+d"g�_��+d"g�_��+d"g�_��+d::::

������ �� ������� � 6� � ,��#�� ����#� � �0)� ��� ,���� B� �� ���%� ��।��% #�*� Border, Margin ���

Padding property 12��� '�� ,�� property �!�? ��12��� /� top, right, bottom ��� left ।নিচে ������ box

property 12��� �%!� /��� ।

• Margin

• Padding

• Border

• Border-width

• Border-color

• Border-style

• Width

• Height

• Float

• Clear

������������������������ ���� ���� ���� ���� "g�_��+d"g�_��+d"g�_��+d"g�_��+d::::

������ ���� property ���%� �� �6, �� *�� ���� '#� ���%�< � ,��#�� ����#� � ���� � ��� ���/� ����।

���, ������ ���� property �%!� /��� । Color

������������������������ 67��F��#67��F��#67��F��#67��F��# "g�_��+d"g�_��+d"g�_��+d"g�_��+d::::

������ background ������� � 6� background � �#� ��7! ��!X� �� ,)� /��� 6�% background � single color

�� image /�! A��� । 6�% )� image /�! A��� )�/��� '��� image � position N� ��) ���� । '��� image ��

repeat left-to-right BA�� top-to-bottom ��) ����। ���, ������ background property 12��� �%!� /��� ।

• Background

• Background Color

• Background Image

• Background Repeat

• Background Attachment

• Background Position

������������������������ CLASSI FI CATI ONCLASSI FI CATI ONCLASSI FI CATI ONCLASSI FI CATI ON "g�_��+d"g�_��+d"g�_��+d"g�_��+d::::

Display

Whitespace

List Style

List Style Type

List Style Image

List Style Position

������ _�dh� ���� ��� ������ _�dh� ���� ��� ������ _�dh� ���� ��� ������ _�dh� ���� ��� ( CSS Posi t i on)( CSS Posi t i on)( CSS Posi t i on)( CSS Posi t i on) ��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ ��� � � #�*��# '#� � ,��#�� ����#�s � exact ��� � ���%� ��) ���।

POSI TI ON RELATI VE:POSI TI ON RELATI VE:POSI TI ON RELATI VE:POSI TI ON RELATI VE:

Relative position J�� � ,��#�� ����#� � position B�� ����#� � �����( ���)�� �� 6�!। 01.h3 { 02.position: relative; 03.top: 15px; 04.left: 150px; 05.} 06.p { 07.position: relative; 08.left: -10px; 09.}

Move Left - ��(�O left � ��� negative value ���/� ��) /��।

Move Right - ��(�O left � ��� positive value ���/� ��) /��। Move Up - ��(�O top � ��� negative value ���/� ��) /��। .

Move Down - ��(�O left � ��� positive value ���/� ��) /��। �%�/�:

������ �%!� '�1 ������ �%�! ��� � N� �� �

POSI TI ON ABSOLUTE:POSI TI ON ABSOLUTE:POSI TI ON ABSOLUTE:POSI TI ON ABSOLUTE:

absolute position J�� � ,��#�� ����#� � 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.}

�%�/�:

������ �%!� '�1 ������ �%�! ��� � N� �� �

POSI TI ON FI XEDPOSI TI ON FI XEDPOSI TI ON FI XEDPOSI TI ON FI XED ���� ����#�� ��� � 6�% ���� �� �%� )�/�� ���� L����� � ��� �����( B�K�� ��� ��� L���� 6�% Y� ��� )�2;

���� �K (fixed) A����। �%�/�:�$��� �%$2� "Y� ���; '�# ����" � �� �� ��� � ���� �� �%!� /�!�? )� Y� ���; �� )� B�K�� �A��

�����। Y� ���; '�# ����

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 � �� support ��� 6�% � !DOCTYPE ���%�< �� �%�।

������ "��� ������ "��� ������ "��� ������ "��� ( CSS Layer s)( CSS Layer s)( CSS Layer s)( CSS Layer s)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

��� '#� �%$��� ��� ���/� �� #�*��# ���� ����#� � ��� �%$���, 6� ������ ��� � #�*��# '#� ��!X� ��)���। ������ � ��)�� ����#� �� priority �%!� /�! A���। 6�% %2� overlapping CSS positioned

elements A���, )�/�� 6� priority ��� )��� '�1 ��� �%$���।

Priority ��*��� ��) '#� z-index value ��� �� A��� ।যার z-index value 6) ��� )� priority )) ��� । 01.h4{ 02.position: relative; 03.top: 30px; 04.left: 50px; 05.z-index: 2; 06.background-color: #336699; 07.} 08. 09. 10.p { 11.position: relative; 12.z-index: 1; 13.background-color: #FFCCCC;

14.}

�% ���% ���% ���% ��:

������ j ���� ��� ������ j ���� ��� ������ j ���� ��� ������ j ���� ��� ( CSS Fl oat )( CSS Fl oat )( CSS Fl oat )( CSS Fl oat )��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

"� J�� ?�� �� �� ��� �� B�� ��� B�K�� ����� 6�!। ?�� � ,���� ���� A��� । �6#�� �%$� 6�! magazines ��

����%��O ���0+ '��� ?�� ,���� ���� � B�K�� ।

FLOAT I MAGE:FLOAT I MAGE:FLOAT I MAGE:FLOAT I MAGE:

������ Float attribute � ��/��6� $2� �/�� ���� �� ?�� ,���� Wrapping �� 6�!।

'��� I�#) ?�� �� ��# �� ���� 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. 6.<img src="/sunset.gif"> 7.<p>This second paragraph has an...</p> 8.</body>

�% ���% ���% ���% ��:

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 FLOATI NG MULTI PLE FLOATI NG MULTI PLE FLOATI NG MULTI PLE I MAGES:I MAGES:I MAGES:I MAGES:

6�% '#� B��� 12��� ?�� �� float ��) ,� �6� ���� ���, '���� B�K�� ��� ���(�O '#� ������ Clear attribute

� #�*��# )� ��) ���। ���, V%�/�� '#� ����%�� float ���? । 1.img.floatRightClear { 2.float: right; 3.clear: right; 4.margin: 4px; 5.} 1.<body> 2.<img src="/sunset.gif"> 3.<img src="/sunset.gif"> 4.<p>The images are appearing...</p> 5.<p>If we had specified...</p> 6.<p>The number of paragraphs...</p> 7.</body>

�% ���% ���% ���% ��:

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.

������ 5��# 6��� C�� ������ 5��# 6��� C�� ������ 5��# 6��� C�� ������ 5��# 6��� C�� ( CSS( CSS( CSS( CSS I D Vs Cl ass)I D Vs Cl ass)I D Vs Cl ass)I D Vs Cl ass)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

��� ��! ��=�/ �4�< �� �6 �$� '#� ������ ID ���/� �� ' �$� '#� ������ Classes ���/� ��।� B*���!

� ��7�! ��M� '���,�� �� /��।

5��# ��6+�k� 5��# ��6+�k� 5��# ��6+�k� 5��# ��6+�k� ( I D( I D( I D( I D SELECTOR)SELECTOR)SELECTOR)SELECTOR) ���� � ,��#�� ����#� � �� � ��#� /�� ��� N� �� ��� ������ '����� ���\ ����� ����/�� �2��*� �% ��%����� "id" ��� "selector"

ID ����� ���� (B���) ����#�� �� � �%�) ����F) /। id /� ����#� � unique identifier ।সিএসএস ID ��!

������ classes ��?����?।��ed )�� ����#� � 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 backgro und</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 ��# ��$�� �%� 22 ���� �� )�/�� ��� #���� ������ ��� �����। �% ���% ���% ���% ��:

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.

C�� ��6+�k� C�� ��6+�k� C�� ��6+�k� C�� ��6+�k� ( CLASS SELECTOR)( CLASS SELECTOR)( CLASS SELECTOR)( CLASS SELECTOR)

��%� ����#�� �� � �%� ��� class selector ����F) /।class selector � ,��#�� � class attribute ����/��� ��� ��� "." �%� ��$� (��l��)) /।���, �%�/�� �6�� � ,��#�� ����#�s � class="center" ��� A���� )��%

���� Align #�b$��� /� 6���। 1..center {text-align:center;}

'��� �I ��� � ,��#�� � �6���� ���� ����#� N� �� �%�) ���� �6�� ���� class J�� �0���) /��।�6#:

1.p.center {text-align:center;}

**class ��# ��$�� �%� 22 ���� �� )�/�� ��� ����� ���m�� � ��� �����।

ID = ����� Identification (ID) ���� ���G ��� unique ।

Class = B��� ��1a ��� class � ��E ।

������ glh+� ���� ��� ������ glh+� ���� ��� ������ glh+� ���� ��� ������ glh+� ���� ��� ( CSS Di spl ay)( CSS Di spl ay)( CSS Di spl ay)( CSS Di spl ay)��$���$���$���$� �#��#��#��#�: ���%&����%&����%&����%&� '�#'�#'�#'�#

������ V%�/�� �%�$�?� '#� �#�2 3 �4�5 ��� ���0+ ��� ���?। � ,��#�� � ��?2 V%�/�� ���� line break �� ।তবে'#� ��?2 ���%�< V%�/�� anchor ���1 � line break 9): ���? � । line break 12��� block value � #�*��#

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>

�% ���% ���% ���% ��: 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) :) :) :) :

��?2 �#! '��� ���� content, Hide �� �$� ��!��� /�) ��� �� �%$���� ��!��� /�) ��� । none value � #�*��#

���� ��?2 �6���� content, Hide �� �$� 6�!। 1.p.show { display: block } 2.p.hide { display: none; } 1.<p class="show">This paragraph is displayed corre ctly 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>

�% ���% ���% ���% ��:

This paragraph is displayed correctly because it has a display value of "block".

���� � © 2011 webcoachbd. ���\n ���()