HTML ትምህርት - ክፍል 2

🎨

CSS ምንድን ነው? // What is CSS?

CSS ማለት Cascading Style Sheets ማለት ነው። HTML page ቀለም፣ ቅርጽ፣ መጠን እና አቀማመጥ ለማሳመር የምንጠቀምበት ነው።

💡

English: CSS = Cascading Style Sheets. It controls how HTML elements look — colors, fonts, sizes, spacing, and layout. Without CSS, websites would look plain and boring.

🏠 ክፍል 1 ተምረናል: HTML = ቤቱ አጥንት
🎨 አሁን: CSS = ቤቱ ቀለምና ማስዋብ (paint & decoration)

Remember: HTML is the structure, CSS is the style. They work together!

✍️

CSS እንዴት ይጻፋል? // CSS Syntax

CSS 3 ክፍሎች አሉት: Selector, Property, Value
CSS has 3 parts: Selector (what to style), Property (what aspect), Value (how)

style.css

/* ቅርጽ: selector { property: value; } */

h1 {
  color: red;           /* ቀለም */
  font-size: 32px;     /* የ text መጠን */
  text-align: center;  /* መሃል አድርግ */
}

p {
  color: blue;
  font-size: 18px;
  line-height: 1.6;    /* የ line ርቀት */
}

1

Selector — ምን ነገር?

h1, p, div — የትኛው HTML element ማስተካከል እንደምንፈልግ። Which HTML element to style.

2

Property — ምን ጉዳይ?

color, font-size — ምን ማስተካከል እንደምፈልግ። What aspect to change.

3

Value — ምን ዋጋ?

red, 32px — እሴቱ ምን ይሁን። The specific value to apply.

🔗

CSS HTML ጋር እንዴት ይጣመራል? // 3 Ways to Add CSS

CSS ለ HTML 3 መንገዶች አሉ:
There are 3 ways to add CSS to HTML:

መንገድ 1 — Inline CSS (ቀጥታ)

<!-- HTML tag ውስጥ style attribute ይጨምሩ -->
<h1 style="color: red; font-size: 30px;">
  ሰላም!
</h1>

መንገድ 2 — Internal CSS (ምርጥ ለጀማሪ)

<head>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

መንገድ 3 — External CSS (Professional)

<!-- index.html ውስጥ style.css link አድርጉ -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css ፋይል ለብቻ */
h1 { color: green; }

⚡

አስፈላጊ CSS Properties // Must-Know Properties

color

የ text ቀለም
Text color

background-color

የ ጀርባ ቀለም
Background color

font-size

የ text መጠን
Text size (px, rem)

font-weight

ወፍራም/ቀጭን
Bold or thin text

text-align

ቦታ አቀማመጥ
center, left, right

padding

ውስጥ ቦታ
Inner spacing

margin

ውጭ ቦታ
Outer spacing

border

ድንበር ይስሩ
Draw a border

border-radius

ጥግ ማለስለስ
Round the corners

width / height

ስፋትና ቁመት
Width and height

🧪

ቀጥታ ሙከራ // Live Demo — Click to try!

ከታች ያሉትን ቁልፎች ጫን — ቀለሙ ሲቀይር ይመልከት! 👇
Click buttons below to see CSS in action!

ሰላም Ethiopia! 🇪🇹 Hello World!

📄

ሙሉ ምሳሌ // Full Example

index.html — ሙሉ ምሳሌ

<!DOCTYPE html>
<html>
<head>
  <title>የ CSS ምሳሌ</title>
  <style>
    body {
      background-color: #1a1a2e;
      color: white;
      font-family: Arial;
      text-align: center;
      padding: 40px;
    }
    h1 {
      color: #ff6b9d;
      font-size: 48px;
    }
    p {
      font-size: 20px;
      color: #94a3b8;
    }
    button {
      background-color: #ff6b9d;
      color: white;
      padding: 12px 28px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>ሰላም ኢትዮጵያ! 🇪🇹</h1>
  <p>CSS ተምሬ Page አሰምሬ!</p>
  <button>ጠቅ አድርግ!</button>
</body>
</html>

🎯

Quiz // ምን ተማርን?

❓ የ text ቀለም ለመቀየር የትኛው CSS property ትጠቀማለህ?
Which CSS property do you use to change text color?

A font-size

B color

C background-color

D text-align

CSS ምንድን ነው?What is CSS?

CSS ምንድን ነው?
What is CSS?