freeCodeCamp/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations...

2.0 KiB

id title challengeType videoUrl localeTitle
bad87fee1348bd9aedf06756 Override Class Declarations with Inline Styles 0 تجاوز التعريفات فئة باستخدام الأنماط المضمّنة

Description

لذلك قمنا ثبت أن الإعلانات معرف تجاوز الإعلانات الطبقة، بغض النظر عن مكان يتم الإعلان عنها في حياتك style CSS عنصر. هناك طرق أخرى يمكنك من خلالها تجاوز CSS. هل تتذكر الأنماط المضمنة؟

Instructions

undefined

Tests

tests:
  - text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
    testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
  - text: ''
    testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
  - text: يجب أن يحتوي عنصر <code>h1</code> على معرف <code>orange-text</code> .
    testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
  - text: ''
    testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
  - text: يجب أن يكون عنصر <code>h1</code> أبيض.
    testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'

Challenge Seed

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

Solution

// solution required