CSS Basics for Beginners
เคตेเคฌเคธाเคเค เคो เคธुंเคฆเคฐ, เคฐंเคीเคจ เคเคฐ เคช्เคฐोเคซेเคถเคจเคฒ เคกिเฅाเคเคจ เคฆेเคจे เคा เค เคธเคฒी เคाเคฆू!
CSS เคा เคซुเคฒ เคซॉเคฐ्เคฎ Cascading Style Sheets เคนोเคคा เคนै। เคเคฌ เคเคช HTML เคฒिเคเคคे เคนैं, เคคो เคธाเคฐा เคेเค्เคธ्เค เคเคฐ เคฌเคเคจ เคธ्เค्เคฐीเคจ เคे เคोเคจे เคฎें เคเค เคे เคจीเคे เคเค เค เคाเคคे เคนैं। เคตो เคฌเคนुเคค เคนी เคเคฌाเค (Boring) เคฒเคเคคा เคนै। CSS เคตो เคाเคฆू เคนै เคो เคเคธ เคेเค्เคธ्เค เคो เคฌीเค เคฎें เคฒाเคคा เคนै, เคฌैเคเค्เคฐाเคंเคก เคฎें เคถाเคจเคฆाเคฐ เคฐंเค เคญเคฐเคคा เคนै, เคฌเคเคจ्เคธ เคो 3D เคฒुเค เคฆेเคคा เคนै เคเคฐ เคเคชเคी เคตेเคฌเคธाเคเค เคो 'Facebook' เคฏा 'Amazon' เคैเคธी เคช्เคฐोเคซेเคถเคจเคฒ เคฒुเค เคฆेเคคा เคนै। เคเค เคนเคฎ CSS เคे เคเคจ เคฌेเคธिเค เคจिเคฏเคฎों เคो เคธเคฎเคेंเคे, เคिเคจเคธे เคोเค เคญी เคกिเฅाเคเคจ เคฌเคจाเคฏा เคा เคธเคเคคा เคนै।
CSS เคฒिเคเคจे เคा เคจिเคฏเคฎ เคฌเคนुเคค เคนी เคเคธाเคจ เคนै। เคเคชเคो เคฌเคธ เคฌ्เคฐाเคเค़เคฐ เคो เคฏเคน เคฌเคคाเคจा เคนोเคคा เคนै เคि "เคिเคธ เคीเค़ เคा เคกिเฅाเคเคจ เคฌเคฆเคฒเคจा เคนै" เคเคฐ "เค्เคฏा เคฌเคฆเคฒเคจा เคนै"।
h1 {
color: blue;
font-size: 24px;
}
1. Selector (h1)
เคฏเคน เคตो เคाเคฐเคेเค เคนै เคिเคธे เคเคช เคกिเฅाเคเคจ เคเคฐเคจा เคाเคนเคคे เคนैं। เคैเคธे เคฏเคนाँ เคนเคฎเคจे h1 (Heading) เคो เคाเคฐเคेเค เคिเคฏा เคนै।
2. Property (color)
เคฏเคน เคตो เคुเคฃ เคนै เคिเคธे เคเคช เคฌเคฆเคฒเคจा เคाเคนเคคे เคนैं। เคैเคธे เคฐंเค (color), เคธाเคเฅ (font-size), เคฏा เคฌैเคเค्เคฐाเคंเคก (background)।
Inline CSS (เคเคจเคฒाเคเคจ)
เคเคฌ เคเคช เคธीเคงे HTML เคฒाเคเคจ เคे เค
ंเคฆเคฐ เคนी 'style' เคฒिเคเคเคฐ เคกिเฅाเคเคจ เคเคฐเคคे เคนैं। เคฏเคน เคคเคฐीเคा เคคเคฌ เคเคธ्เคคेเคฎाเคฒ เคนोเคคा เคนै เคเคฌ เคธिเคฐ्เคซ เคिเคธी เคเค เคฒाเคเคจ เคा เคฐंเค เคฌเคฆเคฒเคจा เคนो।
<p style="color: red;">เคฏเคน เคฒाเคฒ เคฐंเค เคนै</p>
Internal CSS (เคंเคเคฐเคจเคฒ)
เคเคฌ เคเคช HTML เคซाเคเคฒ เคे เคธเคฌเคธे เคเคชเคฐ <head> เคैเค เคे เค
ंเคฆเคฐ <style> เคฒเคाเคเคฐ เคชूเคฐा เคกिเฅाเคเคจ เคฒिเคเคคे เคนैं। เคฏเคน เคเค เคชूเคฐे เคตेเคฌ เคชेเค เคो เคกिเฅाเคเคจ เคเคฐเคจे เคे เคฒिเค เค
เค्เคा เคนै।
External CSS (เคเค्เคธเคเคฐ्เคจเคฒ - Pro Level)
เคฏเคน เคธเคฌเคธे เคฌेเคธ्เค เคเคฐ เคช्เคฐोเคซेเคถเคจเคฒ เคคเคฐीเคा เคนै। เคเคธเคฎें เคนเคฎ CSS เคा เคोเคก เคเค เค เคฒเค เคซाเคเคฒ (เคैเคธे style.css) เคฎें เคฒिเคเคคे เคนैं เคเคฐ เคซिเคฐ เคเคธे HTML เคธे เคฒिंเค เคเคฐ เคฆेเคคे เคนैं। เคเคธเคธे HTML เคोเคก เคธाเคซ-เคธुเคฅเคฐा เคฐเคนเคคा เคนै เคเคฐ เคเค เคซाเคเคฒ เคธे 100 เคชेเคों เคा เคกिเฅाเคเคจ เคฌเคฆเคฒा เคा เคธเคเคคा เคนै।
เคตेเคฌ เคกिเฅाเคเคจ เคฎें, HTML เคा เคนเคฐ เคเค เคเคฒिเคฎेंเค (Paragraph, Image, Button) เคเค 'เคौเคोเคฐ เคฌเค्เคธा' (Box) เคนोเคคा เคนै। เคเคธी เคฌเค्เคธे เคो 'Box Model' เคเคนเคคे เคนैं। เคเคธे เคธเคฎเคे เคฌिเคจा เคเคช เคตेเคฌเคธाเคเค เคा เคฒेเคเคเค เคจเคนीं เคฌเคจा เคธเคเคคे!
Content & Padding
Content: เคฏเคน เค
เคธเคฒी เคेเค्เคธ्เค เคฏा เคซोเคो เคนै।
Padding: เคฏเคน เคंเคेंเค เคเคฐ เคฌॉเคฐ्เคกเคฐ เคे เคฌीเค เคी เค
ंเคฆเคฐूเคจी เคाเคฒी เคเคเคน เคนै। (เคैเคธे เคคเคिเคฏे เคे เค
ंเคฆเคฐ เคी เคฐुเค)।
Border & Margin
Border: เคฏเคน เคชैเคกिंเค เคे เคฌाเคนเคฐ เคी เคฒाเคเคจ (เคฆीเคตाเคฐ) เคนै।
Margin: เคฏเคน เคเคชเคे เคฌเค्เคธे เคเคฐ เคฆूเคธเคฐे เคฌเค्เคธों เคे เคฌीเค เคी เคฌाเคนเคฐी เคฆूเคฐी เคนै। (เคैเคธे เคฆो เคเคฐों เคे เคฌीเค เคी เคเคฒी)।
เค
เคเคฐ เคชेเค เคชเคฐ 10 Paragraphs (p) เคนैं, เคฒेเคिเคจ เคเคชเคो เคธिเคฐ्เคซ เคฆूเคธเคฐे เคชैเคฐाเค्เคฐाเคซ เคो เคฒाเคฒ เคฐंเค เคा เคเคฐเคจा เคนै, เคคो เคเคช เค्เคฏा เคเคฐेंเคे? เคฏเคนीं เคชเคฐ Class เคเคฐ ID เคा เคाเคฎ เคเคคा เคนै।
| Class (เค्เคฒाเคธ) - เคกॉเค (.) เคธे เคถुเคฐू | ID (เคเคเคกी) - เคนैเคถ (#) เคธे เคถुเคฐू |
|---|---|
| เคฏเคน เคเค เคคเคฐเคน เคा เค्เคฐुเคช เคจाเคฎ เคนै। เคเค เค्เคฒाเคธ (เคैเคธे 'btn') เคो เคเคช เคเค เคธाเคฐे เคฌเคเคจ्เคธ เคชเคฐ เคฒเคा เคธเคเคคे เคนैं। | เคฏเคน เคเคงाเคฐ เคाเคฐ्เคก เคจंเคฌเคฐ เคी เคคเคฐเคน เคนै। เคเค เคชेเค เคชเคฐ เคเค ID เคธिเคฐ्เคซ เคเค เคนी เคเคฒिเคฎेंเค เคो เคฆी เคा เคธเคเคคी เคนै। |
HTML: <p class="my-text"> |
HTML: <p id="main-title"> |
CSS: .my-text { color: red; } |
CSS: #main-title { font-size: 30px; } |
Q1. เค्เคฏा CSS เคธीเคเคจा HTML เคธे เค़्เคฏाเคฆा เคฎुเคถ्เคिเคฒ เคนै?
Q2. เคฎेเคฐी CSS เคซाเคเคฒ HTML เคฎें เคाเคฎ เค्เคฏों เคจเคนीं เคเคฐ เคฐเคนी?
<head> เคธेเค्เคถเคจ เคฎें เคेเค เคเคฐें เคि เคเคชเคจे CSS เคซाเคเคฒ เคो เคฒिंเค เคिเคฏा เคนै เคฏा เคจเคนीं। เคोเคก เคुเค เคเคธा เคนोเคจा เคाเคนिเค: <link rel="stylesheet" href="style.css">
Q3. เคตेเคฌ เคกिเฅाเคเคจ เคฎें 'Responsive' (เคฐिเคธ्เคชॉเคจ्เคธिเคต) เคा เค्เคฏा เคฎเคคเคฒเคฌ เคนोเคคा เคนै?
@media) เคी เคฎเคฆเคฆ เคธे เคिเคฏा เคाเคคा เคนै।
Final Words
CSS เคเค เคธเคฎंเคฆเคฐ เคी เคคเคฐเคน เคนै, เคिเคธเคฎें เคนเฅाเคฐों เคช्เคฐॉเคชเคฐ्เคीเค़ เคนैं, เคฒेเคिเคจ เคเคชเคो เคธाเคฐी เคฐเคเคจे เคी เฅเคฐूเคฐเคค เคจเคนीं เคนै। เคถुเคฐुเคเคค เคธिเคฐ्เคซ Color, Background, Font-size, Margin เคเคฐ Padding เคธे เคเคฐें। เคเคฌ เคเคช เคเคจ 5 เคीเฅों เคธे เค เคชเคจी เคตेเคฌเคธाเคเค เคो เคฐंเคीเคจ เคเคฐ เคฒेंเคे, เคคो เคเคชเคा เคॉเคจ्เคซिเคกेंเคธ เค เคชเคจे เคเคช เคฌเฅ เคाเคเคा। เคोเคกिंเค เคी เคช्เคฐैเค्เคिเคธ เคाเคฐी เคฐเคें เคเคฐ เคกिเฅाเคเคจ เคे เคธाเคฅ เคเค्เคธเคชेเคฐिเคฎेंเค เคเคฐเคคे เคฐเคนें!