HTML CSS

HTML Document එකකට CSS ක්‍රම 3 කින් එකතු කළ හැකිය:

Inline Css – html code eka athule style tag eka yodagena Css liyana eka
Internal Css – <head> tag eka athule <style> tage ekak hadala Css liyana eka
External Css – Wenath Css file ekaka Css code eka liyala adala Html document eke <head> eke <link> yodagena Css file eka link karana eka

HTML Tag වලට අදාලව Css ලියන්න ක්‍රම 3ක් තියෙනවා.

Html tag – html tag eke nama yodagena kelinma Css liyanawa
Id – Id ekata labadi thibena nama bawitha kara Css liyanawa ( Css liwimedi id name ekata pera # ekathukala yuthuya )
Class – Class ekata labadi thibena nama bawitha kara Css liyanawa ( Css liwimedi Class name ekata pera . ekathukala yuthuya )

Inline CSS

Inline CSS

<!DOCTYPE html>
<head>

</head>
<body>
    
    <h1 style="color:blue;border: 2px solid;border-color: red;">A Blue Heading</h1>
    <p style="font-size: 20px;font-weight: 400;">HTML Best</p>

</body>
</html>

html code eka athule style tag eka yodagena Css liyane mehema

Internal Css

Internal Css

<!DOCTYPE html>
<head>

<style>
h1{
    color:red;
    font-size: 25px;
}

p{
    color: blue;
    border: 1px solid;
}
</style>

</head>
<body>

     <h1> Hello World 1</h1>
     <p> Hello world paragraph</p>

</body>
</html>

<head> tag eka athule <style> tage ekak hadala Css liyanne mehema

External CSS

External CSS

<!DOCTYPE html>
<head>

    <link rel="stylesheet" href="main.css">

</head>
<body>

     <h1> Hello World 1</h1>
     <p> Hello world paragraph</p>

</body>
</html>

Wenath Css file ekaka Css code eka liyala adala Html document eke <head> eke <link> yodagena Css file eka link karanne mehema

rel	🎱link karanne mona type eke ekakda kiyala ahas karanne meken 🎱Css link karanna yodaganne stylesheet kiyana nama
href	🎱mekata thamay adala css file eka link karanne 🎱css file eke path eka hari url eka hari mekata denna ona