CSS සිංහලෙන් -දෙවන කොටස

How to add CSS

ක්‍රම තුනකට CSS , HTML documents වලට ඇතුලත් කරගනී .

Inline CSS ,
Internal CSS .
External CSS .

Inline CSS

The Inline CSS මහින් styles sheets හි වාසි අඩු කරයි.

Inline style මගින් codes ලිවීමට , අදාල HTML Element සමඟ “ style " යන CSS Code එක ලිවිය යුතුය.

Example: < p style = " color : blue ; text - align : center ; " > HELLO WORLD < / p > '

Style ' සහ ඊට පසු යොදන • ලකුන අතර දි ඊට පසු යොදන " ලකුනේ සිට පලමු Property එකට : ( දෙතිත ) ද value එකට ( තිත්කොමාව ) තෙක් spaces නොතබයි . Declarations අතර spaces තබයි . ඊට පසු අවසන් Declaration එකට " සහ > අතර Spaces ⁣නොතබයි .

< html > 
< head > 
< title > Inline CSS < / title > 
< / head > 
< body > 
< p style = " color : blue ; text - align : center ; " > HELLO WORLD < / p > 
< / body > 
< / html >

Internal CSS

මෙහිදී < head > සහ < / head > තුල < style > හා එය අවසන් කිරීමට ලෙස < / style > ලියයි . < style > < / style > තුල CSS Codes ලිවීමට පමනක් < > මෙම සළකුනු වෙනුවට { } යොදයි .

< IDOCTYPE html > 
< html > 
< head > 
< style > 
body {
  background - color : yellow ; 
}
  h1 { 
  color : red ; 
  margin - left : 40px ; 
}
< / style > 
< / head > 
< / body > 
  < h1 > HELLO WORLD < / h1 > 
  < p > This is my first web page . < / p > 
< / body > 
< / html >

External CSS

මෙහිදී CSS File එක වෙනම ගොඩනගා එම CSS file එක HTML File එකට Link කරයි .

< html > 
< head > 
< link rel = " stylesheet " type = " text / css " href = " mystyle.css " > 
< / head > 
< / body > 
	< h1 > This is my first web page < / h1 > 
< / body > 
< / html >

මෙම external css file එක තුල HTML tags කිසිවක් නොතිබිය යුතුය.

mystyle.css

body { 
    background - color : Royal Blue ; 
} 
    h1 {
    color : navy ; 
    margin - left : 20px ; 
    }

තවද CSS : 
1. Inline CSS 
2. Internal CSS with ID selector 
3. Internal CSS with Class selector 
4. External CSS with ID selector 
5. External CSS with Class selector ලෙස කොටස් වලට බෙදේ.

Internal CSS with ID selector

මෙහිදී < head > < / head > තුල < style > < / style > ලියන්න . එම style > < / style > තුල # සමඟ අවශ්‍ය html element එක ලියන්න. අවශ්‍ය පරිදි එම html element එකට අංක ලබා දෙන්න පසුව < body > < / body > තුල web පිටුවෙහි දර්ශනය විය යුතු දෙය ලියන්න .

<html> 
<head> 
<style>
#p1 {
    color:blue; text-align:right; 
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
   }
#p2 { 
    color:black; text-align:left; 
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
   } 
</style> 
</head> 
<body> 
    <p id="p1"> THE TEXTS THAT YOU WANT TO DISPLAY. </P> 
    <p id="p2"> THE TEXTS THAT YOU WANT TO DISPLAY. </P> 
</body>
</html>

Internal CSS with Class selector .

මෙහිදී < head > < / head > තුල < style > < / style > ලියන්න . එම < style > < / style > තුල ' . 'සමඟ අවශ්‍ය html element එක ලියන්න. අවශ්‍ය පරිදි එම html element ඒකට අංක ලබා දෙන්න. පසුව < body > < / body > තුල web පිටුවෙහි දර්ශනය විය යුතු දෙය ලියන්න.

<html> 
<head> 
<style>
.p1 {
    color:blue; text-align:right; 
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
   }
.p2 { 
    color:black; text-align:left; 
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
   } 
</style> 
</head> 
<body> 
    <p id="p1"> THE TEXTS THAT YOU WANT TO DISPLAY. </P> 
    <p id="p2"> THE TEXTS THAT YOU WANT TO DISPLAY. </P> 
</body>
</html>

External CSS with ID selector .

මෙහිදි CSS File එක වෙනම ගොඩනගා එම CSS file එක HTML File එකට Link කරයි. මෙම external.css file එක තුල HTML tags කිසිවක් නොතිබිය යුතුය. # සමග අවශ්‍ය html element එක ලියන්න. අවශ්‍ය පරිදි එම html element එකට අංක ලබා දෙන්න.

#p1{
    color:blue; text-align:right;
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
} 
#p2{ 
    color:black; text-align:left; 
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
}

මෙය කැමති නමක් සමග .CSS ලෙස Save කරන්න . මම මෙය my.css ලෙස Save කරනවා . පසුව වෙනත් note pad එකක් open කර < head > < / head > තුල css link ඓක ලියන්න . < body > < / body > තුල web පිටුවෙහි දර්ශනය විය යුතු දෙය ලියන්න

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="my.css"> 
</head> 
<body> 
<p id="p1"> THE TEXTS THAT YOU WANT TO DISPLAY. </p> 
<p id="p2"> THE TEXTS THAT YOU WANT TO DISPLAY. </p> 
</body> 
</html>

External CSS with Class selector .

මෙහිදී CSS File එක වෙනම ගොඩනගා එම CSS file එක HTML File එකට Link කරයි. මෙම external css file එක තුල HTML tags කිසිවක් නොතිබිය යුතුය. සමඟ අවශ්‍ය html element එක ලියන්න . අවශ්‍ය පරිදි එම html element එකට අංක ලබා දෙන්න.

.p1{
    color:blue; text-align:right;
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
} 
.p2{ 
    color:black; text-align:left; 
    background-color:yellow; 
    border-style:solid; border-width:5px; 
    border-color:green; width:500px; 
}

මෙය කැමති නමක් සමඟ.CSS ලෙස Save කරන්න. මම මෙය mycss2.css ලෙස Save කරනවා. පසුව වෙනත් note pad එකක් open කර < head > < / head > තුල css link ඒක ලියන්න. < body > < / body > තුල web පිටුවෙහි දර්ශනය විය යුතු දෙය ලියන්න.

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mycss2.css"> 
</head> 
<body> 
<p id="p1"> THE TEXTS THAT YOU WANT TO DISPLAY. </p> 
<p id="p2"> THE TEXTS THAT YOU WANT TO DISPLAY. </p> 
</body> 
</html>

Tutorial Created by Kalani Imanthika

CSS සිංහලෙන් -දෙවන කොටස

Recent Posts

コメント