HTML <p> class Attribute

The class attribute on a <p> tag assigns one or more classnames to the paragraph. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling a <p> element.

The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.

<style>
  .paragraph {background:moccasin; padding:15px; width:400px; }
</style>

<article>
  <p class="paragraph">
    The Palace Museum is a national museum housed in 
    the Forbidden City at the core of Beijing, China. 
    It was established in 1925 after the last Emperor 
    of China was evicted from his palace, and opened 
    its doors to the public.
  </p>
</article>

Using class

The class attribute assigns one or more classnames to the <p> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the p element.

JavaScript uses classes to access one or more elements by classname.

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


Syntax

<p class="classnames">

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling a <p> element.
Clicking the button toggles a classname that changes the paragraph background color.

The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.


<style>
  .paragraph { padding: 15px; width: 400px; }
  .bg-mocassin { background: moccasin; }
  .bg-cornsilk { background: cornsilk; }
</style>

<section>
  <p id="myparagraph" class="paragraph bg-mocassin">
      The Palace Museum is a national museum housed in 
      the Forbidden City at the core of Beijing, China. 
      It was established in 1925 after the last Emperor 
      of China was evicted from his palace, and opened 
      its doors to the public.
  </p>
</section>

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

<script>
  let toggle = () => {
    let element = document.getElementById("myparagraph");
    element.classList.toggle("bg-cornsilk");
  }
</script>

Code explanation

Three CSS classes are defined in the <style> element.

The class attribute in <p> assigns two of those.

Repeatedly clicking the button toggles the third class, changing the paragraph background color.


Browser support

Here is when class support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <p>
Guides