CSS: Приоритет стилей

Говоря о каскадности, возникает вопрос: «А что произойдет, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:

• Стили в атрибуте тега
• Стили в отдельном файле
• Стили по умолчанию, которые добавляет браузер

Если в одном из источников правила дублируются, то применятся те, которые были указаны последними.

.blue {
  color: blue;
}

.blue {
  color: red;
}

/* В данном случае текст в блоках с классом .blue будет красным, так как будет использовано последнее указанное правило */

У селекторов также существуют приоритеты. Для определения приоритета можно использовать таблицу, где каждому селектору даётся «вес»:

• Селектор по тегу: 1
• Селектор по классу: 10
• Селектор по ID: 100
• Стиль в атрибуте тега: 1000

<style>
  .blue {
    color: blue;
  }

  #red-block {
    color: red;
  }
</style>

<div class="blue" id="red-block" style="color: white;">Текст</div>

Какого цвета будет текст внутри блока? Воспользуемся таблицей выше, из которой следует, что селектор по классу (.blue) имеет приоритет 10, а селектор по id (#red-block) имеет приоритет 100. Значит, правило для id #red-block «перебьёт» правило для класса .blue. Помимо этого у нас есть инлайн стиль style="color: white;", который имеет «вес» 1000, а это значит, что он обладает наивысшим приоритетом.

Таким образом текст внутри блока будет белым.

Задание

Добавьте в редактор p с классом border и id no-border. Установите следующие правила:
* Для класса border установите сплошную рамку любого цвета толщиной 1px.
* Для id no-border отмените рамку. Используйте значение none у правила border-style.

Стили запишите в теге style.