CSS සම්පූර්ණ පාඩම සිංහලෙන් (2025)

1. CSS යනු කුමක්ද? (Introduction to CSS)

ඔබ HTML පාඩම සාර්ථකව නිමකළාට අපගේ උණුසුම් සුබ පැතුම්! ඔබ දැන් දන්නවා වෙබ් පිටුවක ඇටසැකිල්ල (structure) නිර්මාණය කරන්නේ කෙසේද කියා. දැන්, එම ඇටසැකිල්ලට සමක්, හිසකෙස් සහ ඇඳුම් පැළඳුම් ලබාදී එය පණගන්වන වෙලාවයි. ඒ සඳහා අප භාවිතා කරන්නේ CSS ය.

CSS යනු Cascading Style Sheets යන්නෙහි කෙටි යෙදුමයි. සරලවම, HTML මගින් "කුමක්ද පෙන්විය යුත්තේ" (what) යන්න තීරණය කරන විට, CSS මගින් "එය කෙසේද පෙන්විය යුත්තේ" (how) යන්න තීරණය කරයි. අකුරුවල වර්ණය, පිටුවේ පසුබිම, කොටස්වල පළල, උස, සහ ඒවා තිරයේ පිහිටන ආකාරය වැනි සියලුම දෘශ්‍ය අංග (visual aspects) පාලනය කරන්නේ CSS මගිනි.

CSS නැතිව වෙබ් අඩවි?

CSS නොමැතිව, අන්තර්ජාලය යනු කළු-සුදු අකුරු සහ නිල් පැහැති ලින්ක්ස් වලින් පමණක් පිරුණු ඉතාමත් නීරස තැනක් වනු ඇත. නූතන, අලංකාර වෙබ් අඩවි නිර්මාණය වීමට මූලිකම හේතුව CSS හි බලයයි.

HTML වලට CSS එකතු කරන ක්‍රම 3

CSS අපගේ HTML ලේඛනයට සම්බන්ධ කිරීමට ප්‍රධාන ක්‍රම 3ක් ඇත. ඒ එක් එක් ක්‍රමයේ වාසි සහ අවාසි ඇත.

External CSS (වඩාත්ම නිර්දේශිත ක්‍රමය): සියලුම CSS කේත styles.css වැනි වෙනම ගොනුවක තබා, එය <link> ටැගය භාවිතයෙන් HTML පිටුවේ <head> කොටසට සම්බන්ධ කරයි. වෙබ් අඩවියේ පිටු සියල්ලටම එකම පෙනුමක් ලබාදීමට සහ නඩත්තු කිරීමට මෙය ඉතා පහසුය.
```
<head>
    <link rel="stylesheet" href="styles.css">
</head>
```
Internal CSS: CSS කේත, HTML පිටුවේම <head> කොටස තුල <style> ටැග් දෙකක් අතර ලියනු ලැබේ. මෙය එක් පිටුවකට පමණක් විශේෂිත වූ මෝස්තර සඳහා සුදුසු වේ.
```
<head>
    <style>
        body { background-color: #f0f2f5; }
        h1 { color: purple; }
    </style>
</head>
```
Inline CSS (හැකි සෑමවිටම 피해 සිටිය යුතු ක්‍රමය): කිසියම් එක් HTML ටැගයකට පමණක් මෝස්තරයක් යෙදීමට style attribute එක භාවිතා කරයි. මෙය කේතය කියවීමට සහ නඩත්තු කිරීමට ඉතා අපහසු කරන බැවින්, විශේෂිත අවස්ථාවකදී හැර භාවිතා නොකිරීමට වගබලා ගන්න.
```
<p style="color: red; font-size: 20px;">මෙය රතු පැහැති ඡේදයකි.</p>
```

2. CSS රීතියක මූලික ව්‍යුහය (Syntax)

CSS කේත ලියනු ලබන්නේ "රීති" (Rules) භාවිතා කරමිනි. සෑම රීතියක්ම ප්‍රධාන කොටස් දෙකකින් සමන්විත වේ: Selector (සිලෙක්ටරය) සහ Declaration Block (ප්‍රකාශන කොටස).

CSS රීතියක ව්‍යුහය

selector {
    property: value;
    /* තවත් property: value; */
}

උදාහරණයක් ලෙස, වෙබ් පිටුවේ ඇති සියලුම <h2> ශීර්ෂක තැඹිලි පාට කිරීමට:

h2 {
    color: orange;
    font-size: 24px;
}

Selector (h2): මෝස්තරය යෙදිය යුතු HTML කොටස කුමක්ද යන්න තෝරාගනී.
Declaration Block ({...}): ගුලි වරහන් දෙකක් තුල, යෙදිය යුතු මෝස්තර ලැයිස්තුව අඩංගු වේ.
Property (color, font-size): වෙනස් කිරීමට අවශ්‍ය ගුණාංගය (උදා: වර්ණය, අකුරේ ප්‍රමාණය).
Value (orange, 24px): එම ගුණාංගයට ලබා දෙන අගය.

සෑම ප්‍රකාශනයක්ම (declaration) අවසානයේ අර්ධ විරාමයක් (semicolon ;) යෙදීම අනිවාර්ය වේ.

3. CSS Selectors: HTML කොටස් තෝරාගැනීම

CSS හි බලය රැඳී ඇත්තේ නිවැරදි HTML කොටස (element) තෝරාගෙන එයට මෝස්තර යෙදීමේ හැකියාව මතය. මේ සඳහා විවිධාකාරයේ Selectors ඇත.

මූලික Selectors

Element Selector: කිසියම් වර්ගයක සියලුම HTML ටැග්ස් තෝරාගනී. (උදා: p { ... })
Class Selector: තිතකින් (.) ආරම්භ වේ. එකම class නාමය elements කිහිපයකටම ලබා දිය හැක. (උදා: .highlight { ... })
ID Selector: හැෂ් ලකුණකින් (#) ආරම්භ වේ. පිටුවක එක් element එකක් සඳහා පමණක් අනන්‍යව භාවිතා කරයි. (උදා: #main-logo { ... })
Universal Selector (*): පිටුවේ ඇති සියලුම HTML elements තෝරාගනී. (උදා: * { box-sizing: border-box; })
Grouping Selector: selectors කිහිපයකට එකම style එක යෙදීමට, ඒවා කොමාවකින් (,) වෙන් කරයි. (උදා: h1, h2, h3 { color: navy; })

Combinator Selectors (සංයෝජන සිලෙක්ටර්ස්)

Elements අතර ඇති සම්බන්ධතාවය මත පදනම්ව ඒවා තෝරාගැනීමට මේවා භාවිතා කරයි.

Descendant Selector (space): කිසියම් element එකක් තුල ඇති සියලුම අදාළ elements තෝරාගනී. (උදා: div p - div එකක් තුල ඇති සියලුම p ටැග්)
Child Selector (>): කිසියම් element එකක සෘජු දරු (direct children) elements පමණක් තෝරාගනී. (උදා: ul > li)
Adjacent Sibling Selector (+): කිසියම් element එකකට liền kềව ඊළඟට එන සහෝදර (sibling) element එක පමණක් තෝරාගනී. (උදා: h2 + p)

Pseudo-class & Pseudo-element Selectors

Element එකක විශේෂිත තත්වයක් (state) හෝ කොටසක් තෝරාගැනීමට මේවා යොදාගනී.

:hover (Pseudo-class): මූසිකය (mouse) element එකක් මතට ගෙන ආ විට මෝස්තර යෙදීමට. (උදා: button:hover { background-color: green; })
:first-child (Pseudo-class): කිසියම් මාපිය (parent) element එකක පළමු දරුවා තෝරාගැනීමට. (උදා: p:first-child { font-weight: bold; })
::before & ::after (Pseudo-elements): Element එකක අන්තර්ගතයට පෙර හෝ පසුව අලුතින් අන්තර්ගතයක් CSS මගින් එක් කිරීමට.

4. බහුලව භාවිතා වන CSS Properties

Colors (වර්ණ)

වර්ණ ලබාදීමට ක්‍රම කිහිපයක් ඇත: Named Colors (red), HEX (#FF0000), RGB (rgb(255, 0, 0)), සහ RGBA (rgba(255, 0, 0, 0.5) - මෙහි 0.5 යනු විනිවිදභාවයයි).

.box {
    color: #333; /* අකුරුවල වර්ණය */
    background-color: #f1f1f1; /* පසුබිම් වර්ණය */
    border: 1px solid red; /* දාරයේ වර්ණය */
}

Typography (අක්ෂර සැකැස්ම)

වෙබ් පිටුවක කියවීමේ පහසුව (readability) සඳහා අකුරු නිවැරදිව හැඩගැන්වීම ඉතා වැදගත් වේ.

p.article {
    font-family: 'Georgia', serif; /* අකුරු වර්ගය */
    font-size: 18px; /* අකුරේ ප්‍රමාණය */
    font-weight: normal; /* අකුරේ තදකම (bold, normal) */
    line-height: 1.6; /* පේළි අතර පරතරය */
    text-align: justify; /* Text alignment (left, right, center, justify) */
}

CSS Box Model

වෙබ් පිටුවක ඇති සෑම HTML කොටසක්ම සෘජුකෝණාස්‍රාකාර පෙට්ටියක් ලෙස සැලකේ. මෙම පෙට්ටිය Content, Padding, Border, සහ Margin යන කොටස් 4කින් සමන්විත වේ.

Margin

Border & Padding

Content

Content: ඔබගේ ලියවිල්ල, පින්තූරය.
Padding: Content එක සහ Border එක අතර ඇති හිස් ඉඩ.
Border: Padding එක වටා ඇති දාරය.
Margin: Border එකෙන් පිටත, එම කොටස සහ අනෙකුත් කොටස් අතර ඇති හිස් ඉඩ.

.my-box {
    width: 300px; /* පෙට්ටියේ පළල */
    height: 200px; /* පෙට්ටියේ උස */
    padding: 20px; /* ඇතුළත පරතරය */
    border: 5px solid purple; /* දාරය */
    margin: 25px; /* පිටත පරතරය */
}

Pro Tip: * { box-sizing: border-box; } යන රීතිය ඔබේ CSS ගොනුවේ ඉහළින්ම යොදන්න. මින්, ඔබ ලබාදෙන `width` සහ `height` අගයන්ට `padding` සහ `border` ද ඇතුළත් වේ. මෙය layouts සෑදීම ඉතා පහසු කරයි.

5. CSS Layouts: පිටු සැකැස්ම නිර්මාණය

වෙබ් පිටුවක කොටස් (header, sidebar, content, footer) නිසි පරිදි ස්ථානගත කිරීම Layout නිර්මාණය ලෙස හැඳින්වේ. මේ සඳහා නූතන CSS හි ප්‍රධාන ක්‍රම දෙකක් ඇත: Flexbox සහ Grid.

The `display` Property

`display` ගුණාංගය මගින් element එකක් හැසිරෙන ආකාරය තීරණය කරයි. එහි ප්‍රධාන අගයන් කිහිපයකි:

block: සම්පූර්ණ පළලම ලබාගනී, නව පේළියකින් ආරම්භ වේ. (උදා: <p>, <div>)
inline: අවශ්‍ය පළල පමණක් ලබාගනී, නව පේළියකින් ආරම්භ නොවේ. (උදා: <a>, <span>)
inline-block: Inline මෙන් එකම පේළියේ රැඳෙන නමුත්, Block මෙන් width, height, margin, padding යෙදිය හැක.
none: Element එක සම්පූර්ණයෙන්ම සඟවයි.
flex: Flexbox layout එකක් සක්‍රීය කරයි.
grid: Grid layout එකක් සක්‍රීය කරයි.

Flexbox

Flexbox යනු එක් මානයක (one-dimensional) - එනම් පේළියක් හෝ තීරුවක් ඔස්සේ - කොටස් සැකසීම සඳහා නිර්මාණය වූ ඉතා බලවත් layout ක්‍රමයකි. Navigation bars, card layouts වැනි දේ සඳහා මෙය ඉතා යෝග්‍ය වේ.

Flexbox ක්‍රියාත්මක කිරීමට, මාපිය container එකට display: flex; යෙදිය යුතුය.

Flex Container Properties:

flex-direction: අයිතම සකස් විය යුතු දිශාව (row, column).
justify-content: ප්‍රධාන අක්ෂය ඔස්සේ අයිතම සකස් කරන ආකාරය (flex-start, center, space-between).
align-items: හරස් අක්ෂය ඔස්සේ අයිතම සකස් කරන ආකාරය (flex-start, center, stretch).

.flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
}
.flex-item {
    background-color: purple;
    color: white;
    padding: 20px;
    margin: 5px;
}

CSS Grid

Grid යනු ද්විමාන (two-dimensional) - එනම් පේළි සහ තීරු දෙකම ඔස්සේ - සංකීර්ණ සැකසුම් නිර්මාණය කිරීමට ඇති ප්‍රබලම ක්‍රමයයි. සම්පූර්ණ වෙබ් පිටුවේ ප්‍රධාන සැකැස්ම (page layout) සඳහා Grid ඉතාමත් සුදුසුය.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto; /* තීරු 3ක් */
    grid-gap: 10px; /* කොටු අතර පරතරය */
    background-color: #f0f0f0;
    padding: 10px;
}
.grid-item {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
}

6. Responsive Web Design

Responsive Design යනු වෙබ් අඩවියක් ඕනෑම තිරයක ප්‍රමාණයකට (desktop, tablet, mobile) ස්වයංක්‍රීයව ගැලපෙන පරිදි නිර්මාණය කිරීමයි. මෙය නූතන වෙබ් නිර්මාණයේ අනිවාර්ය අංගයකි. මේ සඳහා CSS හි Media Queries භාවිතා කරයි.

Media Query එකක් මගින්, තිරයේ පළල වැනි යම් කොන්දේසියක් සපුරාලූ විට පමණක් ක්‍රියාත්මක වන CSS රීති ලිවිය හැක.

/* --- Default styles (for mobile first) --- */
.container {
    width: 100%;
}
.sidebar {
    display: none; /* කුඩා තිර වල sidebar එක සඟවමු */
}

/* --- For screens 768px and wider (tablets) --- */
@media (min-width: 768px) {
    .container {
        width: 80%;
        margin: auto;
    }
    .sidebar {
        display: block; /* විශාල තිර වල sidebar එක පෙන්වමු */
    }
}

/* --- For screens 1200px and wider (desktops) --- */
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

සැ.යු: මෙම පාඩම් පිටුව සඳහා අප භාවිතා කරන Bootstrap Framework එක, Responsive Design ඉතා පහසු කරන pre-built grid system එකක් සහ classes රැසක් අපට ලබාදේ. එබැවින් අපට මේවා මුල සිට ලිවීමට අවශ්‍ය නොවේ.

CSS සම්පූර්ණ පාඩම සිංහලෙන්