body {
  background-color: #fffad7;
  /* background-image: url(../images/bg/italy-photo.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed; */
}

body {
  font-family: sans-serif;
}

<p>
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
  ぜひ自分でつくって食べてみてね！
</p>

・・・中略・・・

<p>
        Copyright &copy; pasta for everyone All Rights Reserved.
</p>

p {
  font-size: 20px;
  line-height: 1.75;
  text-indent: 1em;
  font-style: italic;
  background-image: url(../images/bg/stripe.png);
}

<p>
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
  ぜひ自分でつくって食べてみてね！
</p>

<p>
        Copyright &copy; pasta for everyone All Rights Reserved.
</p>

<p class="main-text">
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
  ぜひ自分でつくって食べてみてね！
</p>

・・・中略・・・

<p class="copyright-text">
        Copyright &copy; pasta for everyone All Rights Reserved.
</p>

/* p {
  font-size: 20px;
  line-height: 1.75;
  text-indent: 1em;
  font-style: italic;
  background-image: url(../images/bg/stripe.png);
} */

.main-text {
  font-size: 20px;
  line-height: 1.75;
}

.copyright-text {
  font-size: 14px;
  text-align: center;
}

p.main-text {
  font-size: 20px;
  line-height: 1.75;
}

p.copyright-text {
  font-size: 14px;
  text-align: center;
}

<h4 class="copyright-text"></h4>

p.copyright-text {
  font-size: 14px;
  text-align: center;
}

<要素名 class="class名1 class名2 class名3・・・・"></要素名>

<h2 class="vegetable-name tomato">トマト</h2>

<h2 class="vegetable-name green-pepper">ピーマン</h2>

<h2 class="vegetable-name eggplant">ナス</h2>

/*共通のスタイル*/
.vegetable-name {
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 2px;
  text-indent: 0.5em;
}

/*個別のスタイル*/
.tomato {
  background-color: #dd0000; /*赤*/
}

.green-pepper {
  background-color: #00aa06; /*緑*/
}

.eggplant {
  background-color: #800097; /*紫*/
}

.vegetable-name.tomato {
  color: #fbff00; /*（文字色が黄色）*/
}

<ul>
  <li>
    <a href="index.html">HOME</a>
  </li>
</ul>

<h3>材料</h3>
  <ul>
    <li>にんにく・・・・・1片</li>
    <li>鷹の爪・・・・・1つ</li>
    <li>イタリアンパセリ・・・・・適量</li>
    <li>オリーブオイル・・・・・適量</li>
    <li>パスタ麺・・・・・80g</li>
  </ul>

  <h3>作り方</h3>
  <ol>
    <li>フライパンにオリーブオイルを大さじ2入れる。</li>
    <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
    <li>同時にパスタを茹ではじめる。</li>
    <li>にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。</li>
    <li>少し早めに上げたパスタをフライパンに入れる。</li>
    <li>ソースを絡めたら完成。</li>
  </ol>

<ul>
  <li class="list-item">にんにく・・・・・1片</li>
  <li class="list-item">鷹の爪・・・・・1つ</li>
  <li class="list-item">イタリアンパセリ・・・・・適量</li>
  <li class="list-item">オリーブオイル・・・・・適量</li>
  <li class="list-item">パスタ麺・・・・・80g</li>
</ul>

.list-item {
  font-size: 20px;
  line-height: 2;
}

<ol>
  <li>フライパンにオリーブオイルを大さじ2入れる。</li>
  <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
  <li>同時にパスタを茹ではじめる。</li>
  <li>にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。</li>
  <li>少し早めに上げたパスタをフライパンに入れる。</li>
  <li>ソースを絡めたら完成。</li>
</ol>

ol li {
  line-height: 1.8;
}

<ol class="howto-list">
  <li class="list-item2">フライパンにオリーブオイルを大さじ2入れる。</li>
  <li class="list-item2">にんにくと鷹の爪を入れて弱火で加熱する。</li>
  <li class="list-item2">同時にパスタを茹ではじめる。</li>
  <li class="list-item2">にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。</li>
  <li class="list-item2">少し早めに上げたパスタをフライパンに入れる。</li>
  <li class="list-item2">ソースを絡めたら完成。</li>
</ol>

.howto-list .list-item2 {
  line-height: 1.8;
}

/* 詳細度が高い方が優先される */
.howto-list .list-item2 {
  color: blue;
}

/* こちらは効かない（上書きできない） */
.list-item2 {
  color: red;
}

<h1 id="heading">みんなのパスタレシピ</h1>

/* h1 {
  color: #ffffff;
  font-size: 45px;
  text-align: center;
  text-shadow: 2px 2px 10px #6c6c6c;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  background-color: #ff0000;
} */

#heading {
  color: #ffffff;
  font-size: 45px;
  text-align: center;
  letter-spacing: 0.1em;
  background-color: #ff0000;
}

h1, h2, h3 {
  color:#ffffff;
}

.parent > p {
  color: red;
}

<div class="parent">
  <p>このテキスト色は赤になる。</p>
  <div>
    <p>このテキストには適用されない。</p>
  </div>
</div>

h1 + p {
  color: blue;
}

<div>
  <h1>見出し</h1>
  <p>このテキストは青くなる。</p> <!-- ←このp要素のみにCSSが適用される -->
  <p>このテキストに青は適用されない。</p>
  <p>このテキストにも青は適用されない。</p>
</div>

a[href] {
    text-decoration: none;
}

input[type="text"] {
  background-color: lightgray;
}

<input type="text"> <!-- 背景色がライトグレーになる -->
<input type="submit"> <!-- 背景色は適用されない -->

 a[href^="https://"] {
  color: green;
}

<a href="https://www.webcoach.jp/">WEBCOACH</a><!-- テキスト色が緑になる -->
<a href="index.html">HOME</a><!-- テキスト色に変化なし -->

* {
  margin: 0;
  padding: 0;
}

.container p {
  color: blue;
}

p {
  color: red;
}