index.html

<html>
<head>
  <title>프로그래밍 커리큘럼</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <div class="orange">
        <h2>HTML</h2>
    </div>
    <div class="green">
        <h2>CSS</h2>
    </div>
    <div class="orange">
        <h2>JAVASCRIPT</h2>
    </div>
    <div class="green">
        <h2>PYTHON</h2>
    </div>
    <div class="orange">
        <h2>JAVA</h2>
    </div>

</body>
</html>

css/styles.css

.orange h2{
  font-size: 30px;
  padding: 20px;
  background: #FA987D;
}

.green h2{
  font-size: 30px;
  padding: 20px;
  background: #72CCA7;
}

.orange {

font-size: 30px;

padding: 20px;

background: #FA987D;

}

.orange h2 {

font-size: 30px;

padding: 20px;

background: #72CCA7;

}

이 둘의 차이가 무엇인가요?

상속의 개념을 활용해서 처음엔 위와 같이 하려고 했는데

결과가 다르더군요