複数のクラスを指定して、色だけを変えたい

Question

複数のページを作る際、表題の形はそのままに、色だけ変えたいです。
以下のようにHTMLとCSSを記述し、複数のページを作成する際、
・基本の形を示すクラス（.page_title）
・色だけを示すクラス(.color_001および.color_002)
を作成し、基本の形と色を指定する方法を試しましたが、色は変化しませんでした。

<div class="page_title_div">
  <P class="page_title">オリエンテーション</P>
</div>

.page_title_div {
  text-align: center;
}
.page_title {
  display: inline-block;
  position: relative;
  text-align: center;
  width: 90%;
  height: 150px;
  line-height: 150px;
  border: 0;
  margin: 5px 0 5px 0;
  padding: 10px 10px;
  border-radius: 20px;
  font-size: 8em;
}
.color_001 {
  background-color: orange;
}
.color_002 {
  background-color: red;
}

クラスの指定は複数できるということで、この方法でうまくいくと思ったのですが・・・改善点を何卒ご教授頂きたく存じます。

Answer 1

<div class="page_title_div color_001">
  <P class="page_title color_002">オリエンテーション</P>
</div>
コード

Comments

[jyansinkai]

そこに並べれば良かったのですね。早速の回答。誠に有難うございました。