HTML <article> class Attribute

A class attribute styling an <article> element.
This class adds an accent border to the left of the article.

<style>
  .blue-border {border-left:solid 4px lightblue; padding-left:20px;}
</style>

<article class="blue-border">
  <h2>Early life of Van Gogh</h2>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for 
     a visit. 
  </p>
  <p>
     He was thrilled and took long walks with her. Cornelia was seven 
     years older than he was and had an eight-year-old son. Van Gogh 
     surprised everyone by declaring his love to her and proposing marriage. 
     She refused with the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

Tip:  class is a global attribute that can be applied to any HTML element.

<article class="classnames" >

A class attribute styling an <article>.
Clicking the button will toggle a classname that changes the border color.

<style>
  .bordered { border-left: solid 4px white; padding-left:20px;}
  .lightblue { border-color: lightblue }
  .orangered { border-color: orangered; }
</style>

<article class="bordered lightblue" id="myarticle">
  <h2>Early life of Van Gogh</h2>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for 
     a visit. 
  </p>
  <p>
     He was thrilled and took long walks with her. Cornelia was seven 
     years older than he was and had an eight-year-old son. Van Gogh 
     surprised everyone by declaring his love to her and proposing marriage. 
     She refused with the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

<br/>
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
     let element = document.getElementById("myarticle");
     element.classList.toggle("orangered");
  }
</script>

Code explanation

Here is when class support started for each browser:

Chrome	6.0	Sep 2010
Firefox	4.0	Mar 2011
IE/Edge	9.0	Mar 2011
Opera	11.1	Mar 2011
Safari	5.0	Jun 2010

• Our HTML article Tag Reference
• Our HTML class Attribute Reference
• Our CSS border Property Reference
• Our CSS Text Tutorial