ما هي CSS؟
CSS اختصار لـ Cascading Style Sheets — وهي اللغة التي نُنسّق بها صفحات HTML: الألوان، الخطوط، المسافات، والتخطيط.
HTML يبني الهيكل، وCSS تُلبسه الثوب الجميل.
بدون CSS تظهر كل المواقع كنصّ أسود بسيط على خلفية بيضاء. ومع CSS يمكنك التحكّم في كل تفصيلة بصرية: من لون زر واحد، إلى تصميم صفحة كاملة تتكيّف مع أحجام الشاشات المختلفة.
شكل قاعدة CSS
h1 {
color: purple;
font-size: 32px;
}
h1= المحدِّد (selector): أي عنصر سنُنسّقه.color= الخاصية (property).purple= القيمة (value).- كل سطر ينتهي بفاصلة منقوطة
;.
ماذا يمكن أن تُنسّق CSS؟
- الألوان والخلفيات:
colorوbackground-color. - النصوص: الحجم، الخط، المحاذاة، والمسافة بين السطور.
- المسافات: الهوامش
marginوالحشوpadding. - التخطيط: ترتيب العناصر عبر Flexbox و Grid.
ثلاث طرق لإضافة CSS
1. ملف خارجي (الأفضل):
<link rel="stylesheet" href="style.css" />
2. داخل <head>:
<style>
p { color: gray; }
</style>
3. مضمّنة (inline — تجنّبها قدر الإمكان):
<p style="color: red;">نص أحمر</p>
الطريقة الأولى هي الأفضل لأنها تفصل التصميم عن المحتوى، وتتيح إعادة استخدام نفس الملف عبر كل صفحات الموقع.
أخطاء شائعة للمبتدئين
- نسيان الفاصلة المنقوطة
;بين الخصائص. - كتابة اسم خاصية خطأ (مثل
colourبدلcolor). - المبالغة في التنسيق المضمّن (inline) بدل ملف خارجي منظّم.
أسئلة شائعة
هل أتعلّم CSS قبل JavaScript؟ نعم، بعد HTML تأتي CSS مباشرة لتنسيق الصفحة، ثم JavaScript لإضافة التفاعل.
ما الفرق بين CSS و HTML؟ HTML تبني هيكل المحتوى، بينما CSS تتحكّم في شكله: الألوان والخطوط والمسافات والتخطيط.
هل تعلّم CSS صعب؟ أساسياتها سهلة، لكن إتقان التخطيط المتجاوب (Responsive) يحتاج ممارسة تدريجية مع Flexbox و Grid.
🎯 التالي: المحدِّدات — كيف نختار العناصر بدقّة لنُنسّقها.