ما CSS؟ وطرق ربطها بالصفحة

١CSS: لغة الشكل

HTML تقول «هذا عنوان، وهذا رابط»، و CSS تقول «العنوان بنّي، والرابط زر برتقالي». المحتوى نفسه، والشكل مختلف تمامًا. انتقل بين التبويبين لترى الملفين:

<h1>مقهى بُنّ</h1><p>قهوة مختصة تُحمَّص كل صباح.</p><a href="#">اطلب الآن</a>

body {  background-color: #FFF8F0;  font-family: Tahoma, sans-serif;}h1 {  color: #3B2A1A;}a {  background-color: #E07A1F;  color: white;  padding: 6px 14px;  border-radius: 20px;  text-decoration: none;}

جرّب: اضغط «✏️ جرّب وعدّل»، وافتح تبويب style.css، وغيّر #E07A1F إلى green.

٢شكل القاعدة

كل ملف CSS مجموعة قواعد، وكل قاعدة لها ثلاثة أجزاء:

داخل القوسين نكتب ما نشاء من الخصائص، وننهي كل سطر بفاصلة منقوطة ;. والتعليق في CSS يُكتب هكذا: /* ملاحظة */.

٣ثلاث طرق لإضافة CSS

<!DOCTYPE html><html lang="ar" dir="rtl"><head>  <meta charset="UTF-8">  <title>مقهى بُنّ</title>  <link rel="stylesheet" href="style.css">  <style>    p { color: gray; }  </style></head><body>  <h1>مقهى بُنّ</h1>  <p>فقرة رمادية (من style الداخلي).</p>  <p style="color: red;">فقرة حمراء (مضمّن).</p></body></html>

h1 {  color: #3B2A1A;  border-bottom: 3px solid #E07A1F;}

الطريقة الخارجية تفصل المحتوى عن الشكل: لو أردت تغيير لون الموقع كله، تعدّل سطرًا واحدًا في ملف واحد.

٤من يفوز إذا تعارضت القواعد؟

في المثال السابق: القاعدة الداخلية تقول «الفقرات رمادية»، والسمة المضمّنة تقول «هذه الفقرة حمراء». فازت الحمراء. القاعدة التقريبية:

1. المضمّن (style على العنصر) أقوى من غيره.
2. إذا تساوت القوة: الأخير يفوز. القاعدة المكتوبة لاحقًا تغلب السابقة.
3. المحدِّد الأدق أقوى (تفاصيله في الدرس القادم).

هذا معنى كلمة Cascading في اسم CSS (أوراق الأنماط المتتالية): القواعد تتراكم، والأقوى أو الأخير يفوز.

٥أين أكتب CSS في VS Code؟

1. في مجلد موقعك أنشئ ملفًّا جديدًا اسمه style.css بجانب index.html.
2. في head كل صفحة أضف: <link rel="stylesheet" href="style.css">.
3. اكتب القواعد في style.css واحفظ، ثم حدّث الصفحة في المتصفح.
4. إن لم يتغير شيء: تأكد من اسم الملف ومساره في href.