.alert { /* alert 클래스를 선택: .class 선택자 */
    padding: 0.5em;
    background-color: gold;
}
.caution { /* caution 클래스를 선택: .class 선택자 */
    color: orangered;
}
<p class="alert">알릴 내용이 있습니다.</p>
<p>문단 요소입니다.</p>
<p class="alert caution">주의할 내용이 있습니다.</p>
<p>문단 요소입니다.</p>
실제 적용된 모습
<style>
    div { /* 모든 div 요소의 스타일링 */
        padding: 0.5em;
        border: 1px solid red;
        margin-bottom: 0.5em;
    }
    .box { /* box 클래스를 가지고 있는 div 요소만 배경색 추가 */
        background-color: gold;
    }
</style>

<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div>div</div>
<div>div</div>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div>div</div>
<div class="box">box 클래스</div>
<button id="highlight-button" type="button">클릭해서 텍스트 바꾸기</button>

<script>
    const highlightButton = document.getElementById("highlight-button");

    highlightButton.addEventListener("click", () => {
        // 클래스 이름이 'box'인 모든 요소를 가져옵니다.
        const boxes = document.querySelectorAll(".box");

        boxes.forEach(box => {
            box.innerHTML = "box 클래스 반갑습니다.";
        });
    });
</script>
실제 적용된 모습 버튼을 클릭해 보세요!
<p class="a" class="b">하나의 HTML 요소에 여러 개의 클래스 이름을 지정할 수 있습니다.</p>
<p class="a b">하나의 HTML 요소에 여러 개의 클래스 이름을 지정할 수 있습니다.</p>