CSS පාඩම් අංක 1 (වෙබ් අඩවි නිර්මාණය)

හැඳින්වීම :

   හොඳයි හැමෝටම ආයුබෝවන් මම Zisco Ramon. මං මේ උත්සහ කරන්නේ website නිර්මාණය  ඔයාලට ගෙන එන්න.  ඉගෙන ගන්න ලේසි වගේම ආස හිතෙන දේවල් වලින් පටන් ගත්තාම ඕනෑම විෂයක් අපට ලේසියෙන් අල්ල ගන්න පුළුවන්. ඉතින් මම හිතනවා Programing කියන්නේ වෙනවම විෂයක්. ඒ විෂයේ එක තැනක් තමා web development කියන්නේ.. CSS : - (Cascading Style Sheet)

ඉතින් ඔයාලා HTML ඉගෙන ගෙන ඇති කියලා හිතාගෙන තමයි මම CSS පාඩම් මාලාව මේ විදිහට ගෙන එන්නේ. සමහර විට කෙනෙක් මුල ඉඳලම website නිර්මාණය කරන්න හදනවා නම්, මම ඔයාල ගෙන් ඉල්ලනවා මුලින්ම HTML ඉගෙන ගෙන පස්සේ CSS වෙත එන්න කියලා. හරි මං  හිතන විදිහට ඔයාලා දැනටමත් අහලා ඇති CSS කියන්නෙ මොනවද කියලා. මුලින්ම කියන්න ඔනේ.. CSS කියන්නෙ Website Develop කරන්න අවශ්‍ය කරන තවත් එක Language එකක්. 

හොඳයි ඇයි අපි CSS ඉගෙන ගන්න ඕනේ...

ඒකට උත්තරේ තමයි, ඔයාල දැකල තියෙන ඕනෑම වෙබ් පිටුවක් නිර්මාණය කරන්න අවම Languages 3ක් භාවිතා කරනවා. ඉන් එකක් තමා CSS කියන්නේ.. අනෙක් ඒවා (HTML , JS). ඉතින් HTML ඉගෙන ගත්ත කෙනෙක් ඊළගට ඉගෙන ගන්න ඕනේ CSS language එක. HTML වලින් කරන්නේ වෙබ් පිටුවට අදාළ Structure එක ගොඩනඟන එක. එතකොට CSS වලින් තම ඔයා ඒ හදාපු Structure එක ලස්සන කරලා දෙන්නේ.

හරි CSS programing කරන්න අවශ්‍ය කරන කළමනා මොනවද කියල දැන් බලමු. ඇත්තම කියනවානම් ඕනේ කරන්නේ ඔයාගේ PC  Notepad එක විතරයි. කෙනෙක් අහන්න පුළුවන් ඇයි ඊට වඩා හොඳ Platform එකක් භාවිතා කරන්න බැරිද කියලා. ඇත්තම කියනවානම් පුළුවන්. ඒ වගේ Editors ඕන තරම් Free වුනත් ගන්න පුළුවන්. හැබැයි ඒ වගේ text editor එකක් භාවිතා කරද්දී තියෙන ගැටලුව තමා, අපි programing වලදී කරන වැරදි සමහර වෙලාවට Automaticaly හරිගස්සල දෙනවා. ඔයා ප්‍රෝග්‍රෑම් කරන්න මේ වෙනකොටත් දන්නවා නම් ඒක ප්‍රශ්නයක් නෑ.. එත් නොදන්න ඔයා ඒ වගේ එකක් භාවිතා කරාම වැරැද්ද තේරුම් ගන්නේ නෑනේ කවදාවත්. ඒ හින්ද මං නම් recomand කරන්නේ මුලදී notepad එක පාවිච්චි කරන්න කියලා.

හරි ඔක්කොටම කලින් අපි දැනගෙන ඉමු මේ CSS coding ලියන්නේ කොහෙටද කියලා.. ඔයාලට මතකද html page එකක් save කරන කොට .html කියලා extension එකක් දුන්නා. අහ්.. අන්න ඒ වගේ CSS files save කරන කොටත් .css කියලා extension එකක් දෙන්න ඕනේ.. වෙනවම css text file එකක් හදනවා නම්.. (මේ ගැන වැඩි දුර ඉස්සරහට..) ඒ වගේම අපිට පුළුවන් අපි ලියන css codes තැන් කිහිපයක code කරන්න.
1. External style sheet (.css)
2. Internal style sheet ( HTML පිටුව ඇතුලෙම)
3. Inline style (HTML පිටුව ඇතුලෙම) 

හොඳයි අපි මුලින්ම ඉගෙන ගමු Inline Style Sheet එකක් වැඩ කරන්නේ කොහොමද, ඒවා code කරන්නේ කොහොමද කියලා. දැනට හිතන්න ඔයාලට html page එකක් තියෙනවා කියලා.. මොකද css code ලියන්නේ අපි html page එකක් ලස්සන කරගන්න නේ... මම සරල page එකක් හදලා තියෙනවා ඔයාලට පේනවා ඇති.

දැන් ඔන්න ඔය පෙන්න තියෙන එක run කරාම මේ වගේ නේ පෙන්නේ..

අපි css පාවිච්චි කරලා දැන් කරන්න යන්නේ මේ normal html page එක ලස්සන කරන එක.. හොදට මතක තියා ගන්න අපි තාම ඉන්නේ Inline Style කියන මාතෘකාවේ.. හොදේ.. 

හරි මං දැන් මගේ html page එකට style කරන්නයි යන්නේ.. මට ඕනේ <h1> කියන  tag එක style කරන්න මේ විදිහට, font එකේ  colour එක  red. හරි ඔයාලට දැන් පෙන්නේ මන් වෙනස් කරපු style එක..

ඊළඟ කොටසින් ආයේ හම්බ වෙමු.. ප්‍රශ්න තියේ නම් අනිවාරෙන් කියන්න... පටන් ගත්තේ අද නිසා පුංචි පුංචි අඩු පාඩු ඇති... සමාවෙන්න.එහෙම වුනොත්..
මම Zisco..