CSS සරලව ඉගෙනිමු

පාඩම 02


කාරක රීතිය(Syntax)

පහත දැක්වෙන්නේ css rule එකකි.

CSS file එකක් වෙනස් කිරීමෙන් ඕනෑම වෙබ් පිටුවක වෙනස් කම් ඇති කල හැක. එය ඉතා ම වාසිදායක වේ. Css rule වල ප්‍රධාන කොටස් 02ක් තිබේ. selector සහ declaration වේ. selector යනු ඔබට අවශ්‍යය HTML element(body, h1,h2,p,font,ul) එකයි. declaration සෑම එකකටම value එකක් සහ property එකක් ඇත. property එකක් කියන්නේ අපට වෙනස් කර ගැනීමට අවශ්‍යය HTML element එකෙහි එක් එක් attribute වලටයි. පහත උදාහරනයෙන් attribute එකක් කියන්නේ මොකද්ද කියලා පැහැදිලි වෙයි.

<h1 style="color:blue;">Namal Priyadarshana</h1>

Result:

Namal Priyadarshana

h1 කියන HTML element එකෙහි color කියන attribute එකට blue කියන value එක ලබා දී ඇත. ඕගොල්ලො හැමෝටම තේරෙනවා ඇති සෑම attribute එකකටම value එකක් තිබිය යුතු බව. සෑම විටම declaration එකක් අවසන් වියයුත්තේ (;) semicolon එකකිනි. එලෙසම declaration group එකක් ලිවිය යුත්තේ සඟල වරහන් තුලය.
p{
color:red;
padding:5px;
line-height:1em;

}

CSS file එකක් save කිරීම:


CSS file එකෙහි නම ලබා දී .css ලෙස අවසන් කල යුතුය.

Css Comments

css Comments එකක් පහත පරිදි ලිවිය හැක.
p{
color:red;
/*This is a comments*/
padding:5px;
line-height:1em;
}

id selector

id එකක් මගින් යම් element එකක් සදහාම පමණක් style එකක් අර්ථ දක්වයි. මෙය අර්ථ දැක්වීමට # ලකුණ යොදා ගැනේ. id එකක් ආරම්භ කිරීමට ඉලක්කම් යොදා නොගනී. ඊට හේතුව වන්නේ එය fire fox brouser එක හරහා ක්‍රියාත්මක නොවීමයි. පහත උදාහරණය බලන්න.
#left{
margin:5px;
padding:5px;
font-size:15px;
color:grey;
}

class selector

class එකක් මගින් element කිහිපයකට style අන්තර්ගත කිරීමට යොදා ගනී. මෙය අර්ථ දැක්වීමට "." යොදා ගැනේ. පහත උදාහරණය බලන්න.
.container{
text-align:center;
padding:5px;
font-size:15px;
color:green;
}

පහත උදාහරණය මගින් container class එකට හා p කියන HTML element එකට යන දෙකකට style අන්තර්ගත කර ඇත.
p .container{
text-align:center;
padding:5px;
font-size:15px;
color:green;
}


Recommended:


අද අපි CSS ගැන මූලික කරුණු ටිකක් ඉගෙන ගත්තා . CSS ගැන තවත් ඉගෙන ගන්න අපි තවත් පාඩමකින් හමු වෙමු. අපගේ මීලග පාඩම නැරබීමට මෙතනින් යන්න.

- Namal Priyadarshana.