<h1>Новости средиземья</h1>
<blockquote>Новости — оперативная информация, которая представляет политический, социальный или экономический интерес для аудитории в своей свежести, то есть сообщения о событиях, произошедших недавно или происходящих в данный момент. Также новостями называют программы (собрание нескольких новостей) на телевидении и радио, а в печатной прессе или на веб-сайтах — сводки новостей, например, в специальной рубрике в газете.</blockquote>
<main>
  <section id="politico">
    <h2>Политика</h2>
    <article class="art">
      <h3>Закон о российской нации решили переименовать из-за «неготовности общества»</h3>
      <p>Разрабатываемый в настоящее время закон «О единстве российской нации и управлении межэтническими отношениями» будет переименован, пишет «Коммерсантъ». Такое решение приняла рабочая группа по подготовке концепции законопроекта из-за «неготовности
        общества...</p>
    </article>
    <article class="art">
      <h3>США начали развертывание THAAD в Южной Корее</h3>
      <p>Спустя день после очередного запуска Северной Кореей баллистических ракет, США направили два мобильных противоракетных комплекса THAAD в Южную Корею для начала развертыванию системы противоракетной обороны на полуострове. Об этом сообщает Bloomberg.
        В связи с...</p>
    </article>
  </section>

  <section id="world">
    <h2>В мире</h2>
    <article class="art">
      <h3>Россия перевела $77 млн в регулярный бюджет ООН</h3>
      <p>Идея поставить вознаграждение топ-менеджеров госкомпаний в зависимость от эффективности работы может быть забыта. Окончательное решение будет принято на совещании у Игоря Шувалова. В правительстве могут отказаться от новой методики расчета вознаграждений...</p>
    </article>
    <article class="art">
      <h3>Послабление для Ирака: Трамп подписал новый иммиграционный указ</h3>
      <p>Президент США Дональд Трамп подписал в понедельник новый указ "О защите от въезда в страну иностранных террористов" вместо предыдущего указа на аналогичную тему, который был приостановлен судом. Новый указ...</p>
    </article>
  </section>

  <section id="sport">
    <h2>Спор</h2>
    <article class="art">
      <h3>«МЮ» предупредил болельщиков об опасностях путешествия в Россию</h3>
      <p>«Манчестер Юнайтед» обратился с письмом к своим болельщикам, которые собираются поддержать команду в выездном матче Лиги Европы против «Ростова». В частности, фанатам не рекомендуется надевать клубную атрибутику. Английский клуб призвал своих болельщиков...</p>
    </article>
    <article class="art">
      <h3>WADA озвучила сумму, потраченную на расследование ситуации с допингом в РФ</h3>
      <p>Всемирное антидопинговое агентство потратило почти 4 млн долларов на расследование ситуации с допингом в России. Годовой бюджет организации при этом составляет 30 млн долларов. WADA озвучила сумму, потраченную на расследование ситуации с допингом
        в РФ. "В обще...</p>
    </article>
  </section>

  <section id="health">
    <h2>Здоровье</h2>
    <article class="art">
      <h3>В Хакасии возможен второй виток заболеваемости гриппом и ОРВИ</h3>
      <p>В Хакасии возможен второй эпидемический подъем заболеваемости гриппом и ОРВИ, сообщает республиканское управление Роспотребнадзора. Вакцинация от гриппа...</p>
    </article>
    <article class="art">
      <h3>Борьба с ВИЧ в России: что ждет пациентов и страну в 2017 году</h3>
      <p>В рамках масштабной коммуникационной кампании по профилактике ВИЧ/СПИДа, организованной Минздравом России, в нашей стране прошла уникальная акция по бесплатному анонимному тестированию на ВИЧ...</p>
    </article>
  </section>

</main>

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}

p {
  text-align: justify;
  text-indent: 1rem;
}

section {
  min-width: 300px;
   width: 40%;
  max-width: 500px;
  margin: 10px;
}
function pageReady() {
  var listSection = document.getElementsByTagName("section");
  var listArticle = document.getElementsByClassName("art");
  var p = document.querySelectorAll("h1 + blockquote");//по сути он один единственный
  
  for(var i=0; i < p.length; ++i) {
    p[i].style.margin = "10px 60px"; 
    p[i].style.padding = "5px";
    p[i].style.textAlign = "justify";
    p[i].style.backgroundColor = "hsla(0,0%,75%,0.3)";
  }
  

  var h2, art;
  var color_border = {
    politico: "green",
    world: "red",
    sport: "blue",
    health: "yellow"
  }
  var color_background = {
    politico: "hsla(120,100%,25%, 0.3)",
    world: "hsla(0,100%,50%, 0.3)",
    sport: "hsla(240,100%,50%, 0.3)",
    health: "hsla(60,100%,50%, 0.3)"
  }

  /* Исправим заголовки для разделов */
  for (var i = 0; i < listSection.length; ++i) {
    h2 = listSection[i].firstElementChild;

    h2.style.textTransform = "uppercase";
    h2.style.paddingLeft = "10px";
    h2.style.backgroundColor = color_background[listSection[i].id];
    //listSection[i].id - содержит имя идентификатора
    //к свойствам объект существет альтернативный доступ через ['nameProperty']
    h2.style.borderLeft = "4px solid " + color_border[listSection[i].id];
  }

  /* Украсим сноски статей */
  for (var i = 0; i < listArticle.length; ++i) {
    art = listArticle[i];
    //art.parentElement.id - получили родительский элемент и сразу же у него берём ID
    art.style.border = "thin solid " + color_border[art.parentElement.id];
    art.style.margin = "10px 0px";
    art.style.padding = "5px";
    art.style.borderRadius = "5px";
  }
}

document.addEventListener("DOMContentLoaded", pageReady);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.