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 එක ඇතුලේ තමයි ලියන්නේ.
