COVID-19 වයිරසයෙන් ආරක්ෂා වීමට ඔබට කලහැක්කේ ඉවසීමෙන් සෞඛ්‍ය උපදෙස් අනුගමනය කරගෙන නිවසටම වී සිටීමයි. ඒ අතර ඔබේ දැනුම වර්දනය කරගැනීමට මෙම වෙබ් අඩවිය පිටිවහලක් කරගන්න. | මෙම වෙබ් අඩවියට අලුතින් එකතු වන සාමාජිකයින්ව Activity Page එක තුලින් Welcome Message එකක් එක් කරමින් පිළිගන්න.

Working with CSS ( part 01 ) on HTML

CSS

Cascading Style Sheet

අපි සාමාන්‍යයෙන් css යොදා ගන්නේ web page එකක් ලස්සන කරගන්න. CSS භාවිතා කරන ක්‍රම 3ක්  තියනව.

(1)External style sheet

(2)Internal Style sheet

(3)inline style


මේ තියෙන්නේ css syntax එක

Selector (property : value)


Internal Style sheet

හරි බලමු මොනවද Internal Style sheet කියන්නේ කියල ඔයාට පුළුවන් මේකේදී ඔයාට ඕන css code ටික ඔයාගේ html code තියන page එකේම දෙන්න ඒ කියන්නේ. පහල තියනව වගේ දෙයක්

<!DOCTYPE html>
<html>
<head>
<title>Online Editor</title>
<style>
h1 {color:blue;} 
p {color: yellow;} 
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<h1>my lesson </h1>
<br>
<p>style sheet </p>
</body>
</html>


මෙතනදී ඔයාට බලාගන්න පුළුවන් <style > කියල tag එකක් තියෙනවා අපි ඒ tag එක ඇතුලේ තමයි css code එක ලියන්නේ. h1 {color:blue;} ඔය කෝඩ් එකට අනුව ඔයාගේ web page එකේ h1 කියන tag එක යටතේ තියන හැම දෙයක්ම නිල් පාටින් බලාගන්න පුළුවන්. මේක ඇත්තටම ලේසි ඔයාගේ web page එකේ line ගොඩක් තියෙනවා නම් ඔයාට හැම ලයින් එකකටම පාට size එක font style එක වගේ දේවල් දෙන්න ගියහම සංකීර්ණ වෙනව මොකද ටික දවසක් ගියාම ඔයාටත් හොයා ගන්න අමාරු වෙනව ඒක හින්දා ඔයා css වගේ දෙයක් යොදා ගන්න එක ලේසි. p {color: yellow;} මේකෙදිත් ඔයාගේ web page එකේ p කියන tag එක යටතේ තියන ඔක්කොම වගේ කහ පාටින් බලාගන්න පුළුවන්. </style > ඕක තමයි closing tag එක. ඔයාට ඔය style කියන css ටික html කියන opening tag එකයි closing tag එකයි ඇතුලේ ඕනම තැනක දෙන්න පුළුවන් ඒත් අපි සාමාන්‍යයෙන් ඕක head tag එක ඇතුලේ තමයි ලියන්නේ.


Tagged:
AdminNaveen Ranasinghe
Sign In or Register to comment.