Css bangla e book Tonmoy Adi

2

- CSS Bangla E-book

(Specially For Web Designers)

- (https://www.facebook.com/faruk.ice09) (http://www.WebTechnologyBlog.com)

(http://www.farukbd.info)

3

(https://www.facebook.com/groups/Wordpress2Smashing)

(http://www.wpbangla.com)

-

(https://www.facebook.com/faruk.ice09) (http://www.WebTechnologyBlog.com)

(http://www.farukbd.info)

(https://www.facebook.com/zamil.hossainsezan32)

-

CSS Bangla E-book is written by MD.Abdullah Al Faruk & Published by Wordpress Group Bangladesh. Copyright by MD.Abdullah Al Faruk & Wordpress Group Bangladesh. Caution: This book is not for sell. It's free to distribute.

4

.................................

5

-

-(https://www.facebook.com/faruk.ice09) (ICE)

(https://www.facebook.com/zamil.hossainsezan32) (https://www.facebook.com/groups/Wordpress2Smashing/)

,

- -

6

- .

.

.

.

.

..

..

..

.

- .-

.. ..

..

..

..

..

..

..

. .

7

..

..

..

- . . . . .

- .

.

.

.

.

.

- .

..

..

..

..

- .

8

- .-

.. .. .. .. .. ..

- . . . . . (Clip Property) . (cursor Property) . (Overflow Property) . (Z-index Property)

- .

.- ..

.

..- .

..

.

..-

- - . .

9

- . .

- . .

.

.

.

.d i r e c t c h i l d r e n

.

- . .

.. (A n c h o r P s e u d o c l a s s )

.. (F i r s t c h i l d P s e u d o -c l a s s )

.. (l a n g P s e u d o -c l a s s )

.. (f o c u s P s e u d o -c l a s s )

.

.

.

.. -(F i r s t l e t t e r P s e u d o e l e me n t )

.. -(F i r s t f i r s t l i n e P s e u d o e l e me n t )

10

.. (B e f o r e P s e u d o e l e me n t )

.. (A f t e r P s e u d o e l e me n t )

.- /

- .

. -(d i s p l a y n o n e: )

. -(d i s p l a y i n l i n e: )

. d i s p l a y b l o c k( : )

.

11

-

Cascading Style Sheets (CSS)

( )

, Notepad Notepad++ - Adobe Dreamweaver, HTML Kit Notepad++ Internet Explorer, Mozilla Firefox, Google Chrome .css Extension

restyle

-

12

HTML (h1h6, p etc)

-

Declaration={Properties: Value}

Declaration

-

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

- internal, external inline - - - -

.

- -

h1{color:#ff00ff;}

13

p{word-spacing:10px;}

My first CSS Codeing

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. Styles were added to HTML 4.0 to solve a problem. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files

index.html

.

,

-

code ".css" extension -

H3 {color:#FF0000;} p { background:#00F; text-align:center; }

14

style.css

A white Header

This paragraph has a blue font.

The backgrouund color of this page is gray because we changed it with CSS!

index.html index.html

.

Style Style Type Attribute {} -

This is a paragraph.

override ,

15

- , - override

- "/*" "*/" -

- [ ]

-

spacing, decoration, color, alignment

- 1.color 2.direction

3.letter-spacing characters space

4.line-height 5.text-align 6.text-decoration

7.text-indent text indent 8.text-shadow 9.text-transform

16

10.vertical-align 11.white-space Specifies how white-space inside an element is handled

12.word-spacing white space

.

-

h1 {color:#00ff00;} p {color:rgb(0,0,255);} This is heading 1 This is an ordinary paragraph.

.

p {direction:rtl;} h5{direction:ltr}

17

Some text. Default writing direction. Some text. Default writing direction.

- ltr rtl

.

letter-spacing -

h1 {letter-spacing:2px;}

h2 {letter-spacing:-3px;}

18

This is heading 1

This is heading 2

.

[ ]

p.small {line-height:90%;}

p.big {line-height:200%;}

19

This is a paragraph with a standard line-height.

The default line height in most browsers is about 110% to 120%.

This is a paragraph with a standard line-height.

This is a paragraph with a smaller line-height.



This is a paragraph with a bigger line-height.



p.small p.big

20

,

line-height -

. ( )

. px, pt, cm

. (%)

.

t e x t -a l i g n -l e f t r i g h t c e n t e r, , , j u s t i f y -

h1 {text-align:center}

h2 {text-align:left}

h3 {text-align:right}

This is heading 1

This is heading 2

This is heading 3

21

.

text-decoration

-

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

This is heading 1

This is heading 2

This is heading 3

This is heading 4

22

Text-decoration -

none underline overline line-through blink

.

text-indent () text-indent text indent (em,ex,pt) (%)

-

23

h1 {text-indent:50px;} In my younger and more vulnerable In my younger and more vulnerable

text-indent:50px 50px

. - h1 { background: white; color: red; text-shadow: 5px 3px 5px red ;

24

} Red Shadow Effect

.

Transform capitalize( ) capitalize -

none Capitalization capitalize uppercase- uppercase uppercase- lowercase lowercase - -

25

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

This is some text.

This is some text.

This is some text.

.

Vertical-align property -

length

% Raises or lower an element in a percent of the "line-height" property.

26

baseline This is default sub subscript super superscript top top top text-top top of the font middle bottom

text-bottom

(bottom)

-

img.top {vertical-align:text-top;}

img.bottom {vertical-align:text-bottom;}

An image with a default alignment.

An image with a text-top alignment.

An image with a text-bottom alignment.

27

.

break

white-space property -

normal whitespace whitespace- ( wrap)

nowrap whitespace whitespace-

Pre - Whitespace Text will only wrap on line breaks Acts like the tag in HTML

pre-line whitespace whitespace- ( wrap)

pre-wrap - Whitespace ( wrap) -

p

{

white-space:nowrap;

}

28

This is some text. This is some text. This is some text.




.

Word Spacing property- white space px, pt, cm, em

- p { word-spacing:30px; }

29

This is some text. This is some text.

-

[ ] - height width -

-

1.height height auto length %

2.max-height height none length %

3.max-width width none length %

4.min-height height length %

5.min-width width length %

30

6.width width auto length %

- None No maximum height, maximum width. Auto Length px, cm %

1+6.height and width Property:

height width -

div{ height:250px; width:200px; background:#887733}

This is a Block

31

2.CSS max-height Property:

-

p{max-height:50px; background-color:yellow;}

The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px.

32

3.CSS max-width Property:

max-width -

p{max-width:100px; background-color:yellow;}

The maximum width of this paragraph is set to 100px.

4.CSS min-height Property:

min-height -

33

p

{

min-height:100px;

background-color:yellow;

}

The minimum height of this paragraph is set to 100px.

5.CSS min-width Property:

min-width -

p{min-width:150px; background-color:yellow;}

34

The minimum width of this paragraph is set to 150px.

- [ ]

-

1.font font properties- 2.font-family font family 3.font-size font size 4.font-style font style

5.font-variant Variant small caps

6.font-weight font-weight

.

font-property -

p{

35

font-size:larger;

font-style:italic;

font:varient:small-caps;

font-family:Arial;

}

font-property -

p{font: larger italic small-caps Arial }

p{font:15px arial,sans-serif;}

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

36

. [ ]

p{font-family:"Times New Roman",Times,serif;}

CSS font-family

This is a paragraph, shown in the Times New Roman font.

Single -

h1{font-family:Arial Black,Arial}

- -

1.family-name -Arial, times new roman

2.generic-family -serif, sans-serif serif fonts sans-serif fonts computer monitor

37

.

font-size - , ,

accessibility

font size specify - 16px (16px=1em).

font size property- -

xx-small xx-small x-small extra small small small medium medium size. large large size x-large extra large size xx-large xx-large size smaller parent larger parent

length px, cm, etc

% parent

38

h1 {font-size:250%;} h2 {font-size:20px;} p {font-size:4em;} This is heading 1 This is heading 2 This is a paragraph.

.

font-style -

normal default italic

39

oblique Oblique

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

This is a paragraph, normal.

This is a paragraph, italic.

This is a paragraph, oblique.

40

.

font-variant property small-caps- Variant small caps small-caps -

normal small-caps

p.normal {font-variant:normal;}

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

My name is Hege Refsnes.

My name is Hege Refsnes.

41

small-caps

.

font-weight bold, dark, heavy font-weight font-weight - , -lighter, bolder, normal bold lighter bolder normal -

font-weight property- -

normal characters bold characters bolder Defines thicker characters lighter Defines lighter characters

p.normal {font-weight:normal;}

p.light {font-weight:lighter;}

p.thick {font-weight:bold;}

42

p.thicker {font-weight:900;}





43

-

[ ]

unordered, ordered List Marker

1.list-style list-style property list properties

2.list-style-image list-style-image property 3.list-style-position

list-style-position property inside Outside-

4.list-style-type default number- ordered unordered bullets/discs

.

list-style property list properties list-style-type list-style image list-style list-style shorthand property -

list-style-type> list-style-position >list-style-image

44

ul {list-style:square url("sqpurple.gif");}

Coffee

Tea

Coca Cola

.

45

list item marker list-style-image property list-style-image property . image bullet points unordered normal bullet image Unordered image

ul {list-style-image:url('sqpurple.gif');}

Coffee

Tea

Coca Cola

46

.

list-style-position property inside Outside- list-style-position inside Outside normal Position Outside default

ul { list-style-position: inside; } ol { list-style-position: outside; }

ul.a {list-style-position:inside;}

ul.b {list-style-position:outside;}

The following list has list-style-position: inside:

47

Earl Grey Tea - A fine black tea

Jasmine Tea - A fabulous "all purpose" tea

Honeybush Tea - A super fruity delight tea

The following list has list-style-position: outside:

Earl Grey Tea - A fine black tea

Jasmine Tea - A fabulous "all purpose" tea

Honeybush Tea - A super fruity delight tea

"list-style-position: outside" is the default setting.

48

.

default number ordered unordered bullets/discs list-style-type property-

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

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

Example of unordered lists:

Coffee

Tea

Coca Cola

49

Coffee

Tea

Coca Cola

Example of ordered lists:

Coffee

Tea

Coca Cola

Coffee

Tea

Coca Cola

50

list-style-type property

armenian Armenian numbering circle Circle cjk-ideographic plain ideographic numbers decimal decimal-leading-zero (01, 02, 03, .) disc georgian Georgian numbering hebrew Hebrew numbering hiragana Hiragana numbering hiragana-iroha Hiragana iroha numbering katakana Katakana numbering katakana-iroha Katakana iroha numbering

51

lower-alpha (a, b, c, d, e ) lower-greek lower-latin (a, b, c, d, e, ) lower-roman (i, ii, iii, iv, v, ) none square Square upper-alpha (A, B, C, D, E, ) upper-latin (A, B, C, D, E, ) upper-roman (I, II, III, IV, V, )

-

[ ]

CSS property (color, font-family, background, etc.)

-

a:link a:visited a:hover a:active

-

a:hover- a:link a:visited a:active a:hover-

-

52

a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

This is a link

to be effective.

index.html

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

53

a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}

Mouse over the links to see them change layout.

54

This link changes color

This link changes font-size

This link changes background-color

This link changes font-family

This link changes text-decoration

index.html

- [ ]

HTML- bgcolor Background HTML (Heading, Paragraph, Link, Table, Span etc. background color or image background image horizontally, vertically repeat background fixed position scroll

-

1.background background properties-

55

2.background-attachment

- background fixed

3.background-color background-color property background color

4.background-image background-image property

5.background-position

background-position Property

6.background-repeat repeat , CSS- background-repeat

.

background properties- background - background-color>background-image>background-repeat>background-attachment>background-position.

-

body

{

background: #00ff00 url('smiley.gif') no-repeat fixed center;

}

56

.

background-attachment property - background fixed

background-attachment Watermark Watermark -

-

body

{

background-image:url('22.png');

background-repeat:repeat;

background-attachment:fixed;

}

div{height:1200px; width:960px; background:#112200; margin:0 auto;}

This is a division

57

background-attachment property -

scroll . fixed

.

background-color property background color , padding border margin background color text color background-color

body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); }

.

background-image property

58

Body { background-image: url(largePic.jpg); } p { background-image: url(smallPic.jpg); background-color:#00ff00 } background Paragraph url('URL') 'URL' none

.

background-position Property - , / - %% %% ( 4em 50%) Vertical , (Top, Middle, Bottom) (vertical) , (Left, Right, Center) -

Body{background-position: top left}

Body{background-position: left top}

, Body{background-position: % %}

background-position Property- -

left top left center left bottom right top right center right bottom center top center center

keyword "center"

59

center bottom

x% y% horizontal the vertical % - 0% 0%

xpos ypos horizontal the vertical

% % positions

-

body

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

60

Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".

.

, CSS- background-repeat background-repeat -

repeat vertically horizontally repeat-x horizontally repeat-y vertically no-repeat

61

-

[ ]

(exact)

top, bottom, left, right position property positioning method- positioning method -

1.Static Positioning

2.Fixed Positioning

3. Relative Positioning

4. Absolute Positioning

1.Static Positioning:

HTML positioned , HTML ; HTML top, bottom, left, right ; top, bottom, left, and right static positioned top, bottom, left, right

62

-

.static{

position:static;

left:100px;

top:70px;}

The CSS positioning properties allow you to position an element.

The CSS positioning properties allow you to position an element.

63

, , static positioned top, bottom, left, right

2.Fixed Positioning:

HTML (fixed) position:fixed; , top, bottom, left, and right Fixed positioned elements overlap

p.pos_fixed

{

position:fixed;

top:30px;

right:5px;

64

}

Some more text

Note: IE7 and IE8 supports the fixed value only if a

!DOCTYPE is specified.

Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text

some more text

65

3. Relative Positioning:

top, bottom, left, and right relatively positioned

- h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } This is a heading with no position This heading is moved left according to its normal position This heading is moved right according to its normal position Relative positioning moves an element RELATIVE to its original position.

66

Move Left - left negative value

Move Right - left positive value

Move Up - top negative value .

Move Down - left positive value

4. Absolute Positioning:

HTML HTML , top, bottom, left, and right

:

h2 { position:absolute; left:100px; top:150px; } This is a heading with an absolute position

67

With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.

- (Clip Property): Clip - - Clip: sClip sClip - shape - rect (top, right, bottom, left) auto

auto , clip "overflow:visible" -

img

{

position:absolute;

68

clip:rect(0px,60px,200px,0px);

}

(cursor Property):

, site visit -

p { cursor: wait } h4 { cursor: help } h5 { cursor: crosshair }

URL -

P{cursor: url(sajkdg.cur) url(sdjg.cur),text}

-

cursor: auto cursor: inherit

cursor: crosshair cursor: default cursor: help cursor: move

cursor: pointer cursor: progress

69

cursor: text cursor: wait

cursor: e-resize cursor: ne-resize cursor: nw-resize cursor: n-resize cursor: se-resize cursor: sw-resize cursor: s-resize cursor: w-resize

- Mouse over the words to change the cursor. auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait (Overflow Property):

70

overflow - top left, height width overflow -

visible

hidden scroll

auto

div.scroll { background-color:#00FFFF; width:100px; height:100px; overflow:scroll; } div.hidden { background-color:#00FF00; width:100px; height:100px; overflow:hidden; } The overflow property specifies what to do if the content of an element exceeds the size of the element's box. overflow:scroll You can use the overflow property when you want to have better control of the layout. The default value is visible.

71

overflow:hidden You can use the overflow property when you want to have better control of the layout. The default value is visible.

(Z-index Property):

(position:absolute) top, bottom, left, and right HTML HTML (Z-index) (Z-index) auto 1,2,3,-1

72

p o s i t i o n a b s o l u t e: t o p b o t t o m l e f t, , , a n d r i g h t (Z -i n d e x ) z-index - auto Sets the stack order equal to its parents. This is default number Sets the stack order of the element. Negative numbers are allowed -

73

-

[ ] -

"box model" "box model" HTML -

1.margins 2.borders 3.padding 4. contents

74

Margin - Margin border

Border - padding content-

Padding padding padding

Content - ,

- width and height padding, border and margin

width:250px; padding:10px; border:5px solid gray; margin:10px;

250px (width) + 20px (left and right padding) + 10px (left and right border)

75

+ 20px (left and right margin) = 300px

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

div.ex

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

76

The line above is 250px wide.

The total width of this element is also 250px.

- Margin Properties:

margin - margin shorthand property ("margin") margin-bottom bottom margin- margin-left left margin - margin-right right margin - margin-top top margin -

1.Margin - Shorthand property

margin property property- margin shorthand property ("margin") margin top>right>bottom>left

margin property

margin:25px 50px 75px 100px;

77

o top margin is 25px o right margin is 50px o bottom margin is 75px o left margin is 100px

margin property

Img{margin:1cm 2cm} ,

Img{margin:1cm 2cm 1cm 2cm }

margin:25px 50px 75px; o top margin is 25px o right and left margins are 50px [ ] o bottom margin is 75px

margin:25px 50px; o top and bottom margins are 25px o right and left margins are 50px

margin:25px; o all four margins are 25px

78

p

{


}

p.margin

{

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

}

This is a paragraph with no specified margins.

This is a paragraph with specified margins.

79

margin property

auto length px, pt, em fixed margin %

2. Border Property:

customize (style, color)

- :

1.border border shorthand property ("border":) border properties-

2.border-bottom border-bottom shorthand property(border-bottom:) bottom border properties-

3.border-bottom-color

border-bottom-color property bottom border-

4.border-bottom-style Sets the style of the bottom border

5.border-bottom-width

Sets the width of the bottom border

6.border-color Sets the color of the four borders

7.border-left border-left shorthand property left border properties 8.border-left-color Sets the color of the left border 9.border-left-style Sets the style of the left border 10.border-left-width

Sets the width of the left border

11.border-right Sets all the right border properties in one declaration 12.border-right-color

Sets the color of the right border

13.border-right-style

Sets the style of the right border

80

14.border-right-width Sets the width of the right border

15.border-style Sets the style of the four borders 16.border-top Sets all the top border properties in one declaration 17.border-top-color Sets the color of the top border 18.border-top-style Sets the style of the top border 19.border-top-width Sets the width of the top border 20.border-width Sets the width of the four borders 1.border property:

border shorthand property ("border":) border properties- border-width>border-style>border-color ,

-

2.border-bottom property:

border-bottom shorthand property(border-bottom:) bottom border properties- border-bottom-width>border-bottom-style> border-bottom-color.

81

3.border-bottom-color: border-bottom-color property bottom border-

4.border-bottom-style property:

border-bottom-style property bottom

82

border-bottom-style property nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetinherit 5.border-bottom-width property:

border-bottom-width property bottom

border-bottom-width border-style

border-bottom-width - thin medium t h i c k

6.border-color property:

border-color property HTML "border-color" property , "border-style" property , You can also

83

set the border color to "transparent" Specifies that the border color should be transparent. This is default.

border-width

border-color:red green blue pink; o top border is red o right border is green o bottom border is blue o left border is pink

border-color:red green blue; o top border is red o right and left borders are green o bottom border is blue

border-color:dotted red green; o top and bottom borders are red o right and left borders are green

border-color:red; o all four borders are red

84

7.border-left property:

border-left shorthand property left border properties border-left-widthborder-left-styleborder-left-color.

8.border-left-color property:

b o r d e r -l e f t -c o l o r p r o p e r t y

85

9.border-left-style property:

border-left-style property

border-bottom-style property border-left-style property- 10.border-left-width property: border-bottom-width property

86

11.border-right property: border-left property- 12.border-right-color property: border-left-color property- 13.border-right-style property:

border-bottom-style property border-left-style property

14.border-right-width property: border-bottom-width property border-left-width property

15.border-style Properties: border-style:- none

hidden The same as "none", except in border conflict resolution for table elements

dotted dotted border dashed dashed border solid solid border double double border groove 3D grooved border border-color- ridge 3D ridged border border-color- inset 3D inset border border-color- outset 3D outset border border-color-

88

border-style:dotted solid double dashed; o top border is dotted o right border is solid o bottom border is double o left border is dashed

border-style:dotted solid double; o top border is dotted o right and left borders are solid o bottom border is double

border-style:dotted solid; o top and bottom borders are dotted o right and left borders are solid

89

border-style:dotted; o all four borders are dotted

Output:

16.border-top property:

The border-top shorthand property sets all the top border properties in one declaration. border-top-width border-top-style border-top-color.

90

17.border-top-color property: border-left-color property: 18.border-top-style property:

border-bottom-style property border-left-style property- 19.border-top-width property: border-bottom-width property

20.border-width property:

border-width property "border-width" property , "border-style" property , -. . pre-defined values pre-defined value

thin thin border medium medium border default thick thick border length border-width

92

border content (paragraphs, tables ) default Padding background color

CSS Padding Properties

1.padding padding shorthand property(padding:) padding properties

2.padding-bottom 3.padding-left 4.padding-right 5.padding-top

CSS Padding Properties - length px, pt, em fixed padding %

CSS Padding Properties

1.padding shorthand property:

padding shorthand property(padding:) padding properties padding shorthand property

padding:10px 5px 15px 20px; [ ] o top padding is 10px o right padding is 5px o bottom padding is 15px o left padding is 20px

93

padding:10px 5px 15px; o top padding is 10px o right and left padding are 5px o bottom padding is 15px

padding:10px 5px; o top and bottom padding are 10px o right and left padding are 5px

padding:10px; o all four paddings are 10px

2.CSS padding-bottom Property:

The padding-bottom property sets the bottom padding (space) of an element.

3.CSS padding-left Property:

The padding-left property sets the left padding (space) of an element.

94

4.CSS padding-right Property

The padding-right property sets the right padding (space) of an element.

5.CSS padding-top Property

The padding-top property sets the top padding (space) of an element.

.

- Outline Properties:

1.outline

outline-color outline-style outline-width

2.outline-color color_name

95

hex_number rgb_number invert

3.outline-style

none dotted dashed solid double groove ridge inset outset

4.outline-width Thin/medium thick/length

.

outline-coloroutline-style outline-width.

.

o u t l i n e -s t y l e p r o p e r t y o u t l i n e -c o l o r p r o p e r t y -

96

color invert

.

outline-style property

o u t l i n e -s t y l e p r o p e r t y -

none dotted dashed solid double groove 3D grooved ridge 3D ridged inset 3D inset outset 3D outset

-

p {border:1px solid red;}

97

p.dotted {outline-style:dotted;}

p.dashed {outline-style:dashed;}

p.solid {outline-style:solid;}

p.double {outline-style:double;}

p.groove {outline-style:groove;}

p.ridge {outline-style:ridge;}

p.inset {outline-style:inset;}

p.outset {outline-style:outset;}

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline

A ridge outline

An inset outline

An outset outline

specified.

98

. o u t l i n e -s t y l e p r o p e r t y outline-width property - outline-width property- - thin Specifies a thin outline medium Specifies a medium outline. This is default thick Specifies a thick outline length Allows you to define the thickness of the outline

This example demonstrates how to set the width of an outline.

100

- [ - ]

- -

border property -

101

, table, th, td separate border border-collapse property

103

- [ ]

HTML- align attribute- Wrapping magazines - left, right, none, inherit.

104

Output:

Clear float left, right, none both -

P{clear: both}

P{clear: left}

P{clear: right}

P{clear: none} Default. Allows floating elements on both sides

105

-

[ ]

, Class ID

. .

.

{ } { html

h1 , {} {}

106

h4{background-color:white;font-size:12px;} p{color:red;}

h4, p ,h4 h4 h4 p

background-color white h4 h4 p :

.

*{color:red;}

.

HTML element- CSS selector "id" "class" ID ID HTML id attribute #- ID Firefox.-

107

.

a group of elements- style class selector class selector HTML elements- particular style same class- class selector HTML- class attribute (".")- Class (extension) Class Class Selector

Selector/HTML Element . Class Name {Declaration}

class

108

. :

p, a p a

.

li a { text-decoration: none; color:red; }

109

li a li a , ,

.direct children

div#menu> ul { border: 1px solid black; }

ul Children ul Children ul menu direct children div ul>li>p

div ul li li p

.

h1,h2,h3,h4,a{color:red;} - H1{color:red;} H2{color:red;} H3{color:red;} H4{color:red;} a{color:red;}

H1{color : red}

H1{font-family : Arial, Arial black}

110

H1{font-size : 16pt}

h1 -

H1{color : red; font-family : Arial, Arial black; font-size : 16pt }

(,) (;)

-

,

-

Selector: pseudo class {property: value;}

-

111

Selector. Class: pseudo class {property: value;}

a.red:visited{color:#FF0000;} CSS Syntax

. (Anchor Pseudo class)

. (First child Pseudo-class)

. (lang Pseudo-class)

. (focus Pseudo-class)

-

. () ( , ) - -

a:link a:visited a:hover a:active

-

a:link {color:#0000FF;} /* unvisited link */

a:visited {color:#FF0000;} /* visited link */

112

a:hover {color:#00FF00;} /* mouse over link */

a:active {color:#000000;} /* selected link */

WebTechnologyBlog

a:hover- a:link- , a:visited a:active a:hover- a:active

. ( ) -

This is first child paragraph

This is heading

This is second child paragraph

body p -

113

p:first-child { color:blue; } This is first child paragraph

This is heading

This is second child paragraph

Note: For :first-child to work in IE8 and earlier, a must be declared.

-

In the following example, the selector matches the first element in all elements:

p > i:first-child { font-weight:bold; }

114

I am a strong man. I am a strong man. I am a strong man. I am a strong man.

In the following example, the selector matches all elements in elements that are the first child of another element:

p:first-child i { color:blue; } I am a strong man. I am a strong man. I am a strong man. I am a strong man.

. q element- lang="no"-

115

Note: IE8 supports the :lang pseudo-class only if a is specified.

. :focus - , -

input:focus

{


}

116

First name:

Last name:

,

-

Selector: pseudo-element {property: value;}

class- pseudo-elements- -

Selector.class: pseudo-element {property: value;}

117

,

. -(First letter Pseudoelement)

. -(First first line Pseudoelement)

. (Before Pseudo element)

. (After Pseudo element)

-

. -

P:first-letter{font-weight:bold}

first-letter pseudo-element first-letter pseudo-element- -

font properties

118

color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear

. -

P:first-line{font-style:bold}

first-line pseudo-element block-level elements-

first-line pseudo-element- -

font properties color properties background properties word-spacing letter-spacing text-decoration

119

vertical-align text-transform line-height clear

. -

Selector:before{content:url(image_name.image_format);}

-

Selector:before{content: ;}

120

p:before { content:"Read this -"; background-color:yellow; color:red; font-weight:bold; }

. -

-

Selector: after {content: ;}

121

Output:

- /

:link a:link :visited a:visited :active a:active :hover a:hover :focus input:focus

:first-letter p:first-letter

:first-line p:first-line :first-child p:first-child :before p:before :after p:after

:lang(language) p:lang(it) Selects every element with a lang attribute value starting with "it"

122

-

[ ]

display value , ,

-(display:none) -(display:inline) (display:block)

-(display:none) , Declaration display:none; - -

h1.hidden {display:none;}

123

This is a visible heading

This is a hidden heading

Notice that the hidden heading does not take up space.

display:none This is a hidden heading

-(display:inline)

Declaration display:inline

li{display:inline;}

Display this link list as a horizontal menu:

HTML

124

CSS

JavaScript

XML

display:inline

(display:block) ,

display -

ul

{

list-style-type:none;

margin:0;

125

padding:0;

}

a

{

display:block;

width:60px;

}

Home

News

Contact

About

126

display: block ()

(visible), (hidden) visibility -visible , hidden Declaration visibility:visible; visibility:hidden display :none display visibility -

h1.hidden {visibility:hidden;}

This is a visible heading

127

This is a hidden heading

Notice that the hidden heading still takes up space.

128

======

Education

Css bangla e book Tonmoy Adi