Scribd
Upload
2K views173 pages

CSS Bangla Ebook by Faruk

This document provides an overview of CSS (Cascading Style Sheets) and the different ways to add CSS to HTML documents. The summary is: 1. CSS is used to style and lay out web pages. It allows separation of document content from document presentation. 2. There are three main ways to insert CSS into HTML - internally via <style> tags, externally via <link> tags, and inline using style attributes. 3. CSS rules are made up of selectors that point to HTML elements followed by declarations in braces that specify properties and values.

Uploaded by

Bright Uzzal
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views173 pages

CSS Bangla Ebook by Faruk

This document provides an overview of CSS (Cascading Style Sheets) and the different ways to add CSS to HTML documents. The summary is: 1. CSS is used to style and lay out web pages. It allows separation of document content from document presentation. 2. There are three main ways to insert CSS into HTML - internally via <style> tags, externally via <link> tags, and inline using style attributes. 3. CSS rules are made up of selectors that point to HTML elements followed by declarations in braces that specify properties and values.

Uploaded by

Bright Uzzal
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 173

Written By-

o s i    ai o   g  r


us     s i  !   web designing e #k
u   un  & i Cascading Style Sheets (CSS) e   l
i CSS ei (k* e        e+ (k* ,n
a+ ,n s i       s i    (k*
s i #   nt s &  a. /  ei s i  e 
 + e  s i  ei        !  style
sheet (0  !  (g  0) 
m4,
.  ei&ee
documents  5/  0 ! ee e+ ei&ee e #k
a.    ! e /    i  ee  0  !6 a7i
ei&ee mn ,   !    ,  ee 
! & 


ee d  
    ;
< ee e   ei&ee e = 5  !o #5>n 
 
@ A4 ee  ( .  m4.,   i restyle   

ee    6B;
ee e 6B d a+ , 6    e   k e+ an  e 
e  (   &   F 6B &t #o  -

 k    F HTML e * (h1h6, p etc)

(   !  di a+ / -

Declaration={Properties: Value}

e  Declaration /       # 5/ / 


!o  ,   0  "HTML tag" { "CSS Property" : "Value" ; }

 /   (  0;
ei&ee - e     k e( CSS  0   !  ee
M i  .CSS Extension # , r

s i    d;

HTML (k* s i     d A -internal, external


e+ inline e ei&ee  <head>  6 , <style>  6 #
ee  (  6   s i +   - e O i* 
ee ! # ee  (     0 ee  ( ! #
M i  0  e+ <head>  6 , <link>  6 # +4k  - ei
d O ek . ee ! o  ( i  ek .
ee     ! ei&ee - e p e *  /
e,  s i . F   - i i ee    HTML (k*
! s i    e0 !   ,  ei  
! & ;

<.i*  ee;
i*  ee   F 0i     0 e ei&ee (k* n
e ( i #  i*  ee- e <head>  6 , <style>  6 #

ee  (  6  -

p# .:
White text on a black background!

@.ek . ee;
& ,  # !  ee  ei&ee  5/  0, !
e i  ek . ee 0 e ee  ( a (k* n
    0 ek . ee ut ek . ee e ee
M i  <head>  6 , <link>  6 # +4k   <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

ek . ee M i  V4 t ee code    e+ ei M i 


".css" M i extension # ,   e u# F #04h3 {color:red;}
p {color:#ff00ff;}
body {background-color:green;}

e  ei M i  ! test.css   # ,  e & 


 ei&ee M i   / ee M i   +  #-

  ei&ee M i  index.html   ei M l  a/. Y


0  ee M i !A 0  , 

Z.i i ee;
(k* p HTML  6  / Style eTu    (k*
s i . F  i  i i ee i i ee kt Style
#. #   Type Attribute (   p    e+ d  n
{} e # ud &h     & u# F #04-

ek .  i*  ee  i i ee e p  n  e a/.


O ek .  i*  ee d  s i #.  /  o !
i i ee d  ] s i override      , i i
ee  ee e B ud7  &4 _   i e !+ , 
   u&
 ;# ek . ee M i   + i*  ee- e  s 

   ek . ee, i*  ee-  override 

ee  !o A4 / ;


n  6  ;
n  6      +g e    a ee- e n "/*" # Vr 
e+ "*/" #  a  -

 b ((\)  ;
 b 
i.   sTe ,  b  /  e+   i n i /  iu 
e* i  k  eg & 
ii. s ee  k i s i (      
 b      e     ; \ # ( 
    j  
iii.   k i  (k*       g 
  n  b  # e  

 b;
b;

! e0   ,  e+     6   b i    e


n  p .    ; page-break-before, page-break-after, e+
page-break-inside p/ d p .     : auto, always, avoid, left o
right always #    b =  avoid #  
b =   left      b =  e+ . 
left   M    right     .  right
  M   page-break-inside p .    auto o avoid
h   

ee- e  A4 p .   k t  ee k e


  ! k e spacing, decoration, e+ alignment nt 
 
All CSS Text Properties:

Property
1.color

Description
k e . F 

2.direction

k # #. 

3.letterspacing

e   e k characters g   space e  


    g   

4.line-height

i un #. 

5.text-align

k !n,i e i* #. 

6.textdecoration

ei p .   k ,n,  p# .    

7.text-indent text indent    0    # / 4k A g # Vr 


8.text-shadow k 7 ( iMk  6 
9.texttransform

Controls the capitalization of text

10.verticalalign

k u m e i* #. 

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


12.wordspacing

e      bg   white space e     


 g   

1.Text Color property:


  p .    k   . F   W3C an  !
# color property     !  background-color property- o
   

2.CSS direction Property:


k # #.  ei p .     e   a 

-ei p . d     


ltr

k #   / (   e (Ml  

rtl

k # (  /   

3. letter-spacing Property:
ee letter-spacing property e   e k characters
g   space e       g   

10

4. line-height Property:
d i  j   F M q s  /   #.   ei p .
  Negative values are not allowed.

ei p . h   e<.   m       (ekt i un  M*  i    / g
  )
@. i un px, pt, cm e   F. 
Z.  (%)       i un  h M*  i  k

5.text align property:


   website e default   k Align: left  &. /  text-align
attribute e    k e ,n Alignment #   e     left, right, center, justifyee  (;

11

6.text-decoration property:
ei p .   k ,n,  p# .     text-decoration
property &       s !*(  i #i  -

!u4;

Text-decoration   g     


 -, 4
none

F.
 k #.  e (Ml

underline

k !*(  i 

overline

k o,  i 

linethrough

k  j   # 6 

blink

k j , 

7.text-indent property:
ee text-indent  ! ei&ee (<pre>)  6 .  
   values or percentages    ! text-indent #.> 
text indent    0    # / 4k A g # Vr  e  
 =#_(em,ex,pt) o   (%) h   ee  (;

12

p { text-indent: 20px; }
h5 { text-indent: 30%; }
p# .:

6,   #o   

8.text-shadow property:
  k 7 ( eMk p 6      #.   ei p .
# e   #.   e, -

9.text- transformation property:


k Transform e   k e dr capitalize(A  / g  g
/ A )    e   p b p/ ako capitalize 
   e &      Value

Description

none

No capitalization. This is default

capitalize Transforms the first character of each word to uppercase


uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
13

10.Vertical-align property:
k ul e i* #.   ei p .  
Vertical-align property  g     Value

Description

length

Raises or lower an element by the specified length. Negative


values are allowed

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


property. Negative values are allowed

baseline

i u #   i  / .  u #  e i  This is


default

sub

.  u #  subscript  #0 

super

.  u #  superscript  #0 

top

.  u #  top  .    & uq&4 u #  top e  /


e i 

text-top
middle
bottom
textbottom

.  u #  i u #  top of the font e  / e i 


.  u #  i u #   j e i 
.  u #    oi i & & u #     /
e i 
.  u #   (bottom) i u #     / e i 

e u# F #04-

14

11. white-space Property:


white-space property e    0  e i &  /  k 
! break <br />  6  # </br>  6 #   / & i
 
white-space property  g     , 4
normal
nowrap
pre

F.
Sequences of whitespace will collapse into a single whitespace. Text will
wrap when necessary. This is default
Sequences of whitespace will collapse into a single whitespace. Text will
never wrap to the next line. The text continues on the same line until a <br
/> tag is encountered
Whitespace is preserved by the browser. Text will only wrap on line breaks
Acts like the <pre> tag in HTML
15

pre-line
pre-wrap

Sequences of whitespace will collapse into a single whitespace. Text will


wrap when necessary, and on line breaks
Whitespace is preserved by the browser. Text will wrap when necessary,
and on line breaks

12. word-spacing Property:


Word Spacing property-e      bg   white space
e       g    e   px, pt, cm, em e    6,

       

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

16

17

All CSS Dimension Properties:


p .

F.

1.height

e * height #. 

2.max-height

e * .n height #. 

3.max-width

e * .n width #. 

4.min-height

e * .m height #. 

5.min-width

e * .m width #. 

6.width

e * width #. 

 
auto
length
%
none
length
%
none
length
%
length
%
length
%
auto
length
%

u ei A p .   p .i padding, borders e+ margins i p .
h , 4 g    o F. m #o  None No maximum height, maximum width. This is default
Auto The browser calculates the height. This is default
Length px, cm e   
% Defines the minimum width in percent of the containing block
   ,  m e# ! &   ;
1+6.CSS height and width Property:
  e * height o width F.   ei p . d d  -

18

2.CSS max-height Property:


e * .n  i #.  -

3.CSS max-width Property:


e * max-width #.  -

19

4.CSS min-height Property


e * min-height #.  -

5.CSS min-width Property:


e * min-width #.  -

20

21

k ,  p# .    nt ,  ee !  #A !


k size, color, style i # .    ! A , 
k bold  underline   nt !   percentage  
,  M* resize    ei a e0  ! &  A
ee- e M* m. A p .      eg  ;
p .

F.

1.font

 font properties- e n e (  

2.font-family

k n font family . F 

3.font-size

k n font size . F 

4.font-style

k n font style . F 

5.font-variant
6.font-weight

M* Variant e    ! M*  small caps e .


  
e M*   F   #0     j   n   
 font-weight p .

p p . m. & ! &   ;


1.Font property:
M* ,n p .   ,n ,n (    # ei (  
   0  n font- property     ; e   F
(  -

font- property    ,  &   0  -

p   s # ! #  

22

font- property   kt ei k a7i  &  ; font-style
font-variant font-weight font-size/line-height font-familyfontsize e+ font-family p .       -

font- property-           


 -, 4
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar

F.

e# F. u #o !A

Uses the font that are used by captioned controls (like buttons,
drop-downs, etc.)
Uses the font that are used by icon labels
Uses the fonts that are used by dropdown menus
Uses the fonts that are used by dialog boxes
A smaller version of the caption font
Uses the fonts that are used by the status bar

2.font-family Property:
23

  M* M   M* gr    &   #.    e
p .   -

M*    j s /    a7i ud &h  j  0 


an kt ei     o &   ud &h    ut Single
ag M* e /   -

ekt !  M* M     o     


ee- e di F M* M   A-

1.family-name M*  - Arial, times new roman i #


2.generic-family  M* M    - serif, sans-serif
i # 6a  #0 6A serif fonts  sans-serif fonts
 computer monitor e 04  g  

3. font-size Property:
M* !  . F   font-size p .   ei p . n & 
F        - a s , !k,  o =#_.

a s   i;

24

  b u  k  i . s 6 #  e accessibility e n e g


s # !u4  i !6i  /   a s   i      

!k
!
k  i; k  i . s 6 #

! # font size specify   #  (Ml M*   i  i #0   ! ei
(Ml  i  - 16px (16px=1em).
font size property-         
 -, 4
F.
a s   
xx-small
M*  i  xx-small  i
x-small
M*  i  extra small  i
small
M*  i  small  i
medium
M*  i  medium size. e (Ml
large
M*  i  large size
x-large
M*  i  extra large size
xx-large
M*  i  xx-large size
!k  ; !6 u #   k .  u #  !  A   g  / 
/ 
smaller
parent e * & A  !  M*  ei      
larger
parent e * & g !  M*  ei      
=#_.  
 
length
d>  i M*  px, cm, etc e    
  
%
parent e *  k M*  i . F  

0 default M* .  &  0 Percentages    , nt
static value   u&  u# F-

25

4..font- style property:


M*M n     font-style p . font-style property i  italic text
specify      e  , 4  !A, 4
normal
italic
oblique

F.
s ,  M*M #0  e default
i   #0 
M*M Oblique , . #0 

5.font-variant property:
font-variant property . F  !  M* small-caps- e #0   #0 
 ee M* Variant e    ! M*  small caps e .
   Note: nt  M*, ee M* Variant    .  
 i p  !6 ~   u&small-caps font-  uppercase letters- e
.    nt uppercase letters g  small-caps font e !   i
#0 
, 4
normal
small-caps

F.
The browser displays a normal font. This is default
The browser displays a small-caps font

26

a M* kt small-caps ,  * /  #   M* s   , .


 o      g   ak   
6.font-weight property:
e M*   F   #0     j   n     fontweight p .   F ,n M* bold, dark, heavy i # , . / 
 i e b # font-weight p   ee font-weight p .
  #.   +0 # - a/.   M*,   l
e +0 A g o   o (.e     #.    eg
 - lighter, bolder, normal e+ bold lighter o bolder    
b u  normal o  l , .  A  A M* , .    font-weight property-       
-Value
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

Description
Defines normal characters. This is default
Defines thick characters
Defines thicker characters
Defines lighter characters

Defines from thin to thick characters. 400 is the same as normal, and 700 is
the same as bold

27

font-stretch property:
M* i  , (n(     #.   e p .   e  
  - normal, wider, narrower, ultra-condensed, extra- condensed ,
condensed , semi- condensed, semi-expanded, extra-expanded,e+ ultraexpanded  u #   /i e h   

28

29

ee  s p . unordered, ordered e io List Marker


   s 6 # ee #  s  ei&ee  a
 customize   
 s n h  p .;
p .
1.list-style
2.list-style-image
3.list-style-position
4.list-style-type

F.
list-style property e (  i  list properties  4

list-style-image property  s !i i d  p 
list-style-position property . F   s !ig s , 
as / inside  Outside- e / 
default number- e ordered  unordered  s e bullets/discs
 ,n s i     

m  p .  s  ! &   ;

1.list-style property:
list-style property e (  i  list properties  4  !
ei list-style-type e   e e s    0 !  liststyle image  (   0 an list-style #0  list-style shorthand
property   k  list-style-type list-style-position  list-style-image
#   p . , 4  #      s   ekt ] p . (Ml , 4 
o  - list-style: circle inside;

30

Output:

# i  (    &  !u4 #0 

2.list-style-image property:
i list item marker  #0  list-style-image property  
  list-style-image property  s !i i d  p 
.   F i  (   ei p .       F image 
31

bullet points   unordered  s e n     normal bullet e


. image      & ,  Unordered  s e
kt image     & u# F #04;

list-style-image property ,n b u  ,n,  p# .   i Cross browser


Solution     & u# F #04;

32

 ( baF;
!a( (  s n s !i &h #i  list-style-type- e , 4 none  #o A padding
e+ margin e , 4 0px  A
 s ni      (no-repeat) i   B  #  (left 0px
and down 5px) padding-left     s k as  B  # 
url
none

i   
  i p# .  4j    

3. list-style-position property:
list-style-position property . F   s !ig s ,  as
/ inside  Outside- e /  list-style-position e , 4 inside #
0  sg  .  , # /  ! Outside # normal  s
Position e /  Outside , 4 e default , 4
ul { list-style-position: inside; }
ol { list-style-position: outside; }
e u# F #04;

33

4. list-style-type property:

! # default number e ordered  s  unordered  s


e bullets/discs  ,n s i    &    !  s e
n ,n  s i      ei     & liststyle-type property- e   ;

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

34

Output:

35

list-style-type property   , 4       #   o F. m #o  ;


, 4
armenian
circle
cjk-ideographic
decimal
decimal-leading-zero
disc
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
lower-alpha
lower-greek
lower-latin
lower-roman
none

F.
Armenian numbering &h p 
Circle &h p 
plain ideographic numbers &h p 
s ,   m  p  e <ol> e n (Ml
 m  Vr /  (01, 02, 03, i #.)
,  5t p e <ul> e n (Ml
Georgian numbering &h p 
Hebrew numbering &h p 
Hiragana numbering &h p 
Hiragana iroha numbering &h p 
Katakana numbering &h p 
Katakana iroha numbering &h p 
A    ak p  (a, b, c, d, e i #)
A    g  ak p 
A      ak p  (a, b, c, d, e, i #)
A       ak p  (i, ii, iii, iv, v, i #)
  &h #0  
36

square
upper-alpha
upper-latin
upper-roman

Square &h p 


g   ak p  (A, B, C, D, E, i # )
g     ak p  (A, B, C, D, E, i #)
g      ak p  (I, II, III, IV, V, i #)

37

38

ee e   e  6   + ! iMk  6     +


,n CSS property (color, font-family, background, etc.)    ,n
s i . F    nt  s s s i . F    s as 
u ,t 
 s &  as 

a:linke   F  +  ,   
a:visitede  +  i. ,  A
a:hovere e  +     u  0   /  / ,4 iMk #0 
a:activee e  +  .  k !A an,     iu  0
 + k  n n ak    iMk

 s n ,n s i # & i &  g  &k 

a:hover-  a:link e+ a:visited e  s   


a:active  a:hover- e  s   

39

!  + Underline d  text-decoration e , 4 none  #i


 + Underline d    . o &  normal text e+  +
& s 5s    n  + d as   + e+ hover
e   ,n o u&

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


a:visited { color: red; text-decoration: none; }
a:hover { color: blue; }
p# .:
 u  0  i.

 u  0  

40

41

42

,n s i   s u# F #04;

43

 + e k  #0  ;

44

45

46

!   i background a  grtiF. HTML-e V4 bgcolor


   4 Background e e #    nt ee e  
!   HTML e * (Heading, Paragraph, Link, Table, Span etc.
e background color or image      A g background image
,  p#.    a ! nt    ! An
e horizontally, vertically repeat    A g ! background
 fixed position e  0    scroll   
All CSS Background Properties
p .
1.background

F.
 background properties-  e (    
4   

2.backgroundattachment

ei p . . F   sk +- e  /  / background


i fixed /     /  / sk 

3.background-color

background-color property   e * background


color . F 

4.background-image

background-image property   

e n gun i   

5.background-position

i B   s  s     #o   


background-position Property   

6.background-repeat

   g u*( i repeat    ,    # 


 F   . F   CSS-e background-repeat
p .  

1. background Property:
background p     background properties-  e (  
  4    background p  a(.   - backgroundcolorbackground-imagebackground-repeatbackground-attachment ,
 background-position. e#    , 4  # g s i background:#ff0000 url('smiley.gif');

47

! Advance u# F #04;

2. background-attachment Property:
background-attachment property . F   sk +- e  /  /
background i fixed /     /  / sk  !
48

b u  ui*(  sk   sk r  g u*( io  sk   /


 / sk O e0 ! & O  sk  nt  g u*( i 
s /  e  m background-attachment p    
k  k s e  g u*( i   Watermark i
Watermark   n &   (  04-

u (   &    0   -

  k .  o as i

, 4
scroll

F.
 g u*( io  sk   /  / sk  e (Ml .

fixed

 g u*( i Mk( / 

3. background-color Property:
background-color property   e * background color . F   
e *  g u*(  ] e *    i  ,   padding e+ border
an,4.k /  nt margin /     F background color e+ text color
e / background-color p .  /        k , g  

49

div {background-color:#b0c4de;}

body{color: black; background: aqua}


p{color:#foo}
p{color:#fofoff}
p{color:rgb(255,0,0)}
p{color:rgb(0%, 10%, 100%)}

4.background-image Property:
background-image property      e * gu*( i    

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


p { background-image: url(smallPic.jpg);
background-color:#00ff00 }
e M background e e A e+ Paragraph e ! A #0
 
50

url('URL')
none

i 'URL'
   gu*( i /   e (Ml

gradient background e  image  left-to-right    a/ 0


iu  ui*( sk  0 ! image  fixed as   0  
gu*( i  background-position property an  s    #  
background-position B     i .# e * top left corner- e / 

5. background-position Property:
   g u*( i B   s  s     #o   
background-position Property    e       
 - =#_. ,    o o (.        =#_./ps
as  #.  n - %%    ] i b u  ui*( 
e# u      as   !  %%     
as   nd =#_.  i ( 4em 50%)  Vertical
as  #.   o (.      !n,i m   .
_    , kt   as    F  o (.g  
(Top, Middle, Bottom) u m (vertical) as  #. , ! an  (Left,
Right, Center) !n,i as  #.  Body{background-position: top left}
e (   an, o  0  
Body{background-position: left top}
 , Body{background-position: % %}
, 4

F.

o (.
left top
left center
left bottom
right top
right center

# ! V4 e keyword    an , 4  "center"

51

right bottom
center top
center center
center bottom

  
x% y%

p/   horizontal as  e+ d  , 4 the vertical as 


#.  ! # e   B  #  a   %
(Ml    - 0% 0%

=#_.
xpos ypos

p/   horizontal as  e+ d  , 4 the vertical as 


#.  ei   k  an   e    ! #
e   B  #  a   %  ! % e+
positions et   

52

6. background-repeat Property:
   g u*( i repeat    ,    #   F  
. F   CSS-e background-repeat p .   backgroundrepeat p . m  g   , 4

F.

repeat

 g u*( i vertically e+ horizontally   e (Ml

repeat-x

 g u*( i V4 horizontally  

 g u*( i V4 vertically  


no-repeat  g u*( i   
repeat-y

&  ( M e i ei / vertically and horizontally  

i V4 horizontally  

53

i V4 vertically  

&  ( M i    -

k   B 0 i   .   ;

54

55

ee   e   ! ei&ee e * e exact  


#.    e   ! e e * A ! e *
s     e+ !o . F     # e * *  g
   _ top, bottom, left, e+ right p .    e * as  B
   nt k  position property    kF ei p .   
  positioning method- e u ,t  ,n,    /  &  F
positioning method !A  mr-

1.Static Positioning
2.Fixed Positioning
3. Relative Positioning
4. Absolute Positioning
u# F m ! &   ;
1.Static Positioning:
HTML e *g    static positioned  e static
positioned element (k*     k  s  
left o top p . #    static positioned p .g top, bottom,
left, e+ right p . d  p,   
2.Fixed Positioning:
e e *   # Mk(  #    b u  ui*(
 k as   e+ b u  # sk  4o  s (fixed) / 
normal flow  Fixed positioned elements g #i  #o  Fixed positioned
elements g an n e * overlap   

56

ui*(  sk  o (    some more text  0  sk  

3. Relative Positioning:
Relative position d  ei&ee e * e position an e * e
 k .        e anO#  j /  <B>, <I>
i # u #  e0  <p>  i u # , ! <B>, <I>  & il e0
<B> e kt position: relative       as   <p> e
 k, 4 ui*(  k  relatively positioned e * u # g

an n e * u #  4,  o,       Relatively positioned


e *g p i i  b  absolutely positioned e * n   
 .
57

a s   +(position: relative) u #  kt top o left p .  


  an n u #  as   /     &n  g    
 u #  !k,   ( e+ d  kt top o left p .
   A   5  u #  as   /  ? e kt d
a   -

# . u #  .  u #  & il ,   . u #  Vr

 .  u #   a o  

# . u #  .  u #  & il   ,  . u #  Vr

 .  u #   / top  left  /  e 0   a  0 


/ & u# F #04-

e0   u #  !k,   ( d  u #  Blue relative


element e  / top: 20px ul0  A e . u #  Red relative
element d  & il  d  u #   / top: 20px  /  0 
 a  0  #0   Red relative element k

e0 ! ! u# F #0 0   u #   p/ & il
d , d  & il 5  e+  u #   ,  (
58

Output:

59

!o A4;
h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}
Move Left - ekt left e n negative value    
Move Right - ekt left e n positive value    
Move Up -

ekt top e n negative value    

Move Down - ekt left e n positive value    


4. Absolute Positioning:
absolute position d  ei&ee e * e exact position (pixel
value) #.    ekt k as  #.   left, right, top o
bottom p .   Absolute positioned elements are removed
from the normal flow, and can overlap elements. -

h3 {
position: absolute;
top: 50px;
60

left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}
! u# :

Output:

61

  s:
mk,    u #   +    -

  ;
   b k M +, i i u # i i   ,
i t a/ b k  ,  + e+  k o  - i k
     

 ;
  (   k p/     s    e+ 
 i  / (      !    u #    an n
* /   

a s   +:
a s   e   u #  44   /   ! 
e+ #.  s  s    e (k*   p,    ei
 +   ee e   p .  
ee-- e h  Positioning Properties:
ee
p .

F.

h  
auto

1.bottom

e *   . e(  )


. F 

2.clip

  u #    a+ #57 
shape
  . F   Clip
auto
p .  

length
%

url

3.cursor

 F  u  . #0  

62

auto
crosshair
default
pointer
move
e-resize

ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

4.left

absolutely positioned o relatively


positioned- e kt   e *
  # 4k 6 A g # Vr
  . F   left p .
  

5.overflow

# e * * k  j


e * *    
_  . F  
overflow p .  

6.position

absolute
  p . e e * n  fixed
F positioning method    relative
  . F 
static
inherit

auto

length
%
auto
hidden
scroll
visible
inherit

auto
7.right

Sets the right margin edge for a length


positioned box
%
inherit
auto

8.top

Sets the top margin edge for a


positioned box

length
%
inherit

9.z-index

Sets the stack order of an


element

63

number
auto
inherit

1.CSS bottom Property:


absolutely positioned o relatively positioned e * kt bottom property  
  edge . F  # "position:static"    p .   iMk / 


h  iauto b u  bottom edge position . F e (Ml


length  i   e   px, cm e p  F t   gF 6
%
 i   e     p  F t   gF 6

Output:

64

2.Clip Property:
  u #    a+ #57    . F   Clip p .  
   i  i a g    4k #0    ei p .
  . F    e  k  Clip: sClip
e0  sClip e      dshape e e * k        - rect (top, right, bottom, left)
auto

  k+   e (Ml

   i(   #    auto   ,a/. Y  # clip 


 k p .    # "overflow:visible"  0    i k
   n &  i (        -

3.CSS cursor Property:


! ui*( ,   k    ,n  u  . !i #0A ,n
s  k  u  . e !i ,n     0 !  site
visit  0 o ,n s  k  u e !i ,n  =
   e  h   s n  ee d   m 65

p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }
  .      URL o  0   P{cursor: url(sajkdg.cur) url(sdjg.cur),text}

 . p .         cursor:


cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:
cursor:

auto
inherit
crosshair
default
help
move
pointer
progress
text
wait
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize

e u# F #04-

66

4.CSS left Property:


absolutely positioned o relatively positioned- e kt   e *   # 4k
6 A g # Vr   . F   left p .    # "position:static" 
 left p .   p,  g  .

h  iauto b u  left edge position . F e (Ml


length left edge   e   px, cm e p  F t   gF 6
%
left edge   e     p  F t   gF 6

67

5.Overflow Property:
# e * * k  j e * *     _ 
. F   overflow p .   an,    - top left, height o
width p .   . F5 k  j *       
. F   overflow p .   ei p . &      visible

4 * !q   n u #  !  . e (Ml  

hidden e      i  k #0   


* u #  .  !  &     i     
scroll
sk   p# . 
* .  u #  !  &   i  sk   #0 
auto

68

69

b u 
& u# F #0  A  ,  b
u  automatically overflow t
-

70

6.CSS position Property:


  p . e e * n  F positioning method     
. F  &  F positioning method !A  mrstatic

Elements renders in order, as they appear in the document flow.


This is default.

absolute

The element is positioned relative to its first positioned (not static)


ancestor element

fixed

The element is positioned relative to the browser window

relative

The element is positioned relative to its normal position, so


"left:20" adds 20 pixels to the element's LEFT position

71

7.CSS right Property:


absolutely positioned o relatively positioned- e kt   e * (  # 4k
6 A g # Vr   . F   left p .    # "position:static" 
 right p .   p,  g  .

h  iauto b u  right edge position . F e (Ml


length right edge   e   px, cm e p  F t   gF 6
%
right edge   e     p  F t   gF 6

72

8.CSS top Property:


absolutely positioned o relatively positioned- e kt   e * u #()
4k 6 A g # Vr   . F   left p .    #
"position:static"   top p .   p,  g  .

h  iauto b u  top edge position . F e (Ml


length top edge   e   px, cm e p  F t   gF 6
%
top edge   e     p  F t   gF 6

73

9.Z-index Property:
! #0A position: absolute e  / left o top p .   ,n
u #  o,        ,n u #  o,      
  !6 !    #0    #.     Z-index
p .   An element with greater stack order is always in front of an
element with a lower stack order. -

74

p# .;

e0  three (,  z-index an  (,  &   e
u #0   z-index only works on positioned elements
(position:absolute, position:relative, or position:fixed).
z-index p . di F       auto

Sets the stack order equal to its parents. This is default


75

number Sets the stack order of the element. Negative numbers are allowed

Output:

Note: If two positioned elements overlap, without a z-index specified, the element
positioned last in the HTML code will be shown on top.

z-index  !o A4 / e  ! #0            e *  u #0 ,
 ee    e   ! nt    ee e p
e *  priority #  /  # d overlapping CSS
positioned elements / ,     priority    !6 u #0 
Priority .   ! z-index value   /    z-index value
    priority  

76

h4{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
background-color: #336699;
}

p {
position: relative;
z-index: 1;
background-color: #FFCCCC;
}
p# .:

CSS Horizontal Align:


CSS-e g p .     e * horizontally as 
   !u sn   n b e * (<p>, <div>,<h1>)
horizontally align    
b e *g  e i*(  left e+ right margin- e   "auto"
  e M e * as  *  

77

u

u u# F e i*(   p,  g  # ! width 100% 


#
absolute positioning   o ! e * as  B   
-

78

u

float property   o ! e * as  B   
-

79

u
u !u4  i 

80

81

ee e kt p b  , u #  e k    


ei k !A A4 p . ee- e e p . o     k (
 a,   ei k ,n p . .   a   
u #  &   (.   i(* = n k (  j 04 # 
( i o  !u n "box model" 04i grtiF. "box model" ! e k 
HTML u #  _ /  k (  u # g  1.margins 2.borders 3.padding 4. contents
k (  6B m #0   ;

Margin - Margin   ei&ee e * e border e &   

a+   e * &    a+   j  The margin clears an area


around an element (outside the border). The margin does not have a
background color, and is completely transparent.

Border - padding e+ content- e &    a+ i  (.  (. 

 gu*(   d  p,  

Padding (.  e+ *  j M q s i  padding padding (. 

 gu*(   d  p,  

82

Content 0  k o i / 


  * n Mk(   e . F  ! ee- e   F width
and height p .    /  nt 4 e . F  padding, border and
margin    
Z k * e  n (   #04;
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
   #0  ;
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
& st p 6    r;
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
e u# F #04;

83

ee-- e h  Margin Properties:


ee
p .
margin

F.
 margin property  e property-   !  
margin shorthand property ("margin")   

margin-bottom e * bottom margin- e n    


margin-left

e * left margin - e n    

margin-right

e * right margin - e n    

margin-top

e * top margin - e n    

   ,  p .g m ! &   ;


1.Margin - Shorthand property
 margin property  e property-   !   margin shorthand
property ("margin")   margin p . top>right>bottom>left ei

k  &

margin property &  , 4  6B

margin:25px 50px 75px 100px;

s   (  & ;


84

o
o
o
o

top margin is 25px


right margin is 50px
bottom margin is 75px
left margin is 100px

(  ;

  margin property e , 4 . F   #        #


    ;
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[  #     A]
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

e u# F #04;

85

! u# F #04;

86

 (+ e  Margin e Value    


p {margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}

ee Margin: margin-(direction):


e ee  (+: padding-(direction) e 
p { margin-left: 5px; border: 1px solid black; }
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; }
margin property         ;
auto

b u  i  .    e b u  u ,. 

length px, pt, em e fixed margin     


e *  k    . p  
%

2. Border Property:
ei&ee e * e &    (.  #0    ee (.  e
  m4,
.  customize (style, color)  

87

ee-- e h  Border Properties::


ee
p .
1.border

F.
border shorthand property ("border":)  border
properties-  e (     p 

2.border-bottom

border-bottom shorthand property(border-bottom:)


 bottom border properties-  e (  
  p 

3.border-bottomcolor

border-bottom-color property   e * bottom


border- e   . F 

4.border-bottomstyle

Sets the style of the bottom border

5.border-bottomwidth

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  e (     p 

8.border-left-color Sets the color of the left border


9.border-left-style Sets the style of the left border
10.border-leftwidth

Sets the width of the left border

11.border-right

Sets all the right border properties in one declaration

12.border-rightcolor

Sets the color of the right border

13.border-rightstyle

Sets the style of the right border

14.border-rightwidth

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

88

1.border property:
Border - Shorthand property
border shorthand property ("border":)  border properties-  e
(     p  (   k   border-width>borderstyle>border-color   , 4  # g s i

2.border-bottom property:
border-bottom shorthand property(border-bottom:)  bottom border
properties-  e (     p  (   k  
border-bottom-width>border-bottom-style> border-bottom-color.  , 4
 # g s i

89

3.border-bottom-color:
border-bottom-color property   e * bottom border- e   . F


4.border-bottom-style property:
border-bottom-style property   e * (.  bottom a+  s i . F


90

border-bottom-style property         ;


nonehiddendotteddashedsoliddoublegrooveridgeinsetout
setinherit

5.border-bottom-width property:
border-bottom-width property   e * (.  bottom a+  p s
. F 

Always declare the border-style property before the border-bottom-width


property

Property Values
Value
thin
medium
thick
length

Description
Specifies a thin bottom border
Specifies a medium bottom border. This is default
Specifies a thick bottom border
Allows you to define the thickness of the bottom border

6.border-color property:
91

border-color property    (.  e . F   e   HTML e


h  e     d !n   "border-color" property
e,       , e  / "border-style" property    , 
p/ (k    You can also set the border color to "transparent"
Specifies that the border color should be transparent. This is default.

  e * border-width & #i    ;

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

92

7.border-left property:
border-left shorthand property  left border properties  e
(     p  (   k   border-leftwidthborder-left-styleborder-left-color. It does not matter if one of
the values above are missing, e.g. border-left:solid #ff0000; is allowed.

8.border-left-color property:
border-left-color property sets the color of an element's left border.
transparent :Specifies that the border color should be transparent. This is
default

93

9.border-left-style property:
The border-left-style property sets the style of an element's left border.

border-bottom-style property          border-leftstyle property-o i        
10.border-left-width property:
e   border-bottom-width property e  i

11.border-right property:
e   border-left property- e  i
94

12.border-right-color property:
e   border-left-color property- e  i
13.border-right-style property:

e   border-bottom-style property o border-left-style


property e 

14.border-right-width property:
e   border-bottom-width property o border-left-width
property e  i

15..border-style Properties:
15
(.  s i    border-style:- e   p    , 4 g  
    mr;
, 4
F.
none
  (.  #0   
hidden
The same as "none", except in border conflict resolution for table elements
dotted
e dotted border #0  
dashed
e dashed border #0  
solid
e solid border #0  
double
e double border #0  
groove
3D grooved border #0     iMk border-color- e u ,. 
ridge
3D ridged border #0     iMk border-color- e u ,. 
inset
3D inset border #0     iMk border-color- e u ,. 
outset
3D outset border #0     iMk border-color- e u ,. 
m u# F #0   ;

95

96

& # (.  n &        ;

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

97

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

& u# F #04;

Output:

16.border-top property:
The border-top shorthand property sets all the top border properties in one
declaration.k  ; border-top-width border-top-style border-topcolor.If one of the values above are missing, e.g. border-top:solid #ff0000,
the default value for the missing property will be inserted, if any.

98

17.border-top-color property:
e  border-left-color property: e  i
<style type="text/css">
p
{
border-style:solid;
border-top-color:#ff0000;
}
</style>

18.border-top-style property:
e  border-bottom-style property o border-left-style property-e

19.border-top-width property:
e   border-bottom-width property e 

20..border
border-- width property
property::
20
(.  p s . F  border-width property     "border-width"
property e,       , e  / "border-style" property  
 ,  p/ (k    e   di,  (M i   - <.k @. predefined values pre-defined value g  ;
, 4
thin
medium
thick
length

F.
thin border #. 
medium border #.  e default
thick border #. 
iO    #o   

99

  e * border-width & #i    ;

  kt border-style- e p 6 #04table { border-color: rgb( 100, 100, 255);
border-style: dashed; }

td { border-color: #FFBD32;
border-style: ridge; }

p { border-color: blue;
border-style: solid; }

100

3.CSS Padding:
Padding:
ee  (+    j  e * e border e+   content e
 a+ ee  (+    ! ei&ee e *
(paragraphs, tables i # ) e default  (+ .   
Padding e u background color e p,  A

 CSS Padding Properties


Property

Description

1.padding

padding shorthand property(padding:)  padding


properties  e (     4 

2.padding-bottom Sets the bottom padding of an element


3.padding-left

Sets the left padding of an element

4.padding-right

Sets the right padding of an element

5.padding-top

Sets the top padding of an element

 - CSS Padding Properties g  , 4     


length
%

px, pt, em e fixed padding     


e *  k    (+ p  

   ,  CSS Padding Properties g m F.   ;

1.padding shorthand property(padding:):


padding shorthand property(padding:)  padding properties  e
(     4  padding shorthand property &  , 4   
;

padding:10px 5px 15px 20px; [B k   ]


o top padding is 10px
o right padding is 5px
o bottom padding is 15px
o left padding is 20px

101

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

p {padding: 15px; border: 1px solid black; }


h5{padding: 0px; border: 1px solid red;}

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.

102

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.

ee  (+: padding-(direction):


p ei&ee e * e p5k &  ,n  (+ /   top,
right, bottom, e+ left  (+ direction attribute e   5/ 5/
 (+ #.    e direction ( - left) e #.  ang
a. / 
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
103

border: 1px solid red;


}

CSS Outlines:
An outline is a line that is drawn around elements, outside the border edge,
to make the element "stand out".The outline properties specifies the style,
color, and width of an outline. An outline is a line around an element. It is displayed
around the margin of the element.it is different from the border property.

ee-e h  Outline Properties:


p .
1.outline

F.
Sets all the outline properties in one
declaration

2.outline-color Sets the color of an outline

, 4

outline-color
outline-style
outline-width
color_name
hex_number
rgb_number
invert

3.outline-style Sets the style of an outline

4.outline-width Sets the width of an outline

none
dotted
dashed
solid
double
groove
ridge
inset
outset
thin
medium
thick

length
   ,  m e# F. #o  ;

104

1.CSS outline Property


An outline is a line that is drawn around elements (outside the borders) to
make the element "stand out". The outline shorthand property sets all the
outline properties in one declaration. The properties that can be set, are (in
order): outline-coloroutline-style outline-width. If one of the values
above are missing, e.g. "outline:solid #ff0000;", the default value for the
missing property will be inserted, if any.

2.CSS outline-color Property


The outline-color property specifies the color of an outline .Always declare
the outline-style property before the outline-color property.
color !u i   . F 
    p# .  e ~   gu*(   Ag i !u i #0
invert
  e (Ml
This example demonstrates how to set the color of an outline.

105

3.CSS outline-style Property


The outline-style property specifies the style of an outline.

Property Values
Value
none
dotted
dashed
solid
double
groove
ridge
inset
outset

Description
Specifies no outline
Specifies a dotted outline
Specifies a dashed outline
Specifies a solid outline
Specifies a double outliner
Specifies a 3D grooved outline. The effect depends on the outline-color
value
Specifies a 3D ridged outline. The effect depends on the outline-color value
Specifies a 3D inset outline. The effect depends on the outline-color value
Specifies a 3D outset outline. The effect depends on the outline-color value

106

4.CSS outline-width Property


The outline-width specifies the width of an outline. Always declare the
outline-style property before the outline-width property.

Property Values
Value
thin
medium
thick
length

Description
Specifies a thin outline
Specifies a medium outline. This is default
Specifies a thick outline
Allows you to define the thickness of the outline

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

107

ee- e      ,  !a.F     ! e0   i


! & Table Borders:
  (.  s i F.  border property     -

108

 k r e0  (  (.  !A,  F table, th, e+ td e * separate


border !A e (.  #0  border-collapse property   r

Collapse Borders:

109

Table Width and Height:


  Width o height F.  &   (+ r-

110

Table Text Alignment:


The text in a table is aligned with the text-align and vertical-align
properties. The text-align property sets the horizontal alignment, like left,
right, or center:

The vertical-align property sets the vertical alignment, like top, bottom, or
middle:

111

Table Padding:
To control the space between the border and content in a table, use the
padding property on td and th elements:

112

Table Color:
The example below specifies the color of the borders, and the text and
background color of th elements:

113

This example demonstrates how to create a fancy table.

114

115

116

Output:

117

This example demonstrates how to position the table caption.

118

119

HTML-e align attribute- e  i     p .  d  A  e


   an   as      A e &   kk /  
#0   magazines  + #t ,n !  A &   k e
as    p . &        / - left, right, none, inherit.
eg    u #  as  #.   !o  &  0 4k
g4With CSS float, an element can be pushed to the left or right, allowing
other elements to wrap around it. Float is very often used for images, but it
is also useful when working with layouts. Elements are floated horizontally,
this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this
means all the way to the left or right of the containing element. The
elements after the floating element will flow around it. The elements before
the floating element will not be affected. If an image is floated to the right,
a following text flows around it, to the left:

120

Output:

#04 i k (   as  A

ee-- e h  Float Propertiesee


p .

F.

1.clear

Clear p .   #. 


   i u #   
121

, 4
left
right
both

an   u #  float 
   
2.float

none

left
Specifies whether or not a box should
right
float
none

1.CSS clear Property:


Clear p .   #.     i u #    an  
u #  float      e  b  , u #  kti
     e    left, right, none o both h   
P{clear: both}  g M     i      
P{clear: left}         
P{clear: right}  (        
P{clear: none} Default. Allows floating elements on both sides

122

Turning off Float - Using Clear


Elements after the floating element will flow around it. To avoid this, use the clear
property. The clear property specifies which sides of an element other floating elements
are not allowed.Add a text line into the image gallery, using the clear property:

123

!u4;

124

2.CSS float Property:


ee Float attribute e    04  k  A &  
Wrapping    ! iO  A     (  Float   
Absolutely positioned elements ignores the float property!& #  #  Property Values
Value
left
right
none

Description
The element floats to the left
The element floats the right
The element is not floated, and will be displayed just where it occurs in the
text. This is default

125

p# .:

126

float property    image gallery =;


! #  g floating element-   s      o  as  
# 0  . p s /  & u# F k r e+ b u  A  g  #04-

127

!u4;

128

Floating Multiple Images:


# ! a g A  float  & i  e  & ! as 
 kt ! ee Clear attribute e       &
#  ! ( # float A

p# .:

Let the first letter of a paragraph float to the left and style the letter.

129

Use float with a list of hyperlinks to create a horizontal menu.


Needed CSS Code:

130

Needed HTML Code:

Output:

131

132

ee  k  ee e h#*(  ,n   k


!A,e # ei&ee  e *  k    e+  k  
  iO s i +   ee  k e    04 6,  e+
sO   /   s i  <BODY>a+ h uYi  /
4  k  6     Class o ID    k  
  !6 A4  .   ;
<.ei&ee e * @.eTu ei d m. ! 
Z.r   r ;
r   p . o     #  e /    (   b
 (   b Vr  *(   { # o  a  } # e  j
e  (   /       # 5/ /   
(   b !6 a/. Y { e !6  A4 /   i  k ! 
html u #  p . .  &    k    
 e (   b  j   #  p 6  ]  k
kt  & u# F h1   k , ! {} e  j r  4 {}
(   b

h4{background-color:white;font-size:12px;}
p{color:red;}
e0  h4, p e O  k,h4 e d  ei&ee  <h4></h4>
e ,  !A   k      h4 e *  k  h4 e
 *( b  0  / Vr A e+ p e !6 0  *( b 
133

 a A ei4k (k   b *( b  , 4k O


(k   background-color O p  . e+ white O e , 4 !
4  a/. Y h4 / Vr  e *( b  0   a A ei4k
r  r  u  ( d r !A h4 e+ p & ,n  k e
  e+ e ,     #  :

<.iu, .  k;


iu, .  k ei&ee  p e *   k 
&  (  ei&ee e * e +  #
{color:red;}
.{color:red;}

a padding, margin e0  0  # *{


margin:0;
padding:0;
}
ei    ap  ,e b u  u &     i a e
 a 

@.!i(  k;


HTML element- e n e s i . F  CSS !  ! 
s selector   s 6 #A  "id" e+ "class"   & ID
 k e e * s i #  h  ID  k HTML
e * id attribute    e+ e e #- e   (M i 
 e ID    m  # Vr     e Firefox.- e   

134

Z.ee k   k;


ee e   ei&ee e * e a+0 s i #   i  a

group of elements- e style # ee class selector     class


selector    HTML elements- e n  g particular style . F 
  same class- e   class selector    HTML- e class attribute e+
e e ((".")- e   (M i   Class    04   

   ee  ( e a+  . (extension)   ! ei


. a+  a7i ei&ee  6 e Class e       
Class Selector e    6B;
Selector/HTML Element . Class Name {Declaration}

class   +0 # Vr     e i*  ekp   e 



135

!   ei&ee e * e  / ee class   


 r ! <p>  6    s i #A e+ ee class
   an e s i #>  #A M !6 default s i
 ! #>  0     

**! #   k e / .  & i   k  
A g V4 Class         ;
. first{ color: blue; }

. i  k:

p, a O e0   i  k p  k ei&ee   <p> e *


  k  e+ e#  g u*( +   # ! a  k
ei&ee   +   k  + 0  #

.((*  k;


e  k  j !  k /  d   k   p . .
 & i ((*  k     ;
li a {
text-decoration: none;
136

color:red;
}
ei&ee M i

r ! li e * e a s a e *   6.  & O 0


ee r  0  u ei  ( p,  !  ei&ee
 V4 li e a s a  6  e  (   kt  k
d   j V4 e s / ,  ,    M4 s /  

.e(i*  k;


h2+h3{color:lime;}
h2+h3{margin-top: -5mm}/*h2 o h3 e  j M q s  */
math+p{text-indent: 0}/*p e indent =   */
r ! <h3> e *  6.  & O,V4 t ] <h3>  
<h2> e i(  !Au  ( d  !  ei&ee 
(+ Z e + lime  #  (+ @ e  / 
*<h2> e # an   e * /  e+ e <h3> /    ei
<h3> e + lime    e <h2> e i(  i
*h2+h3 #0 e      d i + lime ,V4 <h3> .

137

.direct children  k;


div#menu> ul { border: 1px solid black; }
ei r  # u ei&ee  p 6    ul e * e
u e (.    Children  0  u (.  ! #o e
! ul e  !A   Children  0   ul e  !A 
menu !i( direct children 
! u# F; div ul>li>p
e a/.  div e a  ul e+   & il li !  li e (*(*  p

.eTu  k;


V4 HTML Element # , i / ,n u #  eTu  k
      eTu & ,   k      ;
1.[att]    u #  ei eTu   # /  i u #   k
 6F  , ekt eTu    i     ;
H1[title] { color : red;}
ei (  #  j  O , # H1 u #   / title eTu
/   (+ e 
2.[att=val]  0   u #  ei eTu o        0 
 k  h  ;
Span[class=example] { color : red;}
ei (  #  j  O , #   span u #  Class
eTu   example     e 

138

3.[att~=val]  ekt e  eTu o     s   ,n, 


ul0    u #   eTu o      g  kt
ei (  p   ;
SPAN[hello=Dhaka] [goodbuy=Kushtia] {color: red;}
ei (  #  j  O ,  SPAN u #  e 
 # hello eTu   Dhaka o goodbuy eTu   Kushtia 
ekt d .i iF  
4.[att|=val]  e0  eTu    # /    u # 
eTu   a+  u #  kt ei (   p  
;
*[LANG|=en] {color : red}
e    j  O   u #  LANG eTu   en
g  e 
img[src="/css selector.jpg"] {
border: 5px solid #000000;
}
!  ei&ee M i # &  i /    u  (
# <img> e * eTu  k  e (.  k e+ (.  +
   #
<img src="/css selector.jpg" width="510" height="205">

Style HTML Elements With Specific Attributes. It is possible to style


HTML elements that have specific attributes, not just class and id.
Attribute Selector
The example below styles all elements with a title attribute:

139

Attribute and Value Selector


The example below styles all elements with title="iceiuacademy":

140

Attribute and Value Selector - Multiple Values


The example below styles all elements with a title attribute that contains a
specified value. This works even if the attribute has space separated values:

141

The example below styles all elements with a lang attribute that contains a
specified value. This works even if the attribute has hyphen ( - ) separated
values:

Styling Forms
The attribute selectors are particularly useful for styling forms without
class or ID:

142

.gr+  k;


s i  h  (  F   s i   k e+ Y+k n
#. i e grr ul0    # e  e * ei s i
 &  0 gr+  k   r ! & O !  
 (+ e+  + e + ei  0 &    0  
h1,h2,h3,h4,a{color:red;}
u k  ( !   ,   0 <style type=text/css>
H1{color:red;}
H2{color:red;}
H3{color:red;}
H4{color:red;}
a{color:red;}
</style>

(  i gr  ;


<style type=text/css>
H1{color : red}
H1{font-family : Arial, Arial black}
H1{font-size : 16pt}
143

</style>
e0 h1  k n  (   # A e  (  
gr  p     e, <style type=text/css>
H1{color : red; font-family : Arial, Arial black; font-size : 16pt }
</style>
;d;  k gr 6B   ki 5/    (,) # e+
(    gr 6B  5/     (;) #
r !   e (, (div)e !i( O menu (id="menu") !
ei (, ,   + e+ (+ e +  & O 0 e, 
#menu a, #menu h1,#menu h2, #menu h3{
color:red;
}
! # #menu a,h1,h2... e,   0   ,4 
10.Nesting Selectors:
It is possible to apply a style for a selector within a selector. In the example
below, one style is specified for all p elements, and a separate style is
specified for p elements nested within the "marked" class:

144

eeee- e h  Pseudo Classes o Elements--

Selector
1):link
2):visited
3):active
4):hover
5):focus
6):first-letter

Example
a:link
a:visited
a:active
a:hover
input:focus
p:firstletter

Example description
Selects all unvisited links
Selects all visited links
Selects the active link
Selects links on mouse over
Selects the input element which has focus
Selects the first letter of every <p> element
145

7):first-line

p:first-line Selects the first line of every <p> element

8):first-child

p:first-child

9):before

p:before

10):after

p:after

11):lang(language) p:lang(it)

Selects every <p> elements that is the first child of its


parent
Insert content before every <p> element
Insert content after every <p> element
Selects every <p> element with a lang attribute value
starting with "it"

CSS Pseudo-classes
CSS pseudo-classes     k s iMk #o  Class e
i Pseudo-Class    (k* ,n  k . F   
(k* i e u #  s i   n u( e * o u(
k       
CSS pseudo class- e   F 6BSelector: pseudo class {property: value;}
ee k  pseudo class- e  /      Selector. Class: pseudo class {property: value;}
a. red: visited {color: #001122}

 u( k   m ! &   -

146

u( k      +  ,n,  p# .    -

a:hover-  a7i a:link- e   0 , eA g a:visited  . 


 e+ a:active  a7i a:hover- e   0  eA g a:active
 .  

lang Pseudo-class::
,n , a  n  a A4  . F  lang pseudo-class   
 & u# F lang class    q element- e    &h #o
A lang="no"- e   

147

eeee- e h  Pseudo Classes o Elements e F. m #o   -

1.CSS :link Selector:


The :link selector is used to select unvisited links.The :link selector does not
style links you have already visit.

148

2.CSS visited Selector:


The :visited selector is used to select visited links.

3.CSS :active Selector:


The :active selector is used to select and style the active link.A link becomes
active when you click on it.

4.CSS :hover Selector:


The :hover selector is used to select elements when you mouse over them.
Tip: The :hover selector can be used on all elements, not only on links.
Note: :hover MUST come after :link and :visited (if they are present) in the
CSS definition, in order to be effective!

5.CSS :focus Selector:


The :focus selector is used to select the element that has focus.

149

Tip: The :focus selector is allowed on elements that accept keyboard events
or other user inputs

.<p>Click inside the text fields to see a yellow background:</p>

6.CSS :first-letter Selector:


The :first-letter selector is used to add a style to the first letter of the
specified selector.

Note: The following properties can be used with :first-letter:

font properties
color properties
background properties
margin properties
padding properties
border properties
150

text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear

7.CSS :first-line Selector:


The :first-line selector is used to add a style to the first line of the specified selector.

Note: The following properties can be used with :first-line:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

8.CSS :first-child Selector:


The :first-child selector is used to select the specified selector, only if it is the first child
of its parent.

  e * p/ u #  (p/ & il) e p . .  ei k 


    -

151

e M p/   g M k e  


First Child Pseudo Class- e  u# F #04-

152

Output:

Output:

153

Output:

9.CSS :before Selector:


Example
Insert content before every <p> element:
p:before
{
content:"Read this: ";
}
Try it yourself online a dekte hobe

Definition and Usage


The :before selector inserts content before the selected element(s).
Use the content property to specify the content to insert.
154

Try it Yourself - Examples


Example
Insert content before every <p> element, and style the inserted content:
p:before
{
content:"Read this -";
background-color:yellow;
color:red;
font-weight:bold;
}
Try it yourself  online a dekte hobe

10.CSS :after Selector:


The :after selector inserts content after the selected element(s).
Use the content property to specify the content to insert.

155

Output:

11.CSS :lang Selector:


The :lang() selector is used to select elements with the lang attribute starting with a
specified value.
Note: The value has to be a whole word, either alone, like lang="en", or followed by a
hyphen( - ), like lang="en-us".

OUTPUT:

156

CSS Pseudo-elements
CSS pseudo-elements-   A4  k special effects #o  
CSS pseudo-elements- e   F 6B  Selector: pseudo-element {property: value;}
ee class- pseudo-elements- e  /      Selector.class: pseudo-element {property: value;}
First-line Pseudo Element:
First-line Pseudo Element e       g M p/ i . 
s i #0   P:first-line{font-style:bold}
e M p   g M p/ i  l #0 

e M p   g M p/ i   #0 


first-line pseudo-element V4 t block-level elements- e kt   
 
& p .g first-line pseudo-element- e     

font properties
color properties
background properties
word-spacing
letter-spacing
157

text-decoration
vertical-align
text-transform
line-height
clear

First-letter Pseudo Element:


First-letter Pseudo Element e       g M p/ ak . 
s i #0   P:first-letter{font-weight:bold}
e M p   g M p/ ak  l #0 
First-letter Pseudo Element e kt   6 = >g  ; font
properties, color properties, background properties, text-transform, lineheight.

u

first-letter pseudo-element V4 t block-level elements- e kt  


  
.

& p .g first-letter pseudo-element- e     158

font properties
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

Pseudo-elements o CSS Class-- e n;

e M   g M p/ F. #0  0  class="article" / 


e  Pseudo-elements

 0 g small-caps- e #0 O
159

CSS - The :before Pseudo-element


The ":before" pseudo-element can be used to insert some content before the content of an
element.
The following example inserts an image before each <h1> element:

CSS - The :after Pseudo-element


The ":after" pseudo-element can be used to insert some content after the content of an
element.
The following example inserts an image after each <h1> element:

160

161

162

CSS Display property:


  u #   ,  (k* p# .   #.   display p .
  e . F  i u #  ,n b,  s + i i (An inline
element only takes up as much width as necessary, and does not force line breaks.
Examples <span>, <a>)u #   h    ei p . 

u #  o (  kt h    e    m   


h   Blocke   #  ] u #  e b   , a/. Y 
b  , u #   i !6  A i b = 
Inlineu #  i i u #   p# .  a/. Y e !6  A
i b =  
List-item] u #     s !i  p# .  e 
 s  6 
Marker ( ** !6   e  .   h  e
 :before o :after u( e *  / h   
Nonee   #o    k =   e+ sk - e A4 #0  
 oi u #  & il    # no   k =  
Run-in o compact e  /  h O   u ,t  b +
i i k = 
Tabletable, inline-table, table-row-group, table-column, table-columngroup, table-header-group, table-footer-group, table-row, table-cell e+
table-caption   u #  html   u #   6F 
& u# F display p .   #0   -

163

A4  !    content, Hide   0  p      #0 


p     none value e     content Hide   0
  -

!u4;

164

The following example displays list items as inline elements:

!u4;

Visibility Property:
  u #  b u  #0  (visible),   #0    (hidden)  . F
  visibility p .   e d     -visible    
] u #  #57  , ! hidden      #0   
visibility:hidden     ] u #  #0  6 o   n   F
6  d !A  M q #0   a/. Y  !u u p,  /  
display :none    i u #  #0    e+  s  #0 
 an u #  display p .  / visibility p .  /. e0 i &
u# F e #0   -

165

!u4;

166

CSS Navigation Bar

167

Navigation Bar   g  s > (list of links) p o


 i n Navigation Bar an grtiF. e a ee   
sn Navigation Bar =   
Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Try it yourself  online a dekte hohe
Now let's remove the bullets and the margins and padding from the list:

Example
ul
{
list-style-type:none;
margin:0;
padding:0;
}
Try it yourself  online a dekte hohe
Example explained:

list-style-type:none - Removes the bullets. A navigation bar does not need list
markers
Setting margins and padding to 0 to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal
navigation bars.

Vertical Navigation Bar


To build a vertical navigation bar we only need to style the <a> elements, in addition to
the code above:

168

Example
a
{
display:block;
width:60px;
}
Try it yourself  online a dekte hohe
Example explained:

display:block - Displaying the links as block elements makes the whole link area
clickable (not just the text), and it allows us to specify the width
width:60px - Block elements take up the full width available by default. We want
to specify a 60 px width

Tip: Also take a look at our fully styled vertical navigation bar example.given below
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
169

background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</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>

170

Note: Always specify the width for <a> elements in a vertical navigation bar. If you omit
the width, IE6 can produce unexpected results.

Horizontal Navigation Bar


There are two ways to create a horizontal navigation bar. Using inline or floating list
items.
Both methods work fine, but if you want the links to be the same size, you have to use the
floating method.

Inline List Items


One way to build a horizontal navigation bar is to specify the <li> elements as inline, in
addition to the "standard" code above:

Example
li
{
display:inline;
}
Try it yourself  online a dekte hohe
Example explained:

display:inline; - By default, <li> elements are block elements. Here, we remove


the line breaks before and after each list item, to display them on one line

Tip: Also take a look at our fully styled horizontal navigation bar example. Online a
dekte hobe

Floating List Items


In the example above the links have different widths.
For all the links to have an equal width, float the <li> elements and specify a width for
the <a> elements:

171

Example
li
{
float:left;
}
a
{
display:block;
width:60px;
}
Try it yourself online
Example explained:

float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area
clickable (not just the text), and it allows us to specify the width
width:60px - Since block elements take up the full width available, they cannot
float next to each other. We specify the width of the links to 60px

e horizontal navigation bar- e u# F m #o  h ee  (-

172

h ei&ee  (-

============The End===========

173

You might also like