Fjí Äihsksx Fojk Fldgi&: Declaration01

f;dr;=re yd ikaksfõok ;dlaIK Ys,amh fjí äihsksx
fjí äihsksx ^fojk fldgi&
Markup Language u.ska ilia l, fjí msgq fmkajk wdldrh fyj;a fudaia;rh fjkia lr.eksug wmg Style Sheet
Language jevigyka fhdo.kq ,nhs' CSS fyj;a Cascade Style Sheets o XSL fjí wvú ks¾udKh lr.eksug
fhdod.kq ,nk m%Odk Style Sheet Language f,i wmg .; yel'
CSS j,os wmg my; whqßka fldgia lsysmhla yÿkd.; yel'

Selector {Declaration01 ;Declaration02;}
H1{color:blue; font-family:Arial;}
Selector u.ska wm fhdok Style l=ula ioyd wod, jkafkao hkak ;srKh lrhs'
Declaration u.ska wod, Style ,nd foa' th o fldgia folls m<uq fldgi Property tlo fojkqj we;s fldgi Value f,i
yÿkajhs by; WodyrKhg wkqj Property tl f,i Color yd Font-family oelaúh yel tu Property ioyd ÿka Value f,i
Blue yd Arial oelaúh yel'
Selector CSS j,os fhdod.kakd wldrh
wm HTML Tag ioyd Style ,nd fokafka kï tu Tag tl Selector tl f,i ,nd osh yel'
WodyrK - h1{color:red; font-size:12em}
wm HTML Tag ioyd tu Tag wksl=;a tag j,ska fjkuu yÿkd.eksug wm úiska ID fyda Class fhdokq ,nhs tjeks wjia:djl
Id yd Class ioyd Style ,nd fokafka kï my; whqßka ,nd osh yel'
WodyrK -
ID tlla ioyd Style ,nd fok wjia:djl ID tfla kug l,ska # ,l=K fhdohs'
<html>
<head>
<style>
#header{color:red; font-size:12em}
</style>
</head>
<body>
<p id=”header”>NAITA, Hangruranketha</p>
</body>
</html>
Class tlla ioyd Style ,nd fok wjia:djl Class tfla kug l,ska . ,l=K fhdohs'
<html>
<head>
<style>
.header{color:red; font-size:12em}
</style>
</head>
<body>
<p class=”header”>NAITA, Hangruranketha</p>
</body>
</html>
1 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

CSS Style ,nd osh yels wdldrhka

CSS Style ,nd osh yels wdldrhka lsysmhla mj;s'
01 Inline Style
m,uqj wm HTML tag tl ;=,u Style ,nd osh yelsh th inline style l%uh f,i yÿkajhs' th my; mßos l, yel'
<h1 style=”font-size:12; color:red;”> Inline Style </h1>
02 Internal Style Sheet

m,uqj wm HTML tag ioyd Style ,nd osh yels fojk l%uh jkqfha internal style sheet l%uh hs' tys os Style ,nd fokafka
HTML head tag tl ;=, Style f,iska tag tlla ,nd os ta ;=, wmg wjYHh Style ,nd osu fuysos isÿfõ' th my; mßos l, yel'
<html>
<head>
<style>
h1{color:red; font-size:12em}
</style>
</head>
<body>
<h1>NAITA, Hangruranketha</h1>
</body>
</html>
03 External Style Sheet

m,uqj wm HTML tag ioyd Style ,nd osh yels f;jk l%uh jkqfha external style sheet l%uh hs' tys os Style ,nd fokafka
fjkuu CSS Style Document tlla ;=,hs' miqj th wmf.a HTML Document tlg ,skala lrhs th my; mßos l, yel' tysos
href ;=, wm úiska ilia l, Ndysr CSS Style Sheet tlg ,nd ÿka ku ,nd os Link lr.; hq;=h'
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>NAITA, Hangruranketha</h1>
</body>
</html>
Background ioyd ,nd osh yels Styles

Background tlg j¾Khla yd rEmhla we;=,;a lr.; yel th my; mßos l, yel'
Background Color tlla ,nd fok wldrh

iïmq¾K msgqj ioydu j¾Khla fhdokafka kï Body tag tlg style ,nd osh hq;=h th my; mrsos osh yel body{background-
color:red;}
wm msgqfõ f;dar.;a fldgia ioyd Background tl ioyd j¾Khla fhdokafka kï my; mßos ,nd osh yel'

fPohla ioyd kï p{background-color:green;}

Heading tlla ioyd kï h1{background-color:green;}
Div tlla ioyd div{background-color:green;} f,iska wm f;dard.kakd oe ioyd background color ,nd osh yel'
Background Image tlla ,nd fok wldrh

wmg msgqjg fyda f;dard.;a fldgila ioyd rEmhla Background tlg fhdod.eksug my; whqßka l, yel'
iïmq¾K msgqj ioydu rEmhla Background tlg fhdokafka kï Body tag tlg style ,nd osh hq;=h th my; mrsos osh yel
body{background-image:url(“ Image tfla ku ”);}
wm msgqfõ f;dar.;a fldgia ioyd Background tl ioyd rEmhla hdokafka kï my; mßos ,nd osh yel'
fPohla ioyd kï p{background-image:url(“ Image tfla ku ”);}
Heading tlla ioyd kï h1{background-image:url(“ Image tfla ku ”);}
Div tlla ioyd div{background-image:url(“ Image tfla ku ”);} f,iska wm f;dard.kakd oe ioyd background
color ,nd osh yel
wmg tfia Background tlg fhÿ rEmh ioyd ;j ;j fjkialï lsysmhla l, yel'
01. Background tlg fhdok Image tl kej; kej; Background tl ;=, o¾YKh lr.eksu ioyd background-repeat
CSS Property tl fhdod.kq ,nhs' tysos ;sria w;g Repeat lr .ksug Repeat-X o isria w;g Image tl Repeat
lr.eksug Repeat-Y f,io ,nd fokak Repeat lr.eksug wjYHh fkdjkafka kï no-repeat f,iska ,nd fokak'
02. Background tlg fhdok Image tl msysgk ia:dkh fjkia lr.eksu ioyd background-Position CSS Property
tl fhdod.kq ,nhs' tysos my; úúO ia:dk ,ndosh yel'
• by, ju ioyd - Top left
• by, ueo ioyd - Top Center
• by, ol=K ioyd - Top right
• ueo ju ioyd - Center left
• ueo - Center
• ueo ol=K ioyd - Center Right
• my, ju ioyd - Bottom left
• my, ueo ioyd - Bottom Center
• my, ol=K ioyd - Bottom right
Eg -
body{background-image:url(“001.jpg”); background-repeat: no-repeat; background-position:center;}
03. Background tlg fhdok Image tlg wod, m%udKh ke;skï Size tl fjkia lr.eksu ioyd background-Size
CSS Property tl fhdod.kq ,nhs' tysos my; mßos os.la yd m,,la ,ndosh yel' th mslai,a j,ska ,nd osh yel' tys m,uqj os. o
fojkqj Wio ,nd os we;' tkï os. 240 Wi 200 f,iska WodyrKhg wkqj ,nd os we;' tfiau tu m%udKh ishhg .Kkaj,ska o ,n osh yel'
body{background:url(“001.jpg”); background-repeat: no-repeat; background-size:240px 200px;}
04. wmf.a Background tl ioyd rEm lsysmhla fhdod.eksug yelshdj we; ta ioyd my; mßos CSS code fhdod.; yel' tysos
lrkq ,nkafka Image wvx.= file lsysmhl link ,nd osuhs'
body{background-image:url(“001.jpg”), url(“002.gif”);}

wl=re ioyd CSS fhdod.kakd wdldrh
wm we;=,;a lrk wl=re ke;skï Font tl fjkia lr.eksug SCC j,os Font-family hk Property tl fhdod.kq ,nhs' tysos
wmg Font j¾. lsysmhla ,nd osh yel' tfia Font lsysmhla ,nd ÿka úg m,uqj ,nd ÿka Font tl fkd;snqk;a ,nd ÿka wksl=;a Font
tllska web msgqj o¾YKh lrkq ,nhs
p{font-family: “Times New Roman”;}

h1{font-family: “arial”, “times New Roman”, “times”;}
wl=re ioyd l, yels uq,sl fjkialï lysmhla .ek wjOdkh fhduq lruq'''
01 wl=rej, uq,sl msysáu fjkia lr.eksug fyj;a style tlg Normal Italic Oblique jeks oE ,nd os Style tl fjkia l,
yel'
p{font-family:”Times New Roman”; font-style: italic;}
03. wm we;=,;a l, wl=rej, >Klu fjkialr.eksug Font-weight CSS Property tl fhdod.kq ,nhs' ta ioyd bold fyda
Bolder fyda >Klug wod,j b,lalulska th ,nd osh yel'
p{font-family:”Times New Roman”; font-weight: bold;}
04. wl=re j, m%udKh fjkia lr.eksug fyj;a font tfla Size tl fjkia lr.eksug Font-Size CSS Property tl fhdod.kq
,nhs' ta ioyd b,lalulska w.hka ,nd osh yel th mslai,a j,ska fyda em fyda fmdhskaá (pt) hk tall j,ska fyda ishhg .Kklska
,nd osh yel'
h1{font-family:”Times New Roman”; font-size: 12;}

h2{font-family:”Times New Roman”; font-size: 15pt;}
h3{font-family:”Times New Roman”; font-size: 10em;}
h4{font-family:”Times New Roman”; font-size: 20px;}
h5{font-family:”Times New Roman”; font-size: 70%;}
ke;skï Font-size tlg fhdok Value tl ioyd my; oe ,nd os font size tl fjkialr.eksug yelsh'
• l=vdu wl=re xx-small
• l=vd wl=re x-small
• ;rula l=vd wl=re small
• uOHu m%udKfha wl=re medium
• úYd, wl=re Large
• ;rula úYd, wl=re x-Large
• úYd, wl=re xx-Large
03. wm we;=,;a l, wl=rej,g fijke,a,la we;=,;a lr.eksug Text-shadow hk CSS Property tl fhdod.kq ,nhs' tah my;
mßos ,nd osh yel'
h1{text-shadow: 10px 10px 10px red;}
fuysos ,nd ÿka m,uq mslai,a w.h u.ska jug yd ol=Kg fhdok shadow tl fjkia l, yel tys w.h RK w.hla ÿkaúg th jug
nrjk w;r OK w.hla ÿkaúg ol=Kg shadow tl nrj msysghs'

,nd ÿka fojk mslai,a w.h u.ska by,g yd my,g fhdok shadow tl fjkia l, yel tys w.h RK w.hla ÿkaúg fijke,a,
by,g nrjk w;r OK w.hla ÿkaúg my,g nrj shadow msysghs'
f;jkqj ,nd ÿka mslai,a w.h u.ska shadow tl me;sßu m%udKh fjkia l, yel by, w.hla ÿkaúg fijke,a, tys úYd,
m%udKhlg me;sr hhs
miqj wmg j¾Khla ,nd os fijke,a, ioyd j¾Khla ,nd osh yel'
04. wmg wl=rej, msysgd we;s wldrh fjkialr.eksug Text-align hk property tl ,nd fokak miqj wl=re ueog nrj wjYHh
kï Center f,io ol=Kg fyda jug nrj wjYHh kï left or right f,io msgqjg iudka;rj wl=re msysgjd .eksug wjYHh kï
justify f,i ,nd fokak
h1{text-align:center;}
p{text-align:justify;}
05. wm we;=,;a lrk wl=re ioyd Border tlla ,nd osh yel th my; mßos ,nd osh yel ta ioyd wm Text we;=,;a lrk tag tlg
wod, HTML tag tlg border hk Property tlla ,nd fokak tys mslai,a w.hla ,nd os miqj tu Border tl f¾Ldjlao ;s;a
f¾Ldjlao hkak fojkqj ,nd fokak tys Solid, Dash jeks jpk ,nd os tys iajNjh ;srKh l, yel' miqj wmf.a Border tl ioyd
color tlla f;jkqj ,nd fokak'
h1{border: 1px solid red;}
wl=re ioyd f¾Ldjla fhdo .eksug wmg Text-decoration hk Property tl fhdod .;yel' tys f¾Ldj wjYHh wl=rej,g
by,ska kï overline o my,ska wjYHh kï underline o wl=re ueoska wjYHh kï line-Through f,io Value tl ,nd fokak
h1{text-decoration:overline;}
h2{text-decoration:underline}
h1{text-decoration:line-through;}
kj fPohla wdrïN lrk úg we;eï úg ;rula msgqj ueog jkakg fPoh wdrïN lrhs tfia Tng;a lr.eksug wjYHh kï CSS j,os
Text-indent tlla ,nd osh yel' miqj wmg Text indent tlg w.hla ,nd osh yel my; WodyrKh ta ioyd wOHhkh lrkak
p{text-indent:50px;}
wm fhdok Link tlla ioyd CSS fhdod.kakd wdldrh
wm ñg fmr Web msgq lsysmhla ioyd msúisug links fhdo.eksug HTMLL mdvfï os wOHhkh l, w;r tfia fhÿ Links ioyd
w,xldr f,i ilia lrkak CSS fhdod.kakd wldrh my; úia;r lr we;'
a:link{background-color:red;}
a:visited{color:green;}
a:hover{background-color:blue;}
a:active{color:yellow;}
a:link yd a:visited u.ska idudkHfhka web msgqj ;=, link tl fmkajk wldrh fjkia lr.eksug wod, style tys ,nd osh hq;=h'
a:hover u.ska link tl u;g ujqia tl f.k .sh úg fjkia úh hq;= wldrh wod, style tl fuysos ,nd osh hq;=h'
a:active u.ska link tl la,sl l, úg fjkia úh hq;= wldrh wod, style tl fuysos ,nd osh hq;=h'

wm fhdok Table tlla ioyd CSS fla;hka fhdod.kakd wdldrh
wm úiska HTML yryd Table tl ioyd wmg wjYHh mßos fjkialï CSS yryd lrk whqqre fuu.ska wOHhkh lruq' m,uqj wm
Table tl ioyd Border tlla fhdod.kakd wdldrh wOHhkh lruq' tysos wmg my; wdldrhg Css fl;hka ,nd osh yel' tysos
border u.ska ,nd fok w.h u.ska border tfla >Klu o fojkqj we;s fldgiska Border tl border tlg wod, f¾Lfõ iaghs,a
tl o f;jk fldgiska border tfla j¾Kh o fjkia lrhs'
Table, th, td{border:1px solid red;}
wmg wjYHh kï ,nd fok Border tl wjYHh me;sj,g muKla fhosug wjYHh kï border f,i ,nd fok property tl fjkqjg
border-top, border-bottom, border-left, border-right f,i ,nd os ;udg wjYHh me;a;g muKla border tlla
,nd osh yel'
Table, th, td{border-top:1px solid red;}

Table, th, td{border-right:1px solid red;}
padding tlla u.ska wmg hï udhsula ks¾udKh l, yel' th wm fhÿ fgn,a tfla we;s lreKq igyka lr we;s fldgq ioyd fhod
n,uq'
td{padding:10px;}
by; os me;s y;rgu padding tl we;=,;a jk w;r ;udg wjYHh me;s ioyd padding fhosug wjYHh kï my; wdldrhka
folgu l, yel
td{padding-right:0px; padding-left:10px; padding-top:0; padding-bottom:10;}
td{padding:10px 0px 10px 0px;}
wmg fgn,a tlg we;=,;a lrk f;dr;=re l=uk udhsu ;=, fmkaúh hq;=o hkak Text-align hk property tl u.ska ,nd osh yel tys
my; oE u.ska th fjkia lr.; yel' left, right, center u.ska fjkialr.eksug yelsh th my; mßos fõ'
td{text-align:right;}
fuu lreKqj,g wu;rj Table ioyd ;j;a fjkialï lr.eksug wod, fla;hka Table j,g wod, Project file tl;=, we;' tajd
wOHhkh lrkak'
CSS Style Sheet tllg fndvrhla fhdod.kakd wdldrh
wmf.a msgqjg Margin tlla ,nd osu my; wdldrhg isÿl, yel'
body{margin-right:5%; margin-left:5%; margin-top:5%;margin-bottom:5%;}
tu udcska tl wmg wmg my; mßos o ,nd osh yel' fuys m,uqj we;af;a by, udcska tlhs tys fojkqj we;af;a ol=Kq mi udcska tljk
w;r f;jkqj yd isõjkqj we;af;a ms<sj,ska my, yd jïmi udcska tlhs'
body{margin:5% 5% 5% 5%;}
wmg margin ;=, Border tlla fhdokafka kï tu Border tlg padding tlla ,nd osh hq;=h tfia fkdjqkfyd;a border tlg
wdikakju wm Web msgqjg we;=,;a lrk oe oel .eksug isÿfõ' tu ksid border tlla fhdokafka kï padding tlla ,nd osu jvd;a
fhda.H fõ oeka wms n,uq page tlg padding tlla fhdod.kakd wldrh'

body{padding-top:5% padding-right:5% padding-bottom:5% padding-left:5%;} fyda

body{padding:5% 5% 5% 5%;} hk fohdldrhgu padding we;=,;a l, yelsh' tfiau lsjhq;= wfkla lreK kï
Padding iy Magin wmg msgqj ioyd muKla fkdj Table p div jeks wksl=;a tags ioyd o fhdod.eksug yelsh'
oeka Tn msgqj ioyd udcska tlla yd padding tlla fhdod.kakd wdldrh wOHhkh l, w;r tysos wmg Border tlla fhdod.eksu
ms<snoj wjOdkh fhduq lrk ,os'' tfiakï oeka wm Border tlla ioyd jk Style .ek wOHhkhl fhfouq'
wmg Border tlla my; mßos msgqjg we;=,;a lr.; yel'
body{border:2; border-style:solid; border-color:red; border-width:thick; }
fuysos border tla ioyd 2 ,nd os we; fojkqj wm fhdok border tl l=uk wdldrfha tllao ;ks f¾Ldjla o lv bß we;s f¾Ldjlao
jeks oe ;srKh lrkq ,nhs f;jkqj we;af;a border tl ioyd fhdok ,enq j¾Kh hs' fuu m%Odk oe j,g wu;r wmg border tlg
iïnkaOj my; oe jeo.;a h'
• Border tl wmg b,laulska w.hla ,nd osh yels fiau Thick, Medium, thin yd em f,iska w.hla ,nd osh yel'
• Border style tlg wmg my; oe ,nd osh yel thska wmf.a Border tfla fmkqu fjkia lr.; yel' Dashed, solid,
double,groove, dotted,ridge, inset jeks oe tu Style lsysmhla fõ'
• Border tfla fl,jr y;r wmg ;rula jl% lr.eksug wjYHh kï border-radius property tl ioyd w.hla ,nd
fokak' my; mßos th ,nd osh yel' border-radius:20px;
• wm fhÿ border tl ioyd fijke,a,la ,nd osug wjYHh kï box-shadow property tl ioyd my; f,iska w.hka
,nd fokak' wm ñg fmr Text ioyd shadow tlla fhdok wdldrh .ek wOHhkh lr we;s neúka fuysos o tu
l%uhu fhdod.kq ,nhs'
box-shadow:20px 20px 20px green;
body{border:2; border-style:solid; border-color:red; border-width:thick; border-radius:20px; }
by;ska wm body tag tl ioyd muKla ,nd ÿkako tu fjkialr .eksï div tlla ioyd o wmg ,nd osh yel' wm Div u.ska wmf.a
Web msgqfõ Layout tla fjk fjk fldgiaj,g fjkalr.eksu lrkq ,nhs' tu ksid by; wm ,nd ÿka margin, border yd
padding jeks ish,a,u div ioyd jeo.;a jkjd fiau tajd fhdod.eksu l, hq;=h

,ehsia;= fydj;a List ioyd CSS Style fhdod.kakd wdldrh

wmg ,siaá tlla ioyd style fhdokakfka kï wm list fhdod ioyd fhdod.kakd html tag jk ul, ol, li jeks tag ioyd style ,nd
osh hq;=h' my; ,nd os we;s style wOHhkh lßu u.ska list tlla ioyd CSS fhdod.kakd wldrh f;areï .; yel'
wmf.a ,siaá tlg fhdok ixfla;h fyda b,lalu fyda wl=re iajNdjh fjkia lr.eksug fuh fhdod.ks'
ul{list-style-type:circle;}
wmf.a ,siaá tlg fhdok ixfla;h ioyd Image tlla fhdod.ksug my; f,i ,nd fokak'
ul{list-style-image:url(“image path/image.jpeg”;}
wmf.a ,siaá tlg fhdok ixfla;h fyda b,lalu fyda wl=re isudjg msg;ska we;=,;a lr.eksug outside f,io text line tl ;=,u
we;=,;a lr.eksug inside f,iskao list-style-position tl ,nd fokak'
ul{list-style-position:inside;}
wmf.a ,siaá tlg fhdok ixfla;h fyda b,lalu fyda wl=re wmf.a msgqj ;=, o¾YKh fkdjk fia ilia lr.eksug my; fla;
fhdod.kak'
ul{list-style-type:none; margin:0; padding:0}
Gradient tlla CSS Style tlla ioyd fhdod.kakd wdldrh

wm ñg fmr CSS fhdodf.k Background ioyd j¾K we;=,;a lrk whqre bf.k .;af;uq' wm oeka j¾K lsysmhla tl;=lr ilia
lrk Gradiant tlla we;=,;a lrk whqre wOHhkh lruq' ta ioyd wjfndaOh ,nd .eksug my; fla; wOHhkh lr n,kak'
Linear Gradient tlla fhdo.kakd wldrh

h1{background:linear-gradient(to bottom right, red, green, blue);}
radial Gradient tlla fhdo.kakd wldrh

h1{background:radial-gradient(to bottom right, red, green, blue);}
;j;a Gradient ms<snoj ;j;a f;dr;=re Gradient j,g wod, Project file tl mßYs,kh lr ,nd.; yel'
Animation tlla CSS Style tlla u.ska ilia lr.kakd wdldrh

wm weksfïIka tlla we;=,;a lr.eksug my; wldrhg l, yel' my;ska olajd we;s WodyrKh DIV tag tla ioyd fhdod.kakd
wdlrh úia;r lrhs' m,uqj Aimation kñka Property tlla ,nd os tys Value tl ioyd kula ,nd os th l%shd;aul jk ld,h
;;amr j,ska ,nd osh h;=h l, yel' tu animation tl l%shd;aul fkdfõ kï tu Animation Property tlg l,ska -webkit-
f,iska ,nd fokak'
div{
background:green; width:50px; height:50px;
animation:cssani1 10s;
-webkit-animation:cssani1 10s;}
fojkqj weksfïIka tl l%shd;aul jk ld,fha l=uk wldrfha fjkia lula úh h;=o hkak ,nd osu l, hq;=h' th my; wldrhg ,nd osh
yel tkï weksfïIka tfla m,uq isshg 0 os úh hq;af;a l=ulao fojk isshg 25 os yd ishhg 50 os yd wjika isshg 100 os úh h;=
fjkiaklu ,nd fokak
@keyframes cssani1{
0%{background:green;}

25%{background:red;}
50%{background:blue;}
75%{background:gray;}
100%{background:yellow;}
}
by; ,nd ÿka fla; Tn Nú;d lrk Browser tfla l%shd;aul fkdjkjdkï my; wldrhg ,nd fokak
@-webkit-keyframes cssani1{
0%{background:green;}
25%{background:red;}
50%{background:blue;}
75%{background:gray;}
100%{background:yellow;}
}
by;ska ,nd ÿka weksfïIka tlg wkqj wm fhdÿ Div tlg fhdod we;s j¾Kh fjkia fõ' m,uqj fld, mdgo fojkqj r;= yd f;jkqj ks,a
isõjkqj ÿnqre mdg yd wjidk ;;amr lsysmh ;=, ly mdg f,iska fjkia fõ
wm fhÿ Div tl p,kh lrk wksfïIka tlla fhdod.kakd wldrh
div{
position:relative;
animation:cssani1 10s;
-webkit-animation:cssani1 10s;}
fojkqj weksfïIka tl l%shd;aul jk ld,fha l=uk wldrfha fjkia lula úh h;=o hkak ,nd osu l, hq;=h' th my; wldrhg ,nd osh
yel tkï weksfïIka tfla m,uq isshg 0 os úh hq;af;a l=ulao fojk isshg 25 os yd ishhg 50 os yd wjika isshg 100 os úh h;=
fjkiaklu ,nd fokak
@keyframes cssani1{
0%{left:0px; top:0px;}
}
by; ,nd ÿka fla; Tn Nú;d lrk Browser tfla l%shd;aul fkdjkjdkï my; wldrhg;a ,nd fokak
@-webkit-keyframes cssani1{
}
wm fhÿ Div tfla m%udKh fjkia lrk wksfïIka tlla fhdod.kakd wldrh
wmg Div tl ioyd m%udKh fjkiajk weksfïIka tlla ,nd osug transition f,iska Property tlla ,nd os tys values ioyd

kula yd th l%shd;aul úh hq;= ld,h ,nd osh hq;=h' miqj fojk fldgiska tkï div:hover u.ska ujqih ta u;g f.k.sh úg tys
mudKh fjkia úh hq;= m%udKhg wod, f;dr;=re ,nd fokak'
div{
Trnsition:cssani1 5s;
-webkit-transition:cssani1 5s;}
div:hover{width:300px;}
Navigation bar tlla CSS Style tlla u.ska ilia lr.kakd wdldrh
wmg fjk;a msgq ioyd msúisug wm úiska keúf.aIka nd¾ tlla Web msgq ioyd fhdokq ,nhs' tfia fhdok navigation bar ioyd
w,xldrj;a style Style fhosh yel' my;ska tfia fhosh yels style tlla ms,snoj wOHhkhl fhfouq'
m,uqj HTML fhdodf.k menu tlg wod, jk ud;Dld we;=,;a jk fia list tlla we;=,;a lr.ksuq' tysos list tl ;=, wm link úh
hq;= msgqj fyda ;ekg wod, ,smskh fyj;a path tl ,nd fokak my; wldrhg
<body>
<ul>
<li><a href=”Home.html”>Home</a></li>
<li><a href=”About.html”>About</a></li>
<li><a href=”Contact.html”>Contact</a></li>
</ul>
</body>
miqj tu list ioyd wod,jk styles wm style sheet tl ;=, ,nd osh hq;=h' th my; mßos l, yel'
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
miqj ta ioyd fhdodwe;s ,skala tl osiaúh hq;= wldrhg wod, jk Style ,nd osu isÿ lrkak'
a:link, a:visited{
display:block;
font-weight:bold;
color:red;
background-color:blue;
width:100px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

f;jkqj tu ,skala tl u;g ujqih f.k .sh úg yd th la,sla lrúg fjkiaúh hq;= wdldrhg wod, style my; mßos ,nd fokak
a:hover, a:active{
background-color:yellow;
}
Tng fuh ;sria w;g o¾YKh lr.; hq;=hs kï list tfla lreKq ioyd left me;a; ioyd Float tlla ,nd fokak'
li{float:left;}
Information and Communication Technology Technician

National Apprentice and Industrial Training Authority
Madanwala, Hanguranketha
Tel : 0717459821 (Ajith) | Facebook : NAITA.Hanguranketha

Fjí Äihsksx Fojk Fldgi&: Declaration01

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fjí Äihsksx Fojk Fldgi&: Declaration01

Uploaded by

Copyright:

Available Formats

f;dr;=re yd ikaksfõok ;dlaIK Ys,amh fjí äihsksx

fjí äihsksx ^fojk fldgi&

CSS j,os wmg my; whqßka fldgia lsysmhla yÿkd.; yel'

Selector CSS j,os fhdod.kakd wldrh

1 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

CSS Style ,nd osh yels wdldrhka

02 Internal Style Sheet

03 External Style Sheet

Background ioyd ,nd osh yels Styles

Background Color tlla ,nd fok wldrh

2 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

fPohla ioyd kï p{background-color:green;}

Background Image tlla ,nd fok wldrh

body{background:url(“001.jpg”); background-repeat: no-repeat; background-size:240px 200px;}

3 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

wl=re ioyd CSS fhdod.kakd wdldrh

p{font-family: “Times New Roman”;}

p{font-family:”Times New Roman”; font-style: italic;}

p{font-family:”Times New Roman”; font-weight: bold;}

h1{font-family:”Times New Roman”; font-size: 12;}

4 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

h1{border: 1px solid red;}

wm fhdok Link tlla ioyd CSS fhdod.kakd wdldrh

5 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

wm fhdok Table tlla ioyd CSS fla;hka fhdod.kakd wdldrh

Table, th, td{border:1px solid red;}

Table, th, td{border-top:1px solid red;}

CSS Style Sheet tllg fndvrhla fhdod.kakd wdldrh

6 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

body{padding-top:5% padding-right:5% padding-bottom:5% padding-left:5%;} fyda

wmg Border tlla my; mßos msgqjg we;=,;a lr.; yel'

body{border:2; border-style:solid; border-color:red; border-width:thick; }

box-shadow:20px 20px 20px green;

body{border:2; border-style:solid; border-color:red; border-width:thick; border-radius:20px; }

7 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

,ehsia;= fydj;a List ioyd CSS Style fhdod.kakd wdldrh

ul{list-style-type:none; margin:0; padding:0}

Gradient tlla CSS Style tlla ioyd fhdod.kakd wdldrh

Linear Gradient tlla fhdo.kakd wldrh

radial Gradient tlla fhdo.kakd wldrh

Animation tlla CSS Style tlla u.ska ilia lr.kakd wdldrh

8 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

wm fhÿ Div tl p,kh lrk wksfïIka tlla fhdod.kakd wldrh

9 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

10 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

Information and Communication Technology Technician

11 cd;sl wdOqksl;aj yd ld¾ñl mqyqKq lsßï wêldßh - yÕ=rkafl;

You might also like