تعطل أكواد الcss

هناك خطأ بسيط في كتابة أسم ال class  كما أخبرك المدرب بالأعلى كما تري في الصورتين هناك إختلاف في اسم الclass قم بجعل الإسمين متطابقين "about-me"

لننظر إلى كود CSS بتمعن، أنت تضع background-color على العنصر ذو الصف .about-me، فلنبحث عن about-me ضمن ملف html.

ستجد أنه لا يوجد about-me لكن إن بحثنا عن "about me" سوف نجدها، بالمختصر اسم الصف هو about-me مع dash وليس مسافة إذاً نغير الكود التالي:

<div class="about me">
  <div class="container">
    <div class="image">
      <img src="../image/300px.png" alt="test">
    </div>
    <div class="info">
      info test
    </div>
  </div>
</div>

إلى التالي:

<!-- this is the line that has changed -->
<div class="about-me">
  <div class="container">
    <div class="image">
      <img src="../image/300px.png" alt="test">
    </div>
    <div class="info">
      info test
    </div>
  </div>
</div>

للعلم لا يمكن لصف CSS أن يكون في اسمه مسافة أصلاً ﻷن الكود التالي:

<div class="about me">

يسند صفين مستقلين إلى العنصر واسمهما about و me

إسم الصنف هو about-me لكن عند تطبيقك للصنف في العنصر كتبت about me 

<!--start about me-->

    <div class="about me">
        <div class="container">
            <div class="image">
                <img src="../image/300px.png" alt="test">
            </div>
            <div class="info">
                info test
            </div>
        </div>
    </div>

    <!--end about me-->

هذا يعني أنك تُطبق صنفي تنسيقات على العُنصر أحدهما about و الثاني me لأنك فصلت الإثنين بمسافة.

إذا كنت تريد تطبيق الصنف about-me عليك أن تكتبه بشكل صحيح:

<div class="about-me">
  
</div>