مقدمة في CSS — دليل شامل 2026

بعد أن أتقنت HTML في المقالات السابقة، حان الوقت للانتقال إلى CSS — لغة التصميم التي تُحوّل صفحات HTML البسيطة إلى مواقع جميلة واحترافية.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم أساسيات CSS، مع تمارين وحلول.

ما هو CSS؟

CSS اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية).

تشبيه بسيط: إذا كان HTML هو هيكل المنزل (الجدران، الأبواب، النوافذ)، فإن CSS هو الديكور (الألوان، الأثاث، الإضاءة).

مثال بسيط:

<h1>مرحباً</h1>

h1 {
  color: blue;
  font-size: 40px;
  text-align: center;
}

النتيجة: عنوان أزرق بحجم كبير في المنتصف.

لماذا CSS؟

• التصميم: ألوان، خطوط، مسافات.
• التخطيط: ترتيب العناصر.
• التجاوب: تصميم يعمل على كل الأجهزة.
• الحركات: تأثيرات بصرية.
• الفصل: HTML للبنية، CSS للتصميم.

طرق إضافة CSS

هناك 3 طرق لإضافة CSS لصفحة HTML:

1. CSS خارجي (External) — الأفضل

ملف style.css:

h1 {
  color: blue;
}

في HTML:

<head>
  <link rel="stylesheet" href="style.css">
</head>

المميزات:

• ✅ يُستخدم في كل الصفحات.
• ✅ ينفصل عن HTML.
• ✅ سهل الصيانة.

2. CSS داخلي (Internal)

في HTML:

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

المميزات:

• ✅ لصفحة واحدة.
• ❌ لا يُعاد استخدامه.

3. CSS مضمّن (Inline)

<h1 style="color: blue;">مرحباً</h1>

المميزات:

• ❌ صعب الصيانة.
• ❌ لا يُوصى به إلا للضرورة.

جدول مقارنة

الطريقة	الأولوية	الاستخدام
خارجي	منخفضة	✅ موصى به
داخلي	متوسطة	لصفحة واحدة
مضمّن	عالية	⚠️ للضرورة

بنية قاعدة CSS

المحدد {
  الخاصية: القيمة;
  الخاصية: القيمة;
}

مثال:

h1 {
  color: blue;
  font-size: 30px;
}

شرح:

• h1: المحدد (Selector).
• color: الخاصية (Property).
• blue: القيمة (Value).
• ;: نهاية كل سطر.

المحددات (Selectors)

1. محدد العنصر (Element Selector)

يستهدف كل عناصر نوع معين.

p {
  color: gray;
}

h1 {
  font-size: 40px;
}

2. محدد الكلاس (Class Selector)

في HTML:

<p class="highlight">نص مميز</p>

في CSS:

.highlight {
  background: yellow;
}

⚠️ لاحظ النقطة . قبل اسم الكلاس.

الاستخدام المتعدد:

<p class="highlight">نص 1</p>
<p class="highlight">نص 2</p>

كلاهما سيُطبَّق عليه نفس التنسيق.

3. محدد المعرف (ID Selector)

في HTML:

<div id="header">رأس الصفحة</div>

في CSS:

#header {
  background: black;
  color: white;
}

⚠️ لاحظ # قبل اسم المعرف.

مهم: id فريد — لا يتكرر في الصفحة.

4. محدد العنصر داخل كلاس

.card p {
  color: gray;
}

يستهدف: كل <p> داخل عنصر له كلاس card.

5. محددات متعددة

h1, h2, h3 {
  font-family: 'Cairo', sans-serif;
}

يستهدف: كل h1 و h2 و h3.

6. محدد الابن المباشر (>)

nav > a {
  color: blue;
}

يستهدف: كل <a> مباشر داخل <nav>.

7. محدد الكل (*)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

يستهدف: كل العناصر (يُستخدم في Reset).

8. محددات الزائفة (Pseudo-classes)

a:hover {
  color: red;
}

button:focus {
  outline: 2px solid blue;
}

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

الأكثر استخداماً:

• :hover: عند المرور بالفأرة.
• :focus: عند التركيز.
• :active: عند الضغط.
• :first-child: العنصر الأول.
• :last-child: العنصر الأخير.
• :nth-child(n): العنصر رقم n.

جدول المحددات

المحدد	المثال	الاستهداف
العنصر	p	كل p
الكلاس	.card	كل العناصر بـ class="card"
المعرف	#header	العنصر بـ id="header"
الكل	*	جميع العناصر
الابن	nav > a	a المباشر داخل nav
النسل	.card p	p داخل .card
مجموعة	h1, h2	h1 و h2 معاً
hover	a:hover	a عند المرور

الخصائص الأساسية

1. الألوان (Colors)

/* ألوان مسمّاة */
color: red;
background: blue;

/* Hexadecimal */
color: #ff0000;
background: #3b82f6;

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (مع شفافية) */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

2. الخطوط (Fonts)

body {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-size: 16px;
  font-weight: 400;  /* 400 = normal, 700 = bold */
  line-height: 1.6;
  letter-spacing: 0.5px;
}

h1 {
  font-size: 2.5rem;
  font-weight: 900;
}

وحدات الحجم:

الوحدة	الوصف	المثال
px	بكسل (ثابت)	16px
rem	نسبة لحجم الجذر	1.5rem
em	نسبة للعنصر الأب	1.2em
%	نسبة مئوية	80%

3. النصوص (Text)

p {
  text-align: center;       /* left, right, center, justify */
  text-decoration: none;    /* none, underline, line-through */
  text-transform: uppercase; /* uppercase, lowercase, capitalize */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  text-indent: 20px;
}

4. الخلفية (Background)

body {
  background-color: #f0f0f0;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;

  /* اختصار: */
  background: #f0f0f0 url('bg.jpg') no-repeat center / cover;
}

5. الحدود (Borders)

div {
  border: 2px solid black;   /* width style color */
  border-radius: 8px;        /* حواف دائرية */
}

/* جانبي محدد */
div {
  border-top: 1px solid red;
  border-bottom: 1px solid blue;
}

أنواع الحدود:

• solid: خط عادي.
• dashed: خط متقطع.
• dotted: نقاط.
• double: خط مزدوج.
• none: بدون حدود.

6. المسافات (Spacing)

div {
  /* Padding (داخلي) */
  padding: 20px;
  padding-top: 10px;
  padding: 10px 20px;       /* عمودي أفقي */
  padding: 10px 20px 15px 5px; /* أعلى يمين أسفل يسار */

  /* Margin (خارجي) */
  margin: 20px;
  margin: 0 auto;  /* لتوسيط عنصر */
}

7. العرض والارتفاع (Width & Height)

div {
  width: 300px;
  height: 200px;
  max-width: 100%;
  min-height: 100px;
}

8. العرض (Display)

div {
  display: block;         /* block */
  display: inline;        /* inline */
  display: inline-block;  /* مزيج */
  display: none;          /* إخفاء */
  display: flex;          /* Flexbox */
  display: grid;          /* Grid */
}

9. الموضع (Position)

div {
  position: static;    /* افتراضي */
  position: relative;  /* نسبي */
  position: absolute;  /* مطلق */
  position: fixed;     /* ثابت */
  position: sticky;    /* لاصق */
}

الأولويات (Specificity)

عندما يتعارض تنسيقان، CSS تطبق الأعلى أولوية:

المحدد	الأولوية
inline style	1000
#id	100
.class, :hover	10
element	1

مثال:

p { color: blue; }              /* 1 */
.text { color: green; }         /* 10 */
#intro { color: red; }          /* 100 */

/* <p id="intro" class="text"> → أحمر (الأعلى أولوية) */

التعليقات في CSS

/* تعليق سطر واحد */

/*
  تعليق
  متعدد
  الأسطر
*/

مثال عملي: تنسيق صفحة

HTML:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>موقعي</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>موقعي</h1>
    <nav>
      <a href="/">الرئيسية</a>
      <a href="/about">من نحن</a>
    </nav>
  </header>

  <main>
    <h2>مرحباً بك</h2>
    <p>هذا موقعي الأول بـ CSS.</p>
    <button>اضغط</button>
  </main>

  <footer>
    <p>© 2026</p>
  </footer>
</body>
</html>

CSS (style.css):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background: #f9fafb;
  color: #1f2937;
  line-height: 1.7;
  direction: rtl;
}

header {
  background: #3b82f6;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  font-size: 1.5rem;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.3s;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.2);
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
}

main h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #1e293b;
}

main p {
  font-size: 1.2rem;
  color: #64748b;
  margin-bottom: 30px;
}

button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

footer {
  text-align: center;
  padding: 20px;
  color: #64748b;
  border-top: 1px solid #e5e7eb;
  margin-top: 40px;
}

🎉 النتيجة: صفحة احترافية بتصميم جميل!

تمارين عملية

تمرين 1: تلوين العنوان

لوّن جميع العناوين <h1> باللون الأزرق.

الحل:

h1 {
  color: blue;
}

تمرين 2: تنسيق الفقرة

اجعل حجم الفقرة 18px، والألوان رمادية.

الحل:

p {
  font-size: 18px;
  color: gray;
}

تمرين 3: زر تفاعلي

صمم زراً يتغير لونه عند المرور.

الحل:

button {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #1e40af;
}

تمرين 4: بطاقة

صمم بطاقة بخلفية بيضاء، حدود، وظل.

الحل:

.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

تمرين 5: قائمة أنيقة

صمم قائمة بدون نقاط، مع مسافات.

الحل:

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}

li:hover {
  background: #f3f4f6;
}

تمرين 6: توسيط عنصر

وسّط عنصراً أفقياً.

الحل:

.center {
  width: 300px;
  margin: 0 auto;
}

تمرين 7: كلاس مميز

أنشئ كلاس .highlight يضيف خلفية صفراء.

الحل:

.highlight {
  background: yellow;
  padding: 2px 6px;
  border-radius: 4px;
}

تمرين 8: صفحة كاملة

صمم صفحة كاملة بتنسيق جميل.

الحل:

body {
  font-family: 'Cairo', sans-serif;
  background: #f9fafb;
  padding: 40px;
  text-align: center;
}

h1 {
  color: #1e293b;
  font-size: 3rem;
  margin-bottom: 20px;
}

p {
  color: #64748b;
  font-size: 1.2rem;
  margin-bottom: 30px;
}

button {
  background: #3b82f6;
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: #2563eb;
}

حل المشاكل الشائعة

🔴 المشكلة 1: CSS لا يعمل

الأسباب:

• مسار link خاطئ.
• الملف غير محفوظ.
• خطأ في CSS.

الحل: افتح DevTools (F12) وتأكد من عدم وجود أخطاء.

🔴 المشكلة 2: الأولوية

السبب: تعارض تنسيقات.

الحل: استخدم !important (بحذر) أو حدد الأولوية:

.text {
  color: blue;
}
.text {
  color: red;  /* سيُطبق هذا */
}

🔴 المشكلة 3: لا يعمل margin: auto

السبب: العنصر inline أو ليس له width.

الحل:

div {
  width: 300px;      /* ← ضروري */
  margin: 0 auto;
  display: block;    /* ← إذا لزم */
}

🔴 المشكلة 4: النص العربي معكوس

السبب: عدم تحديد dir="rtl".

الحل:

<html dir="rtl">

أو:

body {
  direction: rtl;
}

🔴 المشكلة 5: المسافات غريبة

السبب: عدم تصفير المسافات.

الحل:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

جدول الخصائص الأساسية

الخاصية	الوظيفة	مثال
color	لون النص	red
background	الخلفية	#f0f0f0
font-size	حجم الخط	16px
font-family	نوع الخط	Cairo
text-align	محاذاة النص	center
padding	هامش داخلي	20px
margin	هامش خارجي	10px
border	الحدود	1px solid black
width	العرض	300px
height	الارتفاع	200px
display	طريقة العرض	flex

قائمة تحقق نهائية

المهمة	الحالة
ربط CSS بـ HTML	⬜
فهم المحددات	⬜
استخدام الألوان والخطوط	⬜
Padding و Margin	⬜
فهم الأولويات	⬜
تنسيق صفحة كاملة	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت أساسيات CSS، أنت جاهز للمقال التالي:

1. الألوان و Box Model — تعمق في التصميم.
2. Flexbox و Grid — التخطيط الحديث.
3. التجاوب (Responsive) — تصميم لكل الأجهزة.

الخلاصة

في هذا المقال، تعلمت:

• ✅ ما هو CSS ولماذا نحتاجه.
• ✅ 3 طرق لإضافة CSS.
• ✅ المحددات (Selectors).
• ✅ الخصائص الأساسية (Color, Font, Text, Border, Padding, Margin).
• ✅ الأولويات (Specificity).
• ✅ تنسيق صفحة كاملة.
• ✅ حل 8 تمارين عملية.

تذكر: CSS هو ما يُحوّل HTML من هيكل عظمي إلى موقع جميل.