You are on page 1of 18

V Allow you to control the layout and look of your

page easily
V Styles define how to display HTML elements
V Style web pages written in a markup language
like HTML, XHTML etc.
V Allows the same markup page to be presented
in different styles for different rendering
methods(on-screen, in print etc.)
V Specifies a priority scheme to determine which
style rules apply if more than one rule matches
against a particular element
V The basic CSS syntax is made up of following
three parts:
× Selector
× Property
× Value
For ex:
V Three ways of inserting a style sheet:
À 3nline Style Sheet
À mbedded Style Sheet(3nternal Style Sheet)
À xternal Style Sheet
V Page Level CSS
V Site Level CSS
!  "         #   ! <LINK
REL=Dzstylesheet HREF="style.css">
V £eb Level CSS
¦  !     $          
      %         &' #
<LINK REL=Dzstylesheetdz HREF="">
£hat style will be used when there is more than one
style specified for an HTML element?
V All style will cascade into a new virtual style sheet
by the following rules, where no. 4 has highest
1. Browser default (lowest priority)
2. xternal Style Sheet
3. 3nternal Style Sheet
4. 3nline Style Sheet (highest priority)
V 3f some properties have been set for the same
selector in different style sheets, the values will be
inherited from the more specific style sheet.
V For ex:, an external style sheet has these properties
for the h3 selector:
V And an internal style sheet has these properties for
h3 selector:

V 3f the page with the internal style sheet also links to

the external style sheet the properties for h3
selector will be:

V The color is inherited from the external style

sheet and the text-alignment and the font-
size is replaced by the internal style sheet.
V Ô  fl at r rty a ls y t tr i r t siti  a
lt rlativ t t  t r lt  t  a .
V W  y s t  fl at r rty, t r lts ill sily ra ar 
t  lt y ali t  fl at t .
V r xal:

<div style="width:300px;"> <h1 style="float:left;margin-right:10px;">CSS

float</h1> <p>If your browser supports the CSS float Property, this text
will be flowing around the heading. If this does not seem to work, it could
be a browser compatibility thing...</p> </div>
· 3t is directly responsible for the layout of the website.
· 3t determines how a particular element is positioned on the
· 3f the positioning property is not used properly, the websiteǯs
layout can become rather messy and crippled.

¦ Gelative Positioning
¦ Absolute Positioning
¦ Fixed Positioning
¦ Static Positioning
· defined by the top, bottom, left and right CSS properties
· determine how much an element will shift in relation to its Dznaturaldz position
· these four additional properties have default value of 0.
· they can accept both positive and negative values.
<p>this is a paragraph having no style</p>
<p style="position: relative; left: 35px;">this is a paragraph having relative
<p style="position: relative; right: 0px;">Ôhis is a paragraph having relative
· lt ill  siti a sltly
sl tly
· it ill t affct t r lts, a it ill  siti accri t its
ctaii lck
· if a slt
sl t sitii is s,
s, t r tt, lft r ri t, a it a i t
s l  s as ll.
 T is is a arara avi  styl

 styl "siti: a slt; lft: 35x; t: 50x; it : 150x; i t: 250x;" T is
is a arara avi a slt sitii
xyza c

/ y
· a subcategory of Absolute Positioning
· if an element has this type of position assigned, its viewport is the same as its
containing block.
· on the computer screen, an element using a fixed CSS positioning will not move
if a website is scrolled.
Media Type Description
all For all media type device.
aural For speech synthesizers.
braille For Braille tactile feedback devices.
embossed For paed Braille printers.
handheld For handheld devices.
print For printed versions and print preview on
the screen.
projection For projected presentations such as
projectors and transparencies.
screen Computer screens.
tty Media usin a fixed-pitch character rid,
such as teletypes, terminals, or portable
devices with limited display capabilities.
Tv Television-type devices.
There are two methods for creating separate styles
depending on the media type:
· Use the @media rule. For example:
@media print
p{font-family: Georgia, times, serif}

· Use the media attribute when linking to an external style

sheet. For example:

L3 rel Dzstylesheetdz type Dztext/cssdz media Dzscreendz
href Dz/css/screen_version.cssdz
Advantages and Disadvantages
× CSS saves times
R     $

× Pages load faster
× asy maintenance
R     $    
× Superior styles to HTML

× Browser compatibility
V Ô  if statt i  is lac it i a Ô ct
V 3t is s t itify t  rsr vrsi fr 3trt Exlrr, a
la varis arts f t  styl s t as  t at aratr.
V Ô  cstrcts ly rks it 3E cas t  rsr 3E is t 
ly  t at itrrts Ô cts ista f iri
t  tirly. Ot r rsrs,  t  t r a,  t itrrt
cts at all.
V Ô  tati is siilar t staar Dzifdz statt, as
strat i t  flli xal:
<!Ȅ[if 3t 3E7]>
Ô is is 3trt Exlrr