ما هو CSS؟ وما الفرق بين HTML وCSS؟ (شرح مبسط للمبتدئين)
في هذا المقال، سنتعرف على CSS، ولماذا نستخدمها في تصميم المواقع. كما سنوضح الفرق بينها وبين HTML بأسلوب سهل ومناسب لكل من يبدأ رحلته في تعلم تصميم الويب.
💡 ما هو CSS؟
CSS اختصار لـ Cascading Style Sheets، وتعني “أوراق الأنماط المتتالية”.
وهي لغة نستخدمها لتنسيق صفحات الويب، مثل:
- تغيير الألوان
- التحكم بحجم الخطوط
- ترتيب العناصر داخل الصفحة
- إضافة خلفيات، تباعد، ظلال… وغيرها.
CSS لا تنشئ محتوى جديد، بل تقوم فقط بتزيينه وتنظيمه.
📦 مثال بسيط:
لنقارن بين HTML وCSS:
🔹 كود HTML:
<p>مرحبًا بك في موقعي</p>
هذا السطر يعرض جملة في الصفحة، لكن بشكل عادي جدًا.
🔹 بإضافة CSS:
<p style="color: blue; font-size: 20px;">مرحبًا بك في موقعي</p>
الآن أصبحت الجملة باللون الأزرق وحجم خط أكبر — هذا هو دور CSS!
🧱 الفرق بين HTML و CSS
| HTML | CSS |
|---|---|
| هيكل الصفحة | تصميم وتنسيق |
| تنشئ العناصر (نصوص، عناوين، صور) | تتحكم في مظهر هذه العناصر |
| لغة “وصفية” تصف المحتوى | لغة “تنسيقية” تغير الشكل |
مثال: <h1>، <p> | مثال: color: red;، font-size: 16px; |
ببساطة: HTML تكتب المحتوى – CSS تجعله جميلًا.
🎯 لماذا نحتاج CSS؟
لأن المواقع الحديثة يجب أن تكون:
- جذابة بصريًا
- سهلة القراءة
- متجاوبة مع الجوال
- مريحة للمستخدم
بدون CSS، ستبدو المواقع مملة وغير مرتبة.
✅ طرق استخدام CSS في موقعك
- داخل وسم HTML مباشرة:
<h1 style="color: green;">عنوان</h1>
- داخل ملف
<style>في رأس الصفحة:
<style>
h1 {
color: green;
}
</style>
- ملف خارجي CSS (الأفضل):
<link rel="stylesheet" href="style.css">
🔚 خلاصة
- HTML وCSS هما أساس تصميم المواقع.
- HTML يبني الهيكل، وCSS يضيف الجمال.
- كل مصمم مواقع يجب أن يتعلم الاثنين معًا.
لمشاهده الفيديو : https://youtu.be/YFbHGW3rCm4