Learn CSS easily

المقدمة

CSS هي اللغة اللي كاتستعمل باش تنسق صفحات الويب، وتزيد عليهم الألوان، الأحجام، وتنسيقات متقدمة باش يظهر الموقع ديالك بشكل احترافي.

علاش خاصك تتعلم CSS؟

✅ تحكم كامل فالمظهر - CSS كاتعطيك القدرة باش تنظم وتزين صفحات الويب ديالك. ✅ سهولة التعلم - قواعد بسيطة ولكن قوية. ✅ متوافقة مع جميع المتصفحات - أي متصفح حديث كايدعم CSS.

كيفاش تضيف CSS فالموقع ديالك؟

كاينين 3 طرق باش تضيف CSS:

1️⃣ CSS داخلية (Inline CSS)

<p style="color: red; font-size: 20px;">هاد النص باللون الأحمر وبحجم 20px</p>

2️⃣ CSS داخل `<style>` فـ `<head>`

<style>
  p {
    color: blue;
    font-size: 18px;
  }
</style>

3️⃣ CSS خارجية (External CSS)

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

الأساسيات ديال CSS

1️⃣ الألوان (Colors)

h1 {
  color: green;
}

2️⃣ الخلفيات (Backgrounds)

body {
  background-color: #f4f4f4;
}

3️⃣ الهوامش والحشوات (Margin & Padding)

.container {
  margin: 20px;
  padding: 10px;
}

4️⃣ الحدود (Borders)

.box {
  border: 2px solid black;
  border-radius: 10px;
}

5️⃣ الخطوط (Fonts)

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

6️⃣ تموضع العناصر (Positioning)

.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
}

بناء أول تصميم ب CSS

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
.container {
  width: 80%;
  margin: auto;
  text-align: center;
}
h1 {
  color: blue;
}

مصادر زوينة باش تتعلم CSS 📚

🔹 دليل MDN CSS 🔹 موقع W3Schools CSS 🔹 دورة CSS فـ YouTube

الخاتمة

دابا عندك فكرة مزيانة على CSS، والوقت دابا باش تبدا تطبق وتزين صفحات الويب ديالك! 🚀