شرح CSS للمبتدئين — ما هي وكيف تُحوّل صفحاتك من عادية إلى جميلة؟
أتممت تعلم HTML؟ ممتاز. أنت الآن تعرف كيف تبني هيكل صفحة الويب. لكنك لاحظت أن الصفحة تبدو مملة — نص أسود على خلفية بيضاء، بلا ألوان ولا جمال. هنا يأتي دور CSS. في هذا الدرس سنشرح بالبساطة الكاملة: ما هي CSS، كيف تعمل، وكيف تُحوّل صفحتك من عادية إلى جميلة.
ما هي CSS؟
CSS اختصار لـ Cascading Style Sheets — أي "أوراق الأنماط المتتالية".
لا تخف من هذا الاسم. سنشرحه بمثال بسيط جداً:
تخيّل أن HTML بنت لك منزلاً من الخرسانة — جدران وأسقف وأبواب، لكن بلا طلاء ولا ديكور. CSS هي التي تأتي بعدها وتطلي الجدران وتختار الألوان وتُرتّب كل شيء بشكل جميل. أنت تقول بـ CSS: "اجعل هذا العنوان أزرق، وهذه الفقرة خط كبير، وهذه المنطقة في الوسط".
التعريف البسيط: CSS هي لغة نستخدمها لتحديد شكل ومظهر عناصر HTML — الألوان، الأحجام، المسافات، والتخطيط.
لماذا يجب أن تتعلم CSS؟
بدون CSS كل مواقع الويب ستبدو هكذا: نص أسود عادي على خلفية بيضاء. بلا تصميم ولا أسلوب. أي موقع تراه جميلاً اليوم — من نتفليكس إلى تويتر — خلفه ملفات CSS ضخمة تُحدد شكله بالكامل.
وأهم ما يميز CSS:
- تفصل التصميم عن المحتوى — الكود يصبح أنظف وأسهل في الصيانة
- ملف CSS واحد يتحكم في تصميم آلاف الصفحات دفعة واحدة
- تجعل الموقع متجاوباً (Responsive) مع كل أحجام الشاشات
- تدعم الحركات والتأثيرات البصرية (Animations) بدون JavaScript
كيف تبدو CSS؟ — أول مثال لك
إليك أبسط مثال CSS في العالم. انظر إليه بهدوء:
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
النتيجة في المتصفح:
عنوان منسّق بـ CSS
هذه فقرة توضح تأثير خصائص اللون والحجم.
ما معنى كل سطر؟
لنقرأ هذا المثال جزءاً جزءاً:
| الجزء | ماذا يعني بالعربي؟ |
|---|---|
h1 |
المحدد (Selector) — من تريد تنسيقه؟ هنا كل عناصر h1 |
{ } |
الأقواس — بداية ونهاية مجموعة الأنماط |
color |
الخاصية (Property) — ماذا تريد أن تغيّر؟ هنا اللون |
blue |
القيمة (Value) — ما هو التغيير الذي تريده؟ هنا اللون الأزرق |
; |
فاصلة منقوطة — تُنهي كل خاصية (لا تنساها!) |
القاعدة الأساسية في CSS — المحدد والخاصية والقيمة
كل قاعدة CSS تتبع هذا النظام البسيط:
/* محدد { خاصية: قيمة; } */
p {
color: red;
}
المحدد يُحدد من تريد تنسيقه (مثل: p، h1، .class).
الخاصية تُحدد ماذا تريد تغييره (مثل: color، font-size).
القيمة تُحدد كيف تريده (مثل: red، 20px).
; في نهاية كل خاصية. نسيانها سبب شائع لأخطاء التنسيق.
كيف تربط CSS بصفحة HTML؟
هناك ثلاث طرق لإضافة CSS إلى صفحتك:
الطريقة الأولى: ملف خارجي (الأفضل دائماً)
<head>
<link rel="stylesheet" href="style.css">
</head>
تكتب CSS في ملف منفصل باسم style.css وتربطه بملف HTML. هذه الطريقة المفضلة للمشاريع الحقيقية.
الطريقة الثانية: داخل الـ head
<head>
<style>
h1 { color: blue; }
</style>
</head>
تكتب CSS مباشرة داخل وسم <style> في الـ <head>. مفيدة في الاختبار السريع.
الطريقة الثالثة: مباشرة على العنصر (ليست مفضلة)
<h1 style="color: blue;">عنوان أزرق</h1>
تكتب CSS مباشرة داخل الوسم. سريعة لكن صعبة الصيانة — تجنبها في المشاريع الكبيرة.
مثال كامل: HTML + CSS معاً
لنرَ كيف يتعاون HTML وCSS لبناء صفحة بسيطة جميلة:
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الأولى بـ CSS</title>
<style>
body {
background-color: #f0f4f8;
font-family: Arial, sans-serif;
}
h1 {
color: #2563eb;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>أهلاً بك في عالم CSS!</h1>
<p>هذه الصفحة تم تنسيقها بـ CSS.</p>
</body>
</html>
النتيجة في المتصفح:
أهلاً بك في عالم CSS!
هذه الصفحة تم تنسيقها بـ CSS.
لاحظ كيف أن HTML حدّد ماذا يوجد في الصفحة (عنوان + فقرة)، بينما CSS حدّدت كيف تبدو (لون، خط، مسافات).
ما الذي تستطيع CSS فعله؟
CSS قادرة على الكثير أكثر مما تتخيل:
- تغيير الألوان والخلفيات والتدرجات (Gradients)
- التحكم في حجم وشكل الخطوط
- إضافة هوامش ومسافات داخلية بين العناصر
- تصميم تخطيطات الصفحة (Flexbox، Grid)
- إخفاء أو إظهار عناصر حسب حجم الشاشة (Responsive Design)
- إضافة ظلال، حدود، وزوايا مدوّرة
- إنشاء حركات وتأثيرات بصرية (Animations & Transitions)
هل CSS صعبة؟
CSS سهلة في البداية — تعلّم خاصيتين أو ثلاث وتبدأ ترى نتيجة فورية. لكنها تصبح عميقة جداً مع الوقت، خاصة مع Flexbox وGrid والتصاميم المتجاوبة.
الخبر الجيد؟ لا تحتاج أن تتعلم كل CSS دفعة واحدة. في هذا الكورس ستبدأ بالأساسيات وتنمو تدريجياً حتى تصل إلى مستوى تصميم مواقع احترافية.
ماذا ستتعلم في هذا الكورس؟
هذا الكورس مبني من الصفر خصيصاً للمبتدئين العرب. ستتعلم:
- تركيب CSS وكيفية كتابته (الدرس القادم مباشرة)
- المحددات (Selectors) — كيف تختار العناصر التي تريد تنسيقها
- الألوان والخلفيات
- الخطوط والنصوص
- الصناديق (Box Model) — المسافات والحدود والهوامش
- تخطيط الصفحة بـ Flexbox وGrid
- التصميم المتجاوب (Responsive Design)
- الحركات والتأثيرات (Animations & Transitions)
الأسئلة الشائعة — FAQ
هل CSS لغة برمجة؟
لا، CSS هي لغة تنسيق وليست لغة برمجة. لا تحتوي على شروط أو حلقات أو دوال (بشكل تقليدي). لكن هذا لا يقلل من أهميتها — بدونها كل المواقع ستبدو بائسة.
كم يستغرق تعلم CSS؟
أساسيات CSS يمكنك إتقانها في أسبوعين بممارسة يومية. أما المفاهيم المتقدمة كـ Flexbox وGrid والتصميم المتجاوب فتحتاج شهراً أو أكثر. التطبيق من أول يوم هو السر.
هل أحتاج لتعلم HTML قبل CSS؟
نعم، ولا بد. CSS تنسّق عناصر HTML، لذلك لا بد أن تعرف HTML أولاً. إذا لم تكمل كورس HTML بعد، ابدأ به أولاً من هنا.
ما الفرق بين CSS و JavaScript من ناحية التصميم؟
CSS تتحكم في المظهر الثابت والحركات البصرية. JavaScript تتحكم في السلوك والتفاعل الديناميكي مع المستخدم. الاثنان يعملان معاً دائماً، لكن لكل منهما دوره الخاص.