CSS · الدرس ١ من ٤

غيّر لون عنوانك

كتبت محتوى الصفحة في HTML. الآن غيّر شكله باستخدام CSS. في المثال، h1 يختار العنوان، وcolor تحدّد لون نصّه.

جرّب الآن

غيّر seagreen إلى purple، ثم شغّل الكود. جرّب لوناً آخر للعنوان.

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.

        CSS · style.cssh1 {
  color: seagreen;
}
main {
  background: #f0f7f2;
}
        عدّل HTML لمشروعك
            HTML · index.html<main>
  <h1>مرحباً، أنا سارة</h1>
  <p>هذه صفحتي الأولى.</p>
  <ul>
    <li>القراءة</li>
    <li>الرسم</li>
    <li>التعلّم</li>
  </ul>
</main>
            
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

تغيّر لون العنوان؟ جرّب تغيير لون الخلفية أيضاً، ثم انتقل إلى المسافات.

التالي: المسافات والحدود

أحتاج مساعدة

اكتب اسم اللون بعد النقطتين، واترك الفاصلة المنقوطة والأقواس كما هي. إذا لم يتغيّر العنوان، تأكّد من كتابة color داخل قاعدة h1.

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك