Css Bangla E-Book

1
-
CSS Bangla E-book
(Specially For Web Designers)

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

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

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

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

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

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

-
.
.
.
.
.
..
..
..
.
-
.-
..
..
..
..
..
..
..
..
. .
..
..
..
-
.
.
.
.
.
-
.
.
.
.
.
..
..
..
..
-
.
.-
..
..
..
..
..
..
-
.
.
.
.
. (Clip Property)
. (cursor Property)
. (Overflow Property)
. (Z-index Property)
.
.-
..
.
..-
.
..
.
..-
- -
.
.
.
.
-
.
.
.
.
.
.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 m e 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 )
.. (B e f o r e P s e u d o e l e m e n t )
.. (A f t e r P s e u d o e l e m e 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 )
10

Cascading Style Sheets (CSS)

( )

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

restyle
11
HTML (h1h6, p etc)

Declaration={Properties: Value}
Declaration
"HTML tag" { "CSS Property" : "Value" ; }

-internal, external inline
<head> <style>
-
<head> <link> -
-
-

.

- <head> <style> <html>
<head>
<style type="text/css">
h1{color:#ff00ff;}
12
p{word-spacing:10px;}
</style>
<body>
<h1>My first CSS Codeing</h1>
<p>
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
</p>
</body>
</html>
index.html
.
,

<head> <link> <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
code ".css"
extension H3 {color:#FF0000;}
p{
background:#00F;
text-align:center;
}
13
style.css

<html>
<head>
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<h3>A white Header</h3>
<p>This paragraph has a blue font.
The backgrouund color of this page is gray because we changed it with CSS!</p>
</body>
</html>
index.html
index.html
.
Style

Style Type Attribute
{} <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

override
,
14
-
, - override

- "/*"
-
"*/"
[ ]
-

spacing, decoration, color,
alignment

1.color
2.direction
3.letter-spacing
4.line-height
5.text-align
6.textdecoration
7.text-indent
8.text-shadow
9.text-transform

characters space

text indent

15
10.vertical-align
11.white-space
12.word-spacing
Specifies how white-space inside an element is handled

white space
.
<html>
<head>
h1 {color:#00ff00;}
p {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph.</p>
</body>
</html>
.

<html>
<head>
p {direction:rtl;}
h5{direction:ltr}
16
</style>
</head>
<body>
<p>Some text. Default writing direction.</p>
<h5>Some text. Default writing direction.</h5>
</body>
</html>
ltr
rtl
letter-spacing
-
<html>
<head>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
17
<body>
</body>
</html>
.

[
]
<html>
<head>
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>
18
<body>
<p>
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.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
p.small p.big

19
<p class="small"> <p class="big">

,
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 <html>
<head>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
20
</body>
</html>
.
text-decoration

<html>
<head>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
21
</body>
</html>
Text-decoration
none
underline
overline
line-through
blink
text-indent (<pre>)
text-indent text indent

(em,ex,pt) (%)

<html>
<head>
22
h1 {text-indent:50px;}
</style>
</head>
<body>
<h2>In my younger and more vulnerable </h2>
<h1>In my younger and more vulnerable </h1>
</body>
</html>
<h1> text-indent:50px
50px
<html>
<head>
h1 {
background: white;
color: red;
text-shadow: 5px 3px 5px red ;
23
}
</style>
</head>
<body>
<h1>Red Shadow Effect </h1>
</body>
</html>
.
Transform capitalize( )
capitalize

none
capitalize
Capitalization
uppercase-
uppercase uppercase-
lowercase lowercase -
<html>
<head>
24
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Vertical-align property
length
%
Raises or lower an element in a percent of the "line-height" property.

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

(bottom)
<html>
<head>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src=" logo.gif" alt="W3Schools" width="270" height="50" /> image
with a default alignment.</p>
<p>An <img class="top" src=" logo.gif" alt="W3Schools" width="270"
height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src=" logo.gif" alt="W3Schools" width="270"
height="50" /> image with a text-bottom alignment.</p>
26
</body>
</html>
break <br />

</br>
white-space property
normal
nowrap
Pre
pre-line
pre-wrap
whitespace whitespace- (
wrap)
whitespace whitespace-
<br />
- Whitespace
Text will only wrap on line breaks Acts like the <pre> tag in HTML
whitespace whitespace- (
wrap)
- Whitespace (
wrap)
<html>
<head>
p
{
white-space:nowrap;
}
27
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Word Spacing property- white space

px, pt, cm, em
<html>
<head>
p
{
word-spacing:30px;
}
</style>
</head>
<body>
28
<p>
This is some text. This is some text.
</p>
</body>
</html>
-
[ ]
- height width
-

1.height
height
2.max-height
height
3.max-width
width
4.min-height
height
5.min-width
width
auto
length
%
none
length
%
none
length
%
length
%
length
%
29
6.width
width
auto
length
%
None No maximum height, maximum width.

Auto
Length px, cm
%

1+6.height and width Property:

height width <html>
<head>
div{ height:250px; width:200px; background:#887733}
</style>
</head>
<body>
<div><h3>This is a Block</h3></div>
</body>
</html>
30
2.CSS max-height Property:

<html>
<head>
p{max-height:50px; background-color:yellow;}
</style>
</head>
<body>
<p>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.</p>
31
</body>
</html>
3.CSS max-width Property:

max-width <html>
<head>
p{max-width:100px; background-color:yellow;}
</style>
</head>
<body>
<p>The maximum width of this paragraph is set to 100px.</p>
</body>
</html>
4.CSS min-height Property:

min-height <html>
<head>
32
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>
5.CSS min-width Property:

min-width <html>
<head>
p{min-width:150px; background-color:yellow;}
33
</style>
</head>
<body>
<p>The minimum width of this paragraph is set to 150px.</p>
</body>
</html>
-
[
1.font
2.font-family
3.font-size
4.font-style
5.font-variant
6.font-weight
font properties-
font family
font size
font style
Variant small caps
fontweight
fontproperty p{
34
font-size:larger;
font-style:italic;
font:varient:small-caps;
font-family:Arial;
}
font-property p{font: larger italic small-caps Arial }

<html>
<head>
p{font:15px arial,sans-serif;}
</style>
</head>
<body>
<p >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.</p>
</body>
</html>
35
.

[
]

<html>
<head>
p{font-family:"Times New Roman",Times,serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p >This is a paragraph, shown in the Times New Roman font.</p>
</body>
</html>

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
36
.
font-size
- , ,

accessibility

font size specify
- 16px (16px=1em).
font size property-
xx-small
x-small
small
medium
large
x-large
xx-large

xx-small
extra small
small
medium size.
large size
extra large size
xx-large size

smaller
larger
parent
parent

length
parent
px, cm, etc

<html>
37
<head>
h1 {font-size:250%;}
h2 {font-size:20px;}
p {font-size:4em;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
font-style
-
normal
italic
default

38
oblique
Oblique

<html>
<head>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>
39
font-variant property small-caps-

Variant small caps small-caps

normal
small-caps

<html>
<head>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
40
small-caps

.
font-weight
bold, dark, heavy font-weight
font-weight - ,
-lighter,
bolder, normal bold lighter bolder normal
-
font-weight property-
normal
characters
bold
bolder
lighter
characters
Defines thicker characters
Defines lighter characters

<html>
<head>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
41
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
42
unordered, ordered List Marker

1.list-style
2.list-style-image
3.list-style-
position
4.list-style-type
list-style property list properties
list-style-image property
list-style-position property
inside Outside-
default number- ordered unordered
bullets/discs
list-style property list properties liststyle-type list-style image

list-style list-style shorthand property list-style-type> list-style-position >list-style-image

<html>
<head>
43
ul {list-style:square url("sqpurple.gif");}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
44
list item marker list-style-image property liststyle-image property .

image bullet points unordered
normal bullet image Unordered
image
<html>
<head>
ul {list-style-image:url('sqpurple.gif');}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
45
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; }

<html>
<head>
ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}
</style>
</head>
<body>
<p>The following list has list-style-position: inside:</p>
<ul class="a">
46
<li>Earl Grey Tea - A fine black tea</li>

<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
<p>The following list has list-style-position: outside:</p>

<ul class="b">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
<p>"list-style-position: outside" is the default setting.</p>
</body>
</html>
47
default number ordered unordered bullets/discs

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

<html>
<head>
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;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
48
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
49
</body>
</html>
list-style-type property
armenian
circle
cjk-ideographic
decimal
decimal-leading-zero
disc
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
Armenian numbering
Circle
plain ideographic numbers
<ol>
(01, 02, 03, .)
<ul>
Georgian numbering
Hebrew numbering
Hiragana numbering
Hiragana iroha numbering
Katakana numbering
Katakana iroha numbering
50
lower-alpha
lower-greek
lower-latin
lower-roman
none
square
upper-alpha
upper-latin
upper-roman
(a, b, c, d, e )

(a, b, c, d, e, )
(i, ii, iii, iv, v, )

Square
(A, B, C, D, E, )
(A, B, C, D, E, )
(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-
<html>
<head>
51
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 */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
to be effective.</p>
</body>
</html>
index.html
<html>
<head>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
52
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;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
53
<p><b><a class="one" href="default.asp" target="_blank">This link changes

color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes
font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes
background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes
font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes
text-decoration</a></b></p>
</body>
</html>
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-

54
2.backgroundattachment
- background
fixed
3.background-color
background-color property background

color
background-image property

5.background-position
background-position Property
4.background-image
6.background-repeat
repeat ,
CSS- background-repeat
background properties-
background - background-color>background-image>backgroundrepeat>background-attachment>background-position.

<head>
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
55
background-attachment property - background

fixed

background-attachment
Watermark Watermark
<html>
<head>
body
{
background-image:url('22.png');
background-repeat:repeat;
background-attachment:fixed;
}
div{height:1200px; width:960px; background:#112200; margin:0 auto;}
</style>
</head>
<body>
<div>
<p>This is a division</p>
</div>
56
</body>
</html>

background-attachment property
scroll
fixed
.
background-color property background color
, padding border
margin background color text color

background-color
body
{
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
background-image property
57
Body { background-image: url(largePic.jpg); }

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

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"
58
center bottom
x% y%
xpos ypos

horizontal the vertical
% 0% 0%
horizontal the vertical

% % positions
<html>
<head>
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
59
<p><b>Note:</b> For this to work in Firefox and Opera, the backgroundattachment property must be set to "fixed".</p>
</body>
</html>
, CSS-
background-repeat background-repeat -
repeat
repeat-x
repeat-y
no-repeat
vertically horizontally
horizontally
vertically

60
-
[ ]
(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
61
<html>
<head>
<style>
.static{
position:static;
left:100px;
top:70px;}
</style>
</head>
<body >
<p class="static">The CSS positioning properties allow you to position an
element. </p>
<p>The CSS positioning properties allow you to position an element. </p>

</body>
</html>
62

,
, static positioned top, bottom, left, right

2.Fixed Positioning:
HTML

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

<html>
<head>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
63
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a
!DOCTYPE is specified.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
some more text
64
3. Relative Positioning:
top, bottom, left, and right

relatively positioned

<html>
<head>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal
position</h2>
<h2 class="pos_right">This heading is moved right according to its normal
position</h2>
<p>Relative positioning moves an element RELATIVE to its original
position.</p>
</body>
65
</html>
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

:
<html>
<head>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
66
<p>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.</p>
</body>
</html>
(Clip Property):
Clip -
Clip: sClip
sClip -
shape - rect (top, right, bottom, left)

auto
auto , clip
"overflow:visible"
<html>
<head>
img
{
position:absolute;
67
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>
(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
68
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
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
</body>
</html>
(Overflow Property):
69
overflow
- top left, height width
overflow visible
hidden
scroll

auto
<html>
<head>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds
the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better
control of the layout. The default value is visible.</div>
70
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better
control of the layout. The default value is visible.</div>
</body>
</html>
(Z-index Property):
(position:absolute) top, bottom, left, and right
HTML
HTML
(Z-index) (Zindex) auto 1,2,3,-1

71
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
-
72
-
[

-

"box model"
"box model" HTML
1.margins 2.borders 3.padding 4. contents

73
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)
74
+ 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

<html>
<head>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
75
<div class="ex">The line above is 250px wide.<br />

The total width of this element is also 250px.</div>
</body>
</html>
- Margin Properties:
- margin shorthand
margin
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;
76

top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
o
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

<html>
77
<head>
p
{
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>
</html>
78
margin property
auto
length
%

px, pt, em fixed margin

2. Border Property:

customize (style, color)
1.border
2.border-bottom
3.border-bottomcolor
- :
border shorthand property ("border":) border

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

border-bottom-color property bottom
border-
4.border-bottomstyle
Sets the style of the bottom border
5.border-bottomwidth
Sets the width of the bottom border
Sets the color of the four borders

border-left shorthand property left border
7.border-left
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-leftSets the width of the left border
width
11.border-right
Sets all the right border properties in one declaration
12.border-rightSets the color of the right border
color
13.border-rightSets the style of the right border
style
6.border-color
79
14.border-rightwidth
Sets the width of the right border
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
15.border-style
1.border property:
border shorthand property ("border":) border properties-

border-width>borderstyle>border-color ,
-
2.border-bottom property:
border-bottom shorthand property(border-bottom:) bottom border
properties- border-bottomwidth>border-bottom-style> border-bottom-color.
80
3.border-bottom-color:
border-bottom-color property bottom border-
4.border-bottom-style property:
border-bottom-style property bottom
81
border-bottom-style property
nonehiddendotteddashedsoliddoublegrooveridgeinsetout
setinherit
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
82
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
83
7.border-left property:
border-left shorthand property left border properties

border-left-widthborder-leftstyleborder-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
84
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
85
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
inset
3D ridged border border-color-

3D inset border border-color-
outset
3D outset border border-color-
86
87
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
88
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.
89
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 predefined value

thin
thin border
medium
medium border default
thick
thick border

length
border-width
90
91
border content
(paragraphs, tables ) default
Padding background color
CSS Padding Properties
padding shorthand property(padding:) padding

1.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
92
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.
93
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
2.outline-color
outline-color
outline-style
outline-width
color_name
94
3.outline-style
4.outline-width
hex_number
rgb_number
invert
none
dotted
dashed
solid
double
groove
ridge
inset
outset
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
c o l o r p r o p e r t y -
out l i ne-
95
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
p {border:1px solid red;}
96
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;}
</style>
</head>
<body>
<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
specified.
97
</body>
</html>
.
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.
98
99
-
[ - ]
- -

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

border-collapse property
101
102
-
[
HTML- align attribute-
Wrapping
magazines
- left, right, none, inherit.

103
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
104
[ ]
,

<BODY>
Class ID
.
{ }
{ html

h1 , {}
{}
105
h4{background-color:white;font-size:12px;}
p{color:red;}
h4, p ,h4 <h4></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.-
106
.
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
107
. :
p, a p <p>
a
.

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

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

h1,h2,h3,h4,a{color:red;}
<style type=text/css>
H1{color:red;}
H2{color:red;}
H3{color:red;}
H4{color:red;}
a{color:red;}
</style>

H1{color : red}
H1{font-family : Arial, Arial black}
109
H1{font-size : 16pt}
</style>
h1
-
H1{color : red; font-family : Arial, Arial black; font-size : 16pt }
</style>
(,)
(;)
Selector: pseudo class {property: value;}

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

a.red:visited{color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

. (Anchor Pseudo class)
. (First child Pseudo-class)
. (lang Pseudo-class)
. (focus Pseudo-class)
. (<a></a>)

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

<html>
<head>
a:link {color:#0000FF;}
/* unvisited link */
a:visited {color:#FF0000;} /* visited link */
111
a:hover {color:#00FF00;} /* mouse over link */

a:active {color:#000000;} /* selected link */
</style>
</head>
<body>
<a href="http://www.webtechnologyblog.com"
target="_blank">WebTechnologyBlog</a>
</body>
</html>
a:hover- a:link- , a:visited
a:active a:hover- a:active
. ( )
<body>
<p>This is first child paragraph</p>
<h2>This is heading</h2>
<p> This is second child paragraph </p>
</body>
body
p
<html>
<head>
112
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>This is first child paragraph</p>
<h2>This is heading</h2>
<p> This is second child paragraph </p>
</body>
</html>

Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be
declared.
In the following example, the selector matches the first <i> element in all <p>
elements:
<html>
<head>
p > i:first-child
{
font-weight:bold;
}
</style>
</head>
<body>
113
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

</body>
</html>
In the following example, the selector matches all <i> elements in <p>
elements that are the first child of another element:
<html>
<head>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
</body>
</html>
.
q element-
lang="no"-

114
Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified.

. :focus
- ,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
input:focus
{
}
</style>
</head>
115
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

,

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

,

. -(First letter Pseudoelement)
. -(First first line Pseudoelement)
. (Before Pseudo element)
. (After Pseudo element)

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

first-letter pseudo-element
letter pseudo-element-
first-
font properties
117
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
118
vertical-align
text-transform
line-height
clear
.
-

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

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

Selector: after {content:

;}

120
Output:
- /

:link
a:link
:visited
a:visited
:active
a:active
:hover
a:hover
:focus
input:focus
:first-letter
p:firstletter
:first-line
p:first-line
:first-child
p:first-child
:before
p:before
:after
p:after
:lang(language) p:lang(it)
Selects every <p> element with a lang attribute

value starting with "it"
121
-
[ ]

display

value ,
,
-(display:none)
-(display:inline)

(display:block)
-(display:none) ,
Declaration display:none; -
<html>
<head>
h1.hidden {display:none;}
</style>
</head>
<body>
122
<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>
display:none This is a hidden heading
-(display:inline)

Declaration display:inline
<html>
<head>
li{display:inline;}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="../html/index.php" target="_blank">HTML</a></li>
123
<li><a href=" index.php " target="_blank">CSS</a></li>

<li><a href="../js/ index.php " target="_blank">JavaScript</a></li>
<li><a href="../xml/ index.php " target="_blank">XML</a></li>
</ul>
</body>
</html>
display:inline
(display:block)
,

display <html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
124
padding:0;
}
a
{
display:block;
width:60px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
125
display: block ( )

(visible), (hidden) visibility
-visible , hidden

Declaration
visibility:visible; visibility:hidden
display :none
display
visibility <html>
<head>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
126
<h1 class="hidden">This is a hidden heading</h1>

<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
127
=== ===
128

Css Bangla E-Book

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Bangla E-Book

Uploaded by

Copyright:

Available Formats

1

HTML (h1h6, p etc)

Specifies how white-space inside an element is handled

<p class="small"> <p class="big">

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

break <br />

Word Spacing property- white space

None No maximum height, maximum width.

1+6.height and width Property:

2.CSS max-height Property:

3.CSS max-width Property:

4.CSS min-height Property:

5.CSS min-width Property:

px, cm, etc

font-variant property small-caps-

unordered, ordered List Marker

list-style property list properties

list-style property list properties liststyle-type list-style image

list item marker list-style-image property liststyle-image property .

list-style-position property inside

<li>Earl Grey Tea - A fine black tea</li>

<p>The following list has list-style-position: outside:</p>

default number ordered unordered bullets/discs

<p>Example of ordered lists:</p>

a:hover- a:link a:visited

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

<p><b><a class="one" href="default.asp" target="_blank">This link changes

background-color property background

background-attachment property - background

margin background color text color

Body { background-image: url(largePic.jpg); }

horizontal the vertical

<p>The CSS positioning properties allow you to position an element. </p>

some more text

Move Left - left negative value

top negative value

Move Down - left positive value

<p>With absolute positioning, an element can be placed anywhere on a page.

shape - rect (top, right, bottom, left)

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

Border - padding content-

Padding padding padding

- width and height

+ 20px (left and right margin)

<div class="ex">The line above is 250px wide.<br />

1.Margin - Shorthand property

margin:25px 50px 75px 100px;

margin:25px 50px 75px;

border shorthand property ("border":) border

Sets the style of the bottom border

Sets the width of the bottom border

Sets the color of the four borders

Sets the width of the right border

Sets the style of the four borders

border-color:red green blue pink;

border-color:red green blue;

border-color:dotted red green;

border-bottom-style property border-left-style

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

3D grooved border border-color-

3D ridged border border-color-

3D outset border border-color-

border-style:dotted solid double dashed;