الدرس 9

تجهيز مشروع learn-css وربط أول ملف تنسيق

معنى أسماء العناصر والمصطلحات

المعنى	Stand For	Name
عنصر لربط المستند بمصدر خارجي		link
نوع العلاقة بالمصدر	Relationship	rel
عنوان المصدر المرتبط	Hypertext Reference	href
قيمة بتحدد إن المصدر ملف تنسيق		stylesheet

هنبدأ بنفس فكرة المشروع الموجودة في الكورس المصور بملف HTML وملف CSS منفصل داخل مجلد css

جهز المجلدات

اعمل مجلد باسم learn-css وافتحه في المحرر
جواه اعمل ملف index.html
اعمل مجلد css وداخله ملف master.css

اتأكد إن اسم الملف master.css بدون أي إمتداد إضافي

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First CSS Project</title>
    <link rel="stylesheet" href="css/master.css">
  </head>
  <body>
    <p class="my-p">This Is 1st Paragraph</p>
    <p>This Is 2nd Paragraph</p>
    <p class="my-p">This Is 3rd Paragraph</p>
  </body>
</html>

ال link موجودة داخل head والمسار css/master.css

معناه ادخل مجلد css اللي جنب ملف HTML ثم افتح master.css

css/master.css

.my-p {
  color: red;
  font-size: 40px;
}

احفظ الملفين وافتح index.html في المتصفح المفروض تشوف الفقرة باللون الأحمر وبحجم أكبر من الافتراضي

النقطة قبل my-p معناها اختيار جميع العناصر اللي عندها نفس قيمة class دة

لاحظ النتيجة في الفقرات وشوف التانية متلونتش

علشان مش بتستعمل ال Class اللي احنا اخترناه ونسقناه في ملف ال CSS

لو التنسيق مش ظاهر

راجع إنك حفظت الملفين
راجع اسم master.css ومسار المجلد css
راجع تطابق my-p في HTML و CSS
اتأكد إنك فاتح ملف HTML من نفس المشروع

متغيرش أكتر من حاجة مرة واحدة علشان تعرف السبب الحقيقي للمشكلة

آخر تعديل للدرس: 12/10/2026