You are on page 1of 26

bas|cs CSS (CASCADING S1LL SnLL1) 1utor|a|s

An lnLroducLlon Lo Cascadlng sLyle sheeL


LvoluLlon of Cascadlng sLyle sheeL
1ypes of Cascadlng SLyle SheeL
Cascadlng SLyle SheeL lu and Class
Lxamples of sLyllng
Summary


AN IN1kCDUC1ICN 1C CASCADING S1LL SnLL1

Cascadlng sLyle sheeL (CSS) ls a language used Lo descrlbe Lhe presenLaLlon
crlLerla of mark up language documenLs CSS ls recenL addlLlon Lo hLml
CSS are Lhe way of conLrolllng Lhe way Lhe browser dlsplays Lhe page Lhe mosL
common funcLlon of CSS ls Lo sLyle Lhe web pages wrlLLen ln PLml
and xhLml lL conslsLs Lhe baslc rules whlch Lells Lhe browser how Lo represenL Lhe
documenL prlmarlly CSS was deslgned Lo separaLe Lhe documenL
conLenL from documenL presenLaLlon uslng layouLs fonL colors CSS wlll be a
welcome feaLure LhaL wlll save loL of Llme spend on repeLlLlve sLyllng
of documenL as lL deflned seL of rules CSS allows same mark up page Lo be
presenLed ln dlfferenL sLyles lf Lhere wlll be more Lhan one rules Lo
apply Lo a parLlcular elemenL Lhen CSS speclfles Lhe prlorlLy schemes Lo deLermlne
whlch parLlcular rule ls applled CSS speclflcaLlons are malnLalned
by world wlde web consorLlum (w3c) 1he popularlLy of CSS deslgn Lool lncreased
day by day as a flrsL Lool Lo deslgn web slLe rlor Lo CSS
P1ML mark up conLalns presenLaLlonal aLLrlbuLes used for sLyllng llke fonL colors
allgnmenL borders eLc prlor CSS Loo much addlng of sLyle
aLLrlbuLes Lo hLml documenL makes documenL complex Lherefore CSS ls
developed Lo over come Lhe problem of hLml formaLLlng
Accordlng Lo CSS Lhere are Lhree ways of addlng sLyle Lo Lhe markup documenL
lnllne sheeLs
Lmbedded sLyle sheeL
Llnk sLyle sheeL
8y uslng Lhese sLyle sheeLs CSS deflnes how Lhe hLml elemenLs are Lo be
dlsplayed sLyles are normally saved ln exLernal css flles LxLernal flles
enables you Lo change Lhe appearance and layouL of all Lhe pages ln a web slLe by
edlLlng slngle llne
Cne of Lhe goal of CSS ls Lo allow users conLrol over presenLaLlon someone who
flnd dlfflculL Lo read exlsLlng LexL ln red color can change Lhe color of
LexL as per hls/her requlremenL user can vlew Lhe webslLe ln lLs browsers defaulL
seLLlng

LVCLU1ICN CI CASCADING S1LL SnLL1
1he baslc purpose of cascadlng sLyle sheeL (CSS) ls Lo separaLe Lhe conLenL of web
documenL( whlch are wrlLLen ln any mark up language )from lLs
presenLaLlon (LhaL ls wrlLLen uslng css) Cascadlng SLyle SheeLs were developed
as a means for creaLlng a conslsLenL approach Lo provldlng sLyle

lnformaLlon for web documenLs Slnce Lhe developmenL of SCML (SLandard
Cenerallzed Markup Language) sLyle sheeLs were used
SLyle SheeLs sLarL developlng from Lhe 1970S however laLer Cascadlng SLyle
SheeLs were creaLed wlLh a purpose of drawlng a dlsLlncL llne beLween
Lhe conLenL of Lhe documenL and Lhe presenLaLlon of Lhe documenL Cascadlng
SLyle SheeLs became more popular as Lhe P1ML grew along Lhe way
CSS evolved ln Lhe llghLs of experL web developers who lncorporaLed Lhelr
demandlng feaLures ln lL w3c lnLroduced nlne cascadlng sLyle sheeLs ouL
of whlch Lwo became Lhe foundaLlon cascadlng sLyle sheeLs Lhose Lwo sLyle
sheeLs were CPSS (cascadlng hLml sLyle sheeL) and sLream based sLyle
sheeL proposal (SS) a language has resemblance Lo Lodays CSS CSS are currenLly
supporLed by neLscape navlgaLor and MlcrosofL wlndow30
and above

LNLII1S CI CASCADING S1LL SnLL1
CSS glves greaL sLyle Lo your web pages LhaL are wrlLLen ln any markup language
1he maln purpose of CSS ls Lo deflne Lhe presenLaLlon of hLml documenL
CSS glves you level of conLrol over varlous presenLaLlon characLerlsLlcs of Lhe
documenL
CSS lmprove conLenL accesslblllLy and provlde beLLer flexlblllLy
lL allows Lo presenL P1ML and xP1ML documenLs ln more Lhan one sLyle
Cne of Lhe goal of CSS ls Lo allow users conLrol over presenLaLlon
Lnable mulLlple page formaLLlng and reduce complexlLy

lasL loadlng of web pages
CSSbased web pages wlll speed up Lhe loadlng of your pages conslderably
because Lhe sLyles are all conLalned ln one sLyle sheeL
Small flle slze
1he page deslgn wlLh CSS are small ln slze as compared Lo Lhe P1ML
pages because mosLly all sLyles are come ln one sLyle sheeL
CreaL AccesslblllLy
CSS provlde very good accesslblllLy even lL provlde volce accesslblllLy of
P1ML and xP1ML documenLs
Save Llme
CSS sLores snlppeLs ln speclal flle from where Lhey can be easlly access Lo
deslgn Lhe web pages no need Lo deslgn separaLe
Lables Lhls saves Lhe Llme of developer
8educe complexlLy
CSS makes you Lo geL rld of loL of exLra hLml codes Lherefore your slLe looks
good and cleaner Lhls makes lL easy Lo alLer Lhe
code lf you wanL Lo edlL lL
SeparaLe conLenL from presenLaLlon
An exLernal sLyle sheeL conLalns all Lhe sLyle LhaL you need Lo deslgn a web
slLe lf you need Lo do change ln your web slLe you [usL
use LhaL pre deflned sLyle sheeL save ln exLernal flle
S?n1Ax Cl CSS
CSS synLax has Lwo maln parLs one selecLor and one or Lwo declaraLlon Lhe
selecLor ls normally Lhe hLml documenL you wanL Lo sLyle
and declaraLlon ls conslsLs of a properLy and a value 1he properLy ls Lhe sLyle
aLLrlbuLe you wanL Lo change each properLy has a value
synLax
p color black fonL _slze13px
Lxp|anat|on
here p ls Lhe paragraph whlch ls a selecLor
color and fonL_ slze are Lhe properLles
black and 13px are Lhe values of properLles
CSS declaraLlons are always end wlLh semlcolons() and declaraLlon ls surrounded
wlLh curly braces()
CSS documenL conLalns commenL whlch are help ln Lhe explanaLlon of documenL
CSS commenLs sLarL wlLh /* and wlLh */
llke /* Lhls ls a CSS commenL*/CSS has Lhree Lypes sLyle sheeLs whlch are used Lo
lnserL CSS Lo Lhe hLml documenL
above synLex ls malnly used ln exLernal and lnLernal sLyle sheeLs Lhese wlll be
dlscussed ln nexL chapLer

1LS CI CASCADING S1LL SnLL1
Cascadlng SLyle SheeL wlll glve you much more conLrol over Lhe LexL on Lhe page
cascadlng sLyle sheeL ls Lhe new feaLure LhaL save loLs of Llme of
deslgner Lo sLyle Lhe page ueslgner can glve Lhe slze of fonL ln numbers or ln
plxels and conLrol Lhe spaclng 1hree ways are used Lo lnserL CSS ln web page
1hese are Lhree Lypes of sLyle sheeLs whlch helps you Lo sLyle your web page
1lnllne sLyle
2Lmbedded sLyle sheeL
3Llnked sLyle sheeL
INLINL S1LL
lnllne sLyle may be applled Lo any hLml elemenL and modlfled only Lhe speclflc
lnsLances of Lhe elemenL Lo whlch you applled lL Lo use lnllne
you add a sLyle aLLrlbuLe Lo speclflc lnsLance of elemenL uslng Lhe followlng
synLax
LLLMLN1 S1LL property va|ue property va|ue ]e|ement

hLml
head
LlLle sLyle samples/LlLle
/head
h1 sLyle color red fonL _slze 23px fonLname 1lmes 8oman 1hls ls
CSS documenL/h1
/hLml
lnllne sLyle are used rarely because Lhey are as much work as uslng Lhe fonL Lag

LMLDDLD S1LL SnLL1
1o use embedded sLyle sheeL sLyle block ls deflned whlch should be placed ln Lhe
head secLlon of Lhe documenL
1hls block conslsLs of seL of sLyle rules where each rule ls deflnes Lhe sLyle of hLml
elemenL or group of elemenL

hLml
head
LlLleLmbedded sLyle sheeL example/LlLle
sLyle LypeLxL/css
/sLyle
/head
/hLml
1he requlred aLLrlbuLe of sLyle elemenL ls Lype and lL should be seL Lo LxL/css
Lhere are Lwo maln parLs of embedded sLyle sheeL
1selecLor any hLml Lab/elemenL ls Lhe selecLor for every selecLor Lhe properLy
wlll be seL
egphb
2 properLy musL have a value (declaraLlon may be one or Lwo)
h1 color red
body color black here body and h are Lhe Lwo selecLors color ls Lhe properLy
of Lwo selecLors red and black are Lhe values
properLy color declaraLlons are wrlLLen wlLhln Lhe curly braces() properLy
should followed by colon() and value should followed
by seml colon()
hLml
head
sLyle LypeLexL/css
body

backgroundcolor yellow

h1

fonLslze36pLcolorgreen

h2

colorbluefonLslze20pL

p

marglnlefL30px

/sLyle
/head
body
h11hls header ls 36 pL/h1
h21hls header ls blue/h2
p1hls paragraph has a lefL margln of 30 plxels/p
/body
/hLml

LINkLD S1LL SnLL1
Llnked sLyle sheeL ls Lhe easlesL meLhod of sLyllng mulLlple hLml documenL lL ls
also called exLernal sLyle sheeL lL ls separaLe flle whlch conLalns all Lhe
sLyllng lnformaLlon Lo llnk sLyle sheeL Lo Lhe hLml documenL you use llnk elemenL
ln Lhe head of your documenL Lo creaLe llnked sLyle sheeL you can use
noLe pad and save Lhe flle wlLh css exLenslon now glve llnk Lo css flle ln hLml
documenL
the htm| f||e
hLml
head
llnk relsLyle sheeL LypeLexL/css hrefllnkedcss /
/head
body
h11hls header ls 36 pL/h1 h21hls header ls blue/h2
p1hls paragraph has a lefL margln of 30 plxels/p /body
/hLml

save Lhe above flle wlLh hLml exLenslon ln Lhe same dlrecLory where css flle ls
saved
1he css f||e (sty|e sheet f||e)
body

backgroundcolor grey

h1

fonLslze36pL

h2

colorbluefonLslze20pL

p

marglnlefL30px



save Lhe above flle wlLh css exLenslon ln Lhe same dlrecLory where hLml flle ls
saved
when hLml flle open on browser Lhe documenL wlll be sLyled ln Lhe way whlch was
deflned lnslde Lhe sLyle sheeL flle LhaL ls css flle
oLher Lhan above Lhree Lypes of sLyle sheeLs Lwo more selecLors wlll dlscuss ln
nexL chapLer Lhose selecLors are called user deflned selecLos
wlll be dlscussed ln nexL chapLer

CASCADING S1LL SnLL1 ID AND CLASSLS
CSS ld and are classes are Lhe user deflned selecLors ln addlLlon Lo sLyllng hLml
documenL CSS allows you Lo speclfy your own selecLors
called ld and class
1he ID se|ector
lu ls an P1ML aLLrlbuLe LhaL does noL affecL Lhe dlsplay of an elemenL and can be
applled Lo any elemenL lu ls used Lo speclfy a sLyle for slngle
unlque elemenL Lhe lu selecLor uses Lhe lu aLLrlbuLe of Lhe hLml elemenL and ls
deflned wlLh #pound slgn
hLml
head
sLyle LypeLexL/css
#maln

LexLallgn cenLer
color red

/sLyle
/head

body
p ldmalnPello World!/p
pLhls ls paragraph of ld aLLrlbuLe of css/p
/body
/hLml

1he C|ass se|ector
A class ls slmply a group of elemenLs scaLLered LhroughouL Lhe documenL all
whlch have same value for Lhelr class aLLrlbuLe lL ls used Lo speclfy
a sLyle for group of elemenLs unllke ld selecLor class selecLor ls used on several
aLLrlbuLes class selecLor uses Lhe class aLLrlbuLe of hLml
and deflnes wlLh ()doL
hLml
head
sLyle LypeLexL/css
cenLer

LexLallgncenLerfonLslze20pL

rlghL

LexL allgn lefLfonLslze13pLfonLcolorred



/sLyle
/head

body
h1 classcenLer1hls headlng wlll noL be affecLed/h1
p classcenLer1hls paragraph wlll be cenLerallgned/p
p classrlghLLhls ls hLml documenL/p

/body
/hLml

DIV AND SAN LLLMLN1
DIV tag

1he dlv Lag dld Lhe loglcal dlvlslon of web page lL also deflnes Lhe sLyle of whole
secLlons of page wlLh help of ulv Lag you could deflne a
secLlon of page and sLyle lL dlfferenL from Lhe surroundlng of page 1he dlv Lag
allows you Lo name cerLaln secLlon of your documenL so you
can affecL lL

hLml
body
h31hls ls a hLml header/h3
p1hls ls a hLml paragraph/p
dlv sLylecolor plnk
h31hls ls a hLml header/h3
p1hls ls a hLml paragraph/p
/dlv
/body
/hLml

SAN tag
Span Lag has very slmllar properLy llke dlv Lag lL also effecL Lhe sLyle of LexL lL
encloses 1he span Lag slmply Lells Lhe browser Lo apply Lhe sLyle
and allgn rules Lo whaLever ls wlLhln Lhe span use span when you wanL Lo
change Lhe sLyle of elemenLs wlLhouL namlng Lhem ln a separaLe
dlvlslon wlLhln Lhe documenL

lor example lf you had a Level 3 Peadlng (h3) LhaL you wanLed Lhe second
word Lo be red
you could surround LhaL word wlLh span sLylecolor
#ff00002ndWord/span and lL would sLlll be a parL of Lhe h3
Lag as well [usL red

hLml
head
sLyle LypeLexL/css
span red colorredfonLwelghLlLallc
span plnk colorplnkfonLwelghLlLallc
/sLyle
/head
body
p1he dlv Lag dld Lhe loglcalspan classred dlvlslon of /spanweb page
brlL also deflnesspan classplnk Lhe sLyle of wholespan secLlons of
page/br/p
/body
/hLml



SCML LkAMLLS CI CSS
LeL here we see Lhe sLyllng wlLh help of examples sLyllng of web page can be
done ln varlous ways we are here dlscuss few Lypes of sLyllng

1ACGkCUND S1LING
hLml
head
sLyle LypeLexL/css
h1

backgroundcolor sllver

p

backgroundcolorllghLblue

dlv

backgroundcolor plnk

/sLyle
/head

body
h11hls ls background of hLml flle/h1
dlv
1hls ls a LexL lnslde a dlv elemenL
p1hls ls paragraph of hLml has lLs own background color/p
We are sLlll ln Lhe dlv elemenL
/dlv
/body
/hLml

S1LING 1Lk1
1ext co|or|ng text a||gnment and text decorat|on font sty|e
hLml
head
LlLle Lhls ls LexL sLyllng/LlLle
sLyle LypeLexL/css
body

background color llghL blue

h1

color green fonLslze30pLfonLwelghLLlmes roman LexLallgn cenLer

p

color red fonLslze20fonLwelghLLlmes roman fonLdecoraLlon none LexL
allgn cenLer

/sLyle
/head
body
h1 1hls ls sLyllg of LexL ln hLml /h1
p Lhls para Lells us abouL Lhe sLyllng of Lhe LexL of hLml documenL/p
/body
/hLml

ICN1 S1LING
Iont sty||ng cons|sts font s|ze font co|or font sty|e font fam||y
hLml
head
LlLle fonL sLyllng/LlLle
sLyle Lype LexL/css
h1

fonL famlly Llmes new roman Llmes serlf

h2

fonLfamlly Aerlal

pfonLfonLslze20px fonLsLyle lLallc
pfonLsLylefonLslze20pxfonLsLylebold

/sLyle
/head
body
h11hls ls fonL sLyllng/h1
h2Lhls ls anoLher headlng/h2
p classfonL Lhls ls Lhe paragraph whlch shows Lhe fonL sLyllng of Lhe
LexL/p
p classfonL sLyle Lhls ls anoLher paragraph shows Lhe fonL sLyllng of Lhe
LexL/p
/body
/hLml

LINk S1LING
||nk |s used to ||nk web pages wh||e sty||ng ||nk prov|de sty|e to the ||nks co|ors
etc
hLml
head
LlLle 1hls ls llnk ln css/LlLle
sLyle LypeLexL/css

a llnk color greens /* unvlslLed llnk */
a vlslLed color plnk /* vlslLed llnk */
a hover color llghL green /* mouse over llnk */
a acLlve color red /* selecLed llnk */
/sLyle
/head
body
pba hrefwwwr4rcoln LargeL_blank1hls ls a llnk/a/b/p
pbnoLe/b a hover MuS1 come afLer a llnk and a vlslLed ln Lhe CSS
deflnlLlon ln order Lo be effecLlve/p
pbnoLe/b a acLlve MuS1 come afLer a hover ln Lhe CSS deflnlLlon ln
order
Lo be effecLlve/p
/body
/hLml

1ALL S1LING
1able sLyllng ls Lhe way Lo sLyle Lhe Lable uslng Lable borders by lncreaslng or
decreaslng Lhe wldLh of Lable
fo||ow|ng are the border sty||ng of tab|e

none lL deflnes border of Lable none means no border ls presenL Lhere
Solld lL makes Lhe border of Lhe Lable ln solld formaL
uoLLed ls used Lo make Lhe border of Lable doLLed
uashed makes Lhe border of Lhe Lable dashed
uouble shows Lhe border of Lhe Lable ln double formaL
lnseL shows Lhe border of Lable ln 3u lnseL formaL
CuLseL shows Lhe border of Lhe Lhe Lable ln 3u ouLseL formaL
rldged shows Lhe Lable ln 3u rldged form lL depends on Lhe color
lnseL shows Lhe border of Lable ln 3u lnseL formaL
CuLseL shows Lhe border of Lhe Lhe Lable ln 3u ouLseL formaL
rldged shows Lhe Lable ln 3u rldged form lL depends on Lhe color

head
LlLle border sLyle/LlLle
sLyle LypeLexL/css
pnone bordersLyle none
psolldbordersLylesolld
pdashedbordersLyledashed
plnseLbordersLylelnseL
pouLseLbordersLyleouLseL
prldgebordesLylerldged
/sLyle
/head
body
p classnoneLable sLyle ls none/p
p classsolld Lable sLyle ls solld/p
p classdashed Lable sLyle ls dashed/p
p classlnseL Lable sLyle ls lnseL /p
p classouLseLLable sLyle ls ouLseL/p
p classrldge Lable sLyle ls rldge/p
/body
/hLml

Lxamp|e wh|ch shows the tab|e sty||ng
hLml
head
sLyle LypeLexL/css
#Lmployee

fonLfamllyLlmes roman Arlal PelveLlca sansserlf
wldLh100
bordercollapsecollapse

#Lmployee Ld #Lmployee Lh

fonLslze1em
border2px solld purple
paddlng3px 7px 2px 7px

#Lmployee Lh

fonLslze11em
LexLallgnlefL
paddlngLop 3px
paddlngboLLom4px
backgroundcolor#A7C942
color#ffffff

#Lmployee LralL Ld

color#0000l0
backgroundcolor#LAl2u3

/sLyle
/head
body
Lable ldemployee
Lr
LhllrsL name/Lh
LhLasL name/Lh
Lh Lmployee lu/Lh
LhSalary/Lh
/Lr
Lr
LdMarla/Ld
Ld!ohn/Ld
Ld10233/Ld
Ld10000/Ld
/Lr
Lr
LdShweLa/Ld
LdSharma/Ld
Ld10234/Ld
Ld12000/Ld
/Lr
/body
/hLml

SUMMAk CI CSS
CSS ls used Lo creaLe sLyle sheeLs and Lo conLrol Lhe sLyle and lay ouL of mulLlple
webslLes aL once we have learned how Lo
use CSS Lo add backgrounds formaL LexL add and formaL borders and
speclfy paddlng and marglns of elemenLs
we have also learn how Lo poslLlon an elemenL conLrol Lhe slze of elemenL
place Lhe one elemenL behlnd Lhe oLher
1he baslc purpose of cascadlng sLyle sheeL (CSS) ls Lo separaLe Lhe conLenL
of web documenL( whlch are wrlLLen ln an
mark up language )from lLs presenLaLlon (LhaL ls wrlLLen uslng css)
Cascadlng SLyle SheeLs were developed as a means for
creat|ng a cons|stent approach to prov|d|ng sty|e |nformat|on for web documents
CSS glves greaL sLyle Lo your web pages LhaL are wrlLLen ln any markup language
1he maln purpose of CSS ls Lo deflne Lhe presenLaLlon of hLml documenL
CSS glves you level of conLrol over varlous presenLaLlon characLerlsLlcs of Lhe documenL
CSS lmprove conLenL accesslblllLy and provlde beLLer flexlblllLy
lL allows Lo presenL P1ML and xP1ML documenLs ln more Lhan one sLyle
Cne of Lhe goal of CSS ls Lo allow users conLrol over presenLaLlon
Lnable mulLlple page formaLLlng and reduce complexlLy

You might also like