CSS සිංහලෙන් -පළමු කොටස

CSS හැදින්වීම

CSS යනු කුමක් ද ?

• HTML Tags නිර්මානය කිරිමට CSS යොදාගනී.

• අන්තර්ජාලයෙ web අඩවී සැදීමට පුළුල්ව යොදා ගන්නා භාෂාව වන්නේ CSS ය.

• CSS බොහෝ කාර්යන් සඳහා කාලය ඉතිරි කරයි. CSS වලට පුළුවන් එකවර බොහෝ web පිටුවල සැලසුම් පාලනය කිරීමට..

CSS ඉගනීමේ වාසි .

• අනර්ග තත්වයේ web අඩවි නිර්මානය කිරීම.

• web designer ( software engineer ) web අඩවි නිර්මාණය කරන්නෙක් වීමට හැකිවීම. web අඩවිය පාලනය කිරිමට හැකිවීම.

• අනෙක් web අඩවි නිර්මානය කරන භාෂා ඉගනගැනීමට පහසු වීම.

CSS Syntax . ( CSS Codes )

CSS ක්‍රමලේකනයේදී අනුගමනය කලයුතු නීති මාලාව ප්‍රධාන කොටස් දෙකකි . එනම් selector සහ declaration block ලෙසිනි.

Selector යනු ඕනෑම HTML tag එකකි. like ( examples ) < h1 > , < title > < table > etc.

Declaration block එකෙහි declaration එකක් හෝ කිහිපයක් තිබිය හැක . Declarations එකිත් එක තිත් කොමාව ( semicolons මගින් වෙන් වේ . ඉහත උදාහරනයට අනුව එහි declarations දෙකකි. එනම්,

• color : red ;

• font - size : 12px ;

Property එකක් කියල කියන්නෙ HTML element ( tag ) එකකට .

Value එකක් කියල කියන property එක අර්ථගතවන දෙය

Example

p{
color : green
text-align: left;
}

• p යනු CSS selector එක වේ. < p> ) .

• color යනු property ද, සහ green value වේ.

• text - align යනු property ද, left value වේ.

CSS Selectors

CSS stylesheet එක ලිවීමට Selectors ආකාර තුනක් භාවිතා කරයි .

• CSS Element Selector

• CSS ID Selector

• CSS Class Selector

CSS Element Selector

Element selector යනු HTML elements , CSS වලින් සාමාන්‍යය ආකාරයට ලියන ක්‍රමය වේ .

ඔබට ඕනෑම HTML elements , CSS වලින් පහත ආකාරයට තෝරාගත (select කල) හැක.

Example : < p > , < body > , < hl > .

< ! DOCTYPE html > 
< html > 
< head > 
< style > 
P {
    text - align : center ; 
    color : blue ; 
}
< / style > 
< / head > 
    < body > 
    < p > This style will be applied on every paragraph . < / p >                                                                          < p id = " paral " > Me too ! < / p > < p > And me ! < / p > 
< / body > 
< / html >

CSS Id Selector

hash character (#) භාවිතාවේ.

example :

< ! DOCTYPE html > 
< html > 
< head > 
< style > 
* paral {
text - align : center ;
color : red ;
}
< / style > 
< / head > 
< body > 
    < p id = " paral " > Hello World ! < / p > 
< / body > 
< / html >

CSS Class Selector

Period ( . ) character මෙහිදී භාවිතාවේ .

Note : මෙහිදී Period ( . ) සංකේතයට පසු අංකයක් භාවිතා නොවීය යුතුය .

< ! DOCTYPE html > 
< html > 
< head > 
< style > 
.center {
text - align : center ;
color : red ;
}
< / style > 
< / head > 
< body > 
< / body > 
< / html >

Tutorial Created by Kalani Imanthika