Professional Documents
Culture Documents
Css Bangla E-Book
Css Bangla E-Book
-
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
-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
white space
.
<html>
<head>
<style type="text/css">
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>
<style type="text/css">
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>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
17
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
.
[
]
<html>
<head>
<style type="text/css">
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.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
p.small p.big
19
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>
<style type="text/css">
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
20
</body>
</html>
.
text-decoration
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
21
</body>
</html>
Text-decoration
none
underline
overline
line-through
blink
text-indent (<pre>)
text-indent text indent
(em,ex,pt) (%)
<html>
<head>
<style type="text/css">
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>
<style type="text/css">
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>
<style type="text/css">
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
%
25
baseline
sub
super
top
text-top
middle
bottom
textbottom
This is default
subscript
superscript
top top
top of the font
(bottom)
<html>
<head>
<style type="text/css">
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>
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>
<style type="text/css">
p
{
white-space:nowrap;
}
27
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
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
%
30
</body>
</html>
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>
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>
<style type="text/css">
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>
<style type="text/css">
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
<html>
37
<head>
<style type="text/css">
h1 {font-size:250%;}
h2 {font-size:20px;}
p {font-size:4em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
font-style
-
normal
italic
default
38
oblique
Oblique
<html>
<head>
<style type="text/css">
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
small-caps
<html>
<head>
<style type="text/css">
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>
<style type="text/css">
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
1.list-style
2.list-style-image
3.list-style-
position
4.list-style-type
list-style-image property
list-style-position property
inside Outside-
default number- ordered unordered
bullets/discs
<html>
<head>
<style type="text/css">
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
45
<html>
<head>
<style type="text/css">
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
47
<html>
<head>
<style type="text/css">
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>
<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
<html>
<head>
51
<style type="text/css">
a:link {color:#FF0000;}
/* unvisited link */
<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>
<style type="text/css">
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
-
[
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-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>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
55
</body>
</html>
background-attachment property
scroll
fixed
.
background-color property background color
, padding border
background-image property
57
'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%
<html>
<head>
<style type="text/css">
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>
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>
<style type="text/css">
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>
64
3. Relative Positioning:
top, bottom, left, and right
relatively positioned
<html>
<head>
<style type="text/css">
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>
4. Absolute Positioning:
HTML
HTML
, top, bottom, left, and right
:
<html>
<head>
<style type="text/css">
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
66
(Clip Property):
Clip -
Clip: sClip
sClip -
auto , clip
"overflow:visible"
<html>
<head>
<style type="text/css">
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 }
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>
<style type="text/css">
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
- ,
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
74
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>
<style type="text/css">
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
- Margin Properties:
- margin shorthand
margin
property ("margin")
margin-bottom bottom margin-
margin-left
left margin -
margin-right right margin -
margin-top
top margin -
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;
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>
<style type="text/css">
p
{
background-color:yellow;
}
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
- :
4.border-bottomstyle
5.border-bottomwidth
79
14.border-rightwidth
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;
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
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
dotted
dotted border
dashed
dashed border
solid
solid border
double
double border
groove
ridge
inset
outset
86
87
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
thick
thick border
length
border-width
90
91
border content
(paragraphs, tables ) default
Padding background color
4.padding-right
5.padding-top
shorthand property:
92
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
93
.
- 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
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>
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
thick
length
98
99
-
[ - ]
- -
border property -
100
101
102
-
[
Wrapping
magazines
- left, right, none, inherit.
103
Output:
Clear float
left, right, none both
P{clear: both}
P{clear: left}
P{clear: right}
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>
<style type=text/css>
H1{color : red}
H1{font-family : Arial, Arial black}
109
H1{font-size : 16pt}
</style>
h1
-
<style type=text/css>
H1{color : red; font-family : Arial, Arial black; font-size : 16pt }
</style>
(,)
(;)
110
. (<a></a>)
( , )
-
a:link
a:visited
a:hover
a:active
<html>
<head>
<style type="text/css">
a:link {color:#0000FF;}
/* unvisited link */
111
. ( )
<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
<style type="text/css">
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>
<style type="text/css">
p > i:first-child
{
font-weight:bold;
}
</style>
</head>
<body>
113
In the following example, the selector matches all <i> elements in <p>
elements that are the first child of another element:
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
.
q element-
lang="no"-
114
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 -";
background-color:yellow;
color:red;
font-weight:bold;
}
.
-
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)
121
-
[ ]
display
value ,
,
-(display:none)
-(display:inline)
(display:block)
-(display:none) ,
Declaration display:none; -
<html>
<head>
<style type="text/css">
h1.hidden {display:none;}
</style>
</head>
<body>
122
-(display:inline)
Declaration display:inline
<html>
<head>
<style type="text/css">
li{display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="../html/index.php" target="_blank">HTML</a></li>
123
</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>
<style type="text/css">
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
126
127
=== ===
128