PHP කරා යමු - 23 (CSS)

කලින් පාඩම කරා කරාමයි ආයෙත් මේ පැත්තට එන්නත් බැරි වුණා වැඩ ගොඩක් තිබුණ නිසා. ඉන්නකො මට මතක් කර ගන්න මොනාද කලින් වතාවෙදි කරේ කියලා. ම්ම්... හ්ම්ම්ම්.... හරි අපි කතා කරේ අර හැඩ කාරයා කොහොමද එයාගෙ වැඩ පෙන්නන්නේ කියල නේද. ආයෙත් ටික දවසකින් මුණ ගැහුණ නිසා කම්මැලිත් වගේ ලියන්න ගන්න. ඒත් ඉතින් කට්ටිය බන් ඉන්නවා නෙ මගෙන් ඉගෙන ගන්න. හරි හරි කිසි දේකට බය වෙන්න එපා අනිවාර්යෙන් මේ පාඩම ඉවර කරනවා ඉක්මණින්ම. දැන් ඉතින් මේ පුංචි පාඩමක් නේ කියල දෙන්නේ. ඇත්තෙන්ම අමතර පාඩමක්.

අපේ අරමුණට තව ටික දවසකින් යමුකෝ. ඒත් ඉතින් පටන් ගත්තුවා ඉක්මණින් ඉවර කරන්න අමාරුයි නේ කියල නොදී. ඒ නිසා ඉගෙන ගන්න අයත් ඉගෙන ගන්න. මගෙන් ඕනෙ දෙයක් අහන්න. මට මතකයි ඔයාලා දාල තිබුණු කොමෙන්ට් එහෙම. ඒවාටත් බොහොම ස්තූතියි. ඒත් තරහ වෙන්න එපා ඒවට උත්තර නුදුන්නට. ආඩම්බර කම නෙවෙයි හොඳේ. වැඩ වැඩි කම තමා. අද ටිකක් නිවාඩු පාඩුවේ ගෙදරට වෙලා ඉන්න තියෙන දවසක්. මොකද සෙනසුරාදාවක් නිසා. කමක් නෑ. ගෙදර ඉන්න නිසා උගන්වන්න තියෙන එක තමයි ගොඩක් හොඳ. මොකද ටික දවසකින් පාඩම් කීපයක්ම කියල දෙන්න බැරි වුන නිසා. කට්ටියත් මම හිතුවාට වඩා උනන්දුයි නොවැ. මම හිතනවා මේවා වල තියෙන දේවල්, උගන්වන දේවල් ඉගෙන ගන්නවාය කියලා කරලා බලලාම.

හරි. අපි ඉගෙන ගත්තා තනි පේළියකින් style දාන්නේ කොහොමද කියලා ටැග් එකක. මගේ කලින් පාඩමෙන් මම කීවේ හැඩ වැඩ කර ගන්න පුළුවන් වැදගත්ම උප ඇට්‍රිබියුට් කීපයකුයි ඒවායෙ යොදන්න පුළුවන් අගයනුයි තමා. ඒත් අපි උදාහරණයක් කරේ නෑ. මේක ඉතින් ඕනෙම ටැග් එකකට පොදුයි කීව නේ. ඒ නිසා බය නැතිව body ටැග් ඇතුලෙ ලියන්න පුළුවන් ටැගයක් තොර ගන්න style පාවිච්චි කරන්න. මෙන්න මේ පහල තියෙන විදියටයි අපේ උදාහරණෙ මම කියල දෙන්නේ.
<font style="background-color:yellow; color:#0000ff; font-size: 20px; font-weight: bold; border: 2px red dashed; ">I love my country, Sri Lanka.</font>

ඕක පෙන්නන්නේ මෙන්න මේ පහල තියෙන විදියට. බලන්න. font ටැග් එකේ එක ඇට්‍රිබියුට් එකක්වත් පාවිච්චි නොකර style ටැග් එකෙන් විතරක් හැම වැඩේමත්, ඊට වඩා යමකුත් කර ගත්තු හැටි.

I love my country, Sri Lanka.

වල බලපුළුවන්කාර කම මෙතනින් නැවතෙන් නෑ. මේ තමයි ප්‍රබලත්වය වැඩිම ක්‍රමය style යෙදීමේ. ඒ කීවේ ටැග් එකක් ඇතුලේ style ඇට්‍රිබියුට් එකක styles ලබා දීම තමයි වෙන කොහේ style අපි දුන්නත් අවසාන වශයෙන් වැඩ කරන බලවත්ම ආකාරයේ styles යෙදීම. හැබැයි මේ ක්‍රමේ හරිම කරදරයි. මොකද අපිට එක වගේ තැන් කීපයක් තිබුණොත්, ඒ හැම තැනටම ගිහින් අතින්ම වෙනස් කර ගන්න වෙනවා ඒ හැම තැනක්ම.style වලින් ආවේ. ඒ ක්‍රමේ තමයි වඩාත්ම පාවිච්චි වෙන්නෙත්. ඒ වගේම ඊට සමාන මීළඟ ක්‍රමේ.

ඒ ක්‍රමේ තමයි, html ටැග් යුගලක් අතරේ වෙනමම අපේ වෙබ් පිටුවේ තැනක, කලින්ම අපිට තැන් තැන් වලට යොදා ගන්න පුළුවන් style ටික හදා ගෙන තියා ගන්න විදිය. මේකෙන් ලැබෙන ප්‍රයෝජනේ තමයි අපිට එක style එකක්, අපේ වෙබ් පිටුවේ ඕනෙම තැනක නැවත නැවත ලිවීමකින් තොරව පාවිච්චි කර ගන්න පුළුවන් වීම හරිම ලේසියෙන්ම. ඔන්න ඔය අපහසුව නැති කර ගන්න තමයි මීලඟට ඉගෙන ගන්න ක්‍රමේ.

ඒ ටැග සාමාන්‍යයෙන් ලියන්න ඕනේ head ටැග් යුගල අතරේ. නීතියක් නෙවෙයි. ඒ සාමාන්‍ය ක්‍රමේ. body ටැග් යුගල ඇතුලෙත් ලියන්න පුළුවන් ඕනෙ නම්. ඒ ටැග් එකේ නමත් style ම තමයි. යුගල ටැග් එකක්. <style></style>. මේ ටැග් යුගලට ඇට්‍රිබියුට් එකක් තියෙනවා විශේෂ. ඒ type කියන එක. ඒකේ අගය විදියට දෙන්න ඕනෙ, "text/css" කියන එක. ලියන්නේ
<style type="text/css" ></style> වගේ.

මේ ටැග් යුගල අතරේ styles ලියන එක තමා මීලඟ කාරණේ නැත්නම් පාඩම වෙන්නේ. ඒකත් ලොකු කතාවක් නෙවෙයි. නීති රීති ටිකක් තියෙනවා ඉගෙන ගන්න. ඒවා ඉගෙන ගත්තමයි, style එකක් අපේ දෙයකට යොදා ගන්නෙ කොහොමද කියල දැන ගත්තම css පාඩමත් ඉවරයි. ලියන උප ඇට්‍රිබියුට් එහෙම්ම ම තමයි ලියන්නෙත්. ඒව කලින් පාඩමේදි කියල දුන්න නේ.

PHP කරා යමු - 22 (CSS)

අපි දැන් ටක් ගාලා style ඇට්‍රිබියුට් එකේ එන, නිතර පාවිච්චි වෙන විදියේ උප ඇට්‍රිබියුට් කීපයක් එක දිගට අත් හදා බලමු. පහල තියෙන්නේ ඒවා මොනාද කියලාත්, ඒවට යොදන්න පුළුවන් අගයන් මොනාද කියලාත් තමයි. අහ්! ඒවා ලියන හැටිත් මම කියල තියෙනවා.


background-color
පසුබිමේ වර්ණය / පාට.
දෙන අගයන් තමයි කලින් පාඩ්මකදී අපි ඉගෙන ගත්තු වර්ණ අගයන් දෙන ආකරයෙන් දෙන අගයන්.
උදා: background-color: yellow

background-image
පසුබිමට යොදන පිංතූරය.
පිංතූරයක් තියෙන තැනට ලිපිනය. දෙන්න ඕනෙ මෙන්න මේ විදියට.
උදා: background-image: url(image.jpg);

background-position
පසුබිම් පිංතූරයේ පිහිටුම.
දෙන අගයන් තමයි bottom, center, left, right හෝ top කියන අගයන්.
උදා: background-position: top;

background-repeat
පසුබිම් පිංතූරය කොයි අතටද එක දිගට යා යුත්තේ කියන එක.
repeat-x (x අක්ශය දිගේ හරස් අතට), repeat-y (y අක්ශය දිගේ සිරස් අතට
), no-repeat (විහිදුමක් නැති අවස්තාව) .
උදා: background-repeat: repeat-x;

background
ඔය පසුබිම සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එක දිගට දෙන්න පුළුවන් තනි උප ඇට්‍රිබියුට් එක.
කලින් කියපු අගයන් දෙන්න පුළුවන් වෙන්නේ හිස් තැනකින් වෙන් කරලා එක දිගට ලියමින්.
උදා: background:#FF0000 url(image2.jpg) left repeat-x;

color
අකුරු වල පාට.
දෙන අගයන් තමයි කලින් පාඩ්මකදී අපි ඉගෙන ගත්තු වර්ණ අගයන් දෙන ආකරයෙන් දෙන අගයන්.
උදා: color: #FF0000;

height
උස.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: height: 100px;

width
පළල / දිග.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: width: 550px;

top
ඉහල මායිමේ ඉඳන් කොච්චර දුරකින් පහලට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: top: 200px;

left
වම් මායිමේ ඉඳන් කොච්චර දුරකින් දකුණු අතට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: left: 200px;

right
දකුණු මායිමේ ඉඳන් කොච්චර දුරකින් වම් අතට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: right: 200px;

bottom
පහළම මායිමේ ඉඳන් කොච්චර දුරකින් ඉහලට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: bottom: 200px;

font-size
අකුරු වල ප්‍රමාණය ලොකුද පොඩිද කියන එක අගයක් විදියට දීම.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: font-size:12px;

font-style
අකුරු වල හැඩය ඇද වෙලාද නැද්ද කියලා.
දෙන අගයන් තමයි italic, normal හෝ oblique කියන අගයන්.
උදා: font-style:italic;

font-weight
අකුරු වල මහත ප්‍රමාණය, අකුර කොච්චර තද වෙලා, තද අකුරින් පෙන්විය යුතුද වග.
උදා: font-weight:bold;

font-family
අකුරු වර්ගය / වර්ග මොකද්ද කියන එක.
එක අකුරු ජාතියක් දෙන්නත් පුළුවන්. නැති නම්, අකුරු ජාති කීපයක්ම කොමාවකින් වෙන් කර කර දෙන්න පුළුවන්. කීපයක් දෙන එකේ අදහස තමයි, එක අකුරු ජාතියක් නැති වුනොත් අපේ කොම්පියුටරයේ අනික හරි පාවිච්චි කරන්න කියන එක.
උදා: font-family:Verdana, Geneva, sans-serif;

font
කලින් වගේම අකුරු සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එකට දෙන්න පුළුවන් උප ඇට්‍රිබියුට් එක
උදා: font: 12px bold italic Verdana;

border
යම කිසි දෙයක වටේ දාරය හැඩ කර ගන්න යොදා ගන්න උප ඇට්‍රිබියුට් එක. මේකත් දාරයක් සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එක දිගට දෙන්න පුළුවන් උප ඇට්‍රිබියුට් එකක්. හිස් තැනකින් වෙන් කර කර දෙන අගයන් වෙන්නේ, දාරයේ පාට, දාරයේ මහත, දාරයේ විදිය වගේ දේවලුයි.
උදා: border: #000000 1px solid;

දාරයේ විදිය, නැත්නම් හැඩයට දෙන්න පුළුවන් විවිධ ආකාර තමයි මේ.
solid - සාමාන්‍ය ඉරක්
dashed - කඩ ඉරක්
dotted- තිත් ඉරක්
double - ද්විත්ව ඉරක්
thick - මහත ඉරක්
thin - සිහින් ඉරක්

මේ වගේ දාර වර්ග හතරක් තියෙනවා. ඒ උඩ, යට, වම් පස හා දකුනු පස දාර විදියට. පහලින් තියෙන ඒවාත් පොදු උප ඇට්‍රිබියුට් ගනයට වැටෙන උප ඇට්‍රිබියුට් හතරක්, ඒ දිසා හතරේ දාර හැඩ කර ගන්න තියෙන.
border-left, border-right, border-top, border-bottom

ඒ එක් එක් දිසාවේ දාර වලට පාටක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-color, border-right-color, border-top-color, border-bottom-color

ඒ එක් එක් දිසාවේ දාර වලට මහතක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-width, border-right-width, border-top-width, border-bottom-width

ඒ එක් එක් දිසාවේ දාර වලට විදියක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-style, border-right-style, border-top-style, border-bottom-style

ඉහල තියෙන දාර සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් දෙන්නේ border ඇට්‍රිබියුට් එකට අගයන් දෙන විදියේ උදාහරණයේ විදියටයි.

PHP කරා යමු - 21 (CSS)

හැම ටැග් එකේම තියෙන style ඇට්‍රිබියුට් එක ගැන අපි මුලින්ම දැන ගමු. මේ විදියෙන් style එකක් ටැග් එකකට දෙනවට අපි කියන්නේ "inline styles" කියලා. ඒ කියන්නේ තනි පේලියකින් style දෙන විදිය. මේ ක්‍රමෙත් හරි ප්‍රසිද්ධයි. ඒත් පාවිච්චි කරන්නෙ ගොඩක් කලාතුරකින්. නැතුවමත් නෙවෙයි. මොකද මේ ක්‍රමේ පාවිච්චි කරාය කියලා අපි බලාපොරොත්තු වෙන පහසුව අපිට ලබා ගන්න එක ගැන ගැටළුවක් මතු වෙනවා.

සුපුරුදු විදියටම ඇට්‍රිබියුට් එක ලියන්නේ අනික් ඇට්‍රිබියුට් වලින් වෙන් වෙන්න හිස් තැනක් තියලා style කියලා ටයිප් කරලා සමාන ලකුණකින් එහා පැත්තේ උදෘත පාඨ ඇතුලේ අගයන් දෙන විදියට පහල ලියල තියෙනවා වගේ.
style=""

මේකට අගයන් දෙන විදිය ටිකක් අමතුයි. මොකද මේකෙදි අපිට අගයන් දෙන්න සිද්ධ වෙන්නේ උප ඇට්‍රිබියුට් හැටියටයි. ඒ කීවේ sub attributes විදියටයි. මොකද මේ style කියන ඇට්‍රිබියුට් එක තවත් ඇට්‍රිබියුට් ගණනාවක් පාවිච්චි කර ගන්න පුළුවන් ඉහල මට්ටමක ඉන්න ඇට්‍රිබියුට් එකක්.

අගයන් විදියට දෙන උප ඇට්‍රිබියුට් වලටත් අගයන් තියෙනවා. අන්න ඒ නිසයි ඒවා උප ඇට්‍රිබියුට් විදියට හඳුන්වන්නේ. ඔය වගේ ඉතින් උප ඇට්‍රිබියුට් ලියන හැටිත්, ඒවාට අගයන් සපයන හැටිත් අපි ඉගෙන ගන්න ඕනෙ. ඒ මෙන්න මෙහෙමයි.

style ඇට්‍රිබියුට් එක ඇතුලේ, ඒ කියන්නේ ඒකේ අගයන් ව්දියට උප ඇට්‍රිබියුට් දෙන්න ඕනෙ ඉංග්‍රීසි කුඩා අකුරින්. සිංහලෙන් කීවොත් simple letters වලින්. ඒ කියන්නේ styles අගයන් හැම තිස්සෙම case sensitive කියලා. උප ඇට්‍රිබියුට් එකකින් තවත් උප ඇට්‍රිබියුට් එකක් වෙන් කරන්නේ සාමාන්‍ය ඇට්‍රිබියුට් දෙකක් වෙන් වෙන්ව ලියන්න හිස් තැනක් තියලා නෙවෙයි. උප ඇට්‍රිබියුට් දෙකක් වෙන් කරන්නේ ";" තිත් කොමාවකින් නැත්නම් semi-colon එකකින්. උප ඇට්‍රිබියුට් වලට අගයන් දෙන්නේ සමාන ලකුණකින් නෙවෙයි, තිත් දෙකකින් ":" නැත්නම් colon එකකින් එහා පැත්තේ. එකම style ඇට්‍රිබියුට් එක ඇතුලේ එකම උප ඇට්‍රිබියුට් එක දෙවරක් පාවිච්චි කරන්න බෑ. ඔන්න ඕවා තමයි style ලියද්දි පාවිච්චි කරන්න ඕනි නීති. මේවා රීති නෙවෙයි. මොකද කැඩුවොත් වැඩ නොකරන නිසා.

ඔය කීව ටික උදාහරණයකින් ලියලාම දැන ගමු කොහොමද ලියන්නේ කියලා හරියටම.
style="subattribute1 : value; subattribute2 : value; "

ඔන්න එහෙනම් අපි style ලියන හැටිත්, ඒව ඇතුලේ උප ඇට්‍රිබියුට් ලියන විදියයි, ඒවට අගයන් දෙන හැටිත් ඉගෙන ගත්තා. මීලඟ පාඩමෙන් බලමු ඒ උප ඇට්‍රිබියුට් වර්ග මොනාද කියලත්, ඒවාට දෙන අගයන් මොනාද කියලත්. නොතේරෙන දෙයක් තියෙනවා නම් ඔයාලට කොමෙන්ට් එකකින් දැන අහ ගන්න පුළුවන්.

PHP කරා යමු - 20 (CSS)

ගොඩ කාලෙකට පස්සේ ඔන්න ආයෙත් මම ආව ඔයාලට පාඩම කියලා දෙන්න. අපි ගිය පාර පාඩමෙන් ඉගෙන ගත්තේ වගු අඳින එක නොවෑ. දැන් අපි HTML වලට පොඩි විරාමයක් දෙමු. අපි දැනටමත් HTML වල ගොඩක් දේවල් ඉගෙන ගෙන. ඒ නිසා මම කලින් වතාවෙදි කියපු අපේ "styles" හැඩ කාරය ගැන කියල දෙන්නයි මම මේ හදන්නේ. මේක HTML වගේම ගොඩක් වැදගත් පාඩමක් ඉගෙන ගන්න කෙනෙකුට නම්. මොකද අපි HTML ටැග් අම්බානක් දාල හදපු දේවල් මේ පාඩමෙන් පස්සේ අඩු වෙන නිසා. අපිට වෙබ් පිටු නිර්මාණය කර ගනිද්දී අප්‍රමාණ උදව්වක් කරන හැඩ කිරීමේ ශිල්පයක් තමා මේ styles කියන්නේ. ඒ ගැන ඉගෙන ගන්න ඔයාලා ලෑස්තියි නේද?

"CSS" නැත්නම් "styles" වලින් අපේ වැඩ බොහෝමයක් ලේසි කරනවා කියලා ඔයාලට කීවොත් ඒක නිවැරදියි. අපිට මොනා හරි දෙයක්, ඒ කීවේ වගුවක් හරි, වචන ටිකක් හරි, ඡේදයක් හරි, ඔය මම කියලා දීපු හැම ටැග් එකකින්ම පෙන්වන්න පුළුවන් දේවල් CSS වලින් හරි ලේසියෙන්ම හැඩ වැඩ කර ගන්න පුළුවන් වෙනවා. මොකද එයා අපිට කරල දෙන්නේ තැන් කීපයක අපි නිතර නිතර යොදන දේවල් එක තැනක එක පාරක් හඳුන්වලා දුන්නට පස්සේ ඇති තරම් වෙන වෙන තැන් වලදී පාවිච්චි කර ගන්න පුළුවන් වගේ දෙයක්. ඒක CSS වලින් අපිට ලැබෙන ලොකු වාසියක් වගේම කාලය ඉතුරු කිරීමකුත් වෙනවා. අද කාලෙ හැම දෙයක්ම කාලෙන් මනිද්දි සල්ලි වලිනුත් ඉබේම මිනුමක් ලැබෙනව නෙ. ඒ නිසා කාලෙ නාස්ති නොකර ගෙන ටක් ගාල වෙබ් පිටුවක් හෝ අඩවියක් ලස්සනට හදා ගන්න ලැබුනොත් ඒක වටිනවා ගොඩක්.

හරි, පම්පෝරි ගැහුවා මදැයි. අපි දැන් පාඩමට බහිමු. ඇත්තම කියනවා නම් මම ඔයාලට දෙයක් හැංගුවා. ඒක ගුරු මුශ්ටියක් නෙවෙයි. ඒක නොකියාම හිටියේ මේ වෙලාව එනකම් ම තමා. ඒ තමා අපි ඉගෙන ගත්තු ටැග් වල තියෙන ඇට්‍රිබියුට් එකක් ගැන. ම්ම්.. හරියටම කීවොත් හැම ටැග් එකකම අනිවාර්යෙන්ම තියෙන පොදු ඇට්‍රිබියුට් එකක්. ඒක අපි අනිවාර්යෙන්ම ඉගෙන ගන්න ඕන වෙන්නේ අපේ මේ CSS හෙවත් styles වලට මූලික අඩිතාලම ඒකෙන් වැටෙන නිසා වගේම, මුල්ම පියවර ඒ පොදු ඇට්‍රිබියුට් එකෙන් තැබෙන නිසා. ඒ ඇට්‍රිබියුට් එක වෙන මොකක්වත් නෙවෙයි, "style" කියන ඇට්‍රිබියුට් එකයි. ඒ නමින් තියෙන ඇට්‍රිබියුට් එක අපිට ඕනෙම ටැග් එකක සාමාන්‍ය විදියටම පාවිච්චි කර ගන්න පුළුවන්. හැබැයි, හැම ටැග් එකක්ම කීවට හැම එකේම නෙවෙයි. HTML ටැග් වලින් ටැග් ජාති 98% කම වගේ මේ ඇට්‍රිබියුට් එක අන්තර්ගතයි. අර 2% ට අයත් වෙන ටැග් කීපයක් තමා, "html, head, title, meta, style, script" කියන්නේ. මේවායෙන් සමහරක් අපි පසුවට ඉගෙන ගන්න නිසා අළුත්ය, කියා නොදුන්නාය කියලා පසුතැවිලි වෙන්න එපා. යථා කාලයේදී තථා අයුරින් ඒව දැන ගන්න ලැබෙයි.

ඔයාලට මතකද අපි කලිනුත් styles පාඩමක් ඉගෙන ගත්තාය කියලා? ඇයි අපි අර කළේ පාට ගැන පාඩමක්. අන්න ඒක. ඒ පාඩමෙන් තමයි අපිට අවශ්‍ය වුනොත්පාටක් අරන් දා ගන්න වෙන්නේ. ඒකේ කියල දුන්න නේ පාට හදන හැටි එහෙම. වෙබ් පිටු නිර්මාණය කරද්දී අපිට ඒ පාට වල අගයන්, කේත තමා යොදා ගන්න වෙන්නේ කොහේදිත්. ඒ කියන්නේ අපි නොදැනුවත්වම styles ගැන පොඩ්ඩක් ඉගෙන ගෙන. ඔව් ඇත්තෙන්ම. පහු ගිය පාඩම් වල තිබුණු දේවල් මතක නම් ඒක මහා ලොකු දෙයක් නෙවෙයි. අමතක නම් ඒ පාඩම බලා ගන්න පුළුවන් මේ ලින්ක් එකෙන්.

කෙටි පාඩමක් විදියට කියනවා නම්, අපිට style වලදී යොදා ගන්න පුළුවන් දිග, පළල වගේ මිනුම් ගන්න ඒකක කීපයක් ඉගෙන ගන්න පුළුවන්. මේවා styles පාවිච්චි කරද්දි නම් හරිම ප්‍රයෝජනවත්, අපිට ඕනෙ කරන ඒකකයකින් (දිග මැනීම සම්බන්ධයෙන්) මිනුමක් දී ගන්න. කිලෝමීටර විසි පහ අපි සංකේතයෙන් දෙන්නේ "25km" කියලා වගේ, ඒකක භාවිතයක් ගැනයි මේ කියන්නේ. හැබැයි කිලෝමීටර (km) කියලා ඒකකයක් නම් CSS වලදි ඇත්තේ නෑ. අපි එක දිගට ඒ ටික කියාගෙන යමු. අපි යම් දිගක්, පළලක් දෙනවා නම් දිය යුත්තේ පහළ තියෙන ඒකක, යම් කිසි ඉලක්කමක් එක්ක, ඒ ඉලක්කම පිටි පස්සෙන් ලියලායි. ඒවා කීපයකුත්, ඒවායේ තේරුණුත් දැන ගමු දැන්.

% - ප්‍රතිශතයක් විදියට අගයක් දෙනවා නම්. (උදා: 25%).
mm - මිලි මීටර (millimeter) විදියට අගයක් දෙනවා නම්. (උදා: 25mm).
cm - සෙන්ටි මීටර (centimeter) විදියට අගයක් දෙනවා නම්. (උදා: 25cm).
in - අඟල් (inch) විදියට අගයක් දෙනවා නම්. (උදා: 25in).
em - දැනට තියෙන අකුරු වල ප්‍රමාණය. (උදා: 2em - දැන් අකුරු ප්‍රමාණය වගේ දෙගුණයක් විශාල.).
ex - දැනට තියෙන අකුරු වල උස ප්‍රමාණයට වඩා අඩක / භාගයක ප්‍රමාණය. (උදා: 1ex).
pt - point (උදා: 10pt).
px - කොම්පියුටර තිරයේ, මොනිටරයේ තිතක ප්‍රමාණය. pixel (උදා: 100px).