Skip to content

Working with CSS ( part 01 ) on HTML

Damith98kumaraDamith98kumara
edited April 2020 in Information and Communication Technologies

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

Screenshot_20200401_112256.jpg


Tagged:
Sign In or Register to comment.