본문으로 건너뛰기

Class

Class

How to Reuse Styles

The CSS class is an identifier (selector) that is used to apply styles to HTML elements or to select elements in JavaScript. It is primarily used to apply the same CSS styles to multiple HTML elements.


Key Features of Classes

  • Classes are defined in CSS with a name that starts with a .. The same class name can be given to different elements to share styles.

  • Multiple classes can be applied to a single HTML element.

  • Class names are defined without spaces and can include letters, numbers, hyphens (-), and underscores (_).


For example, the CSS below defines a class that sets the background color to yellow and the text color to blue.

.highlighted {
background-color: yellow;
color: blue;
}

This class can be applied to h1, h2, and p tags in an HTML document to apply the same styles to them.

<h1 class="highlighted">Highlighted Title</h1>
<h2 class="highlighted">Sub Title</h2>
<p class="highlighted">This is a highlighted paragraph.</p>

Follow the parts emphasized with asterisks in the code.

All cards will have a background color of coral applied.