텍스트 모두 빨간색으로 바꾸기

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

CSS는 정답이 하나가 아니라 여러 가지 방법들이 있어요!

1. 개별로 인라인 스타일 적용하기

   <div>
   	<h1 style="color:red;">Hello</h1>
   	<h2 style="color:red;">Hello</h2>
   	<p style="color:red;">Hello</p>
   </div>
   

2. 태그 선택자 적용하기

   <div>
   	<h1>Hello</h1>
   	<h2>Hello</h2>
   	<p>Hello</p>
   </div>
   

h1{color:red;}
h2{color:red;}
p {color:red;}

1. 그룹 선택자(,)로 적용하기

   <div>
   	<h1>Hello</h1>
   	<h2>Hello</h2>
   	<p>Hello</p>
   </div>
   

h1, 
h2,
p {color:red;}

1. 상속 이용하기

   <div>
   	<h1>Hello</h1>
   	<h2>Hello</h2>
   	<p>Hello</p>
   </div>
   

div{
	color:red;
}

상속(Inheritance)

• CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있습니다!
• 앞에 본 div의 color 속성은 자식인 h1, h2, p에게 상속이 됩니다!
• 하지만 width, height, margin, padding, border 와 같은 것은 상속되지 않습니다.

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

div {
	color: red;
	border: 5px solid pink;
}

• inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 합니다.
• initial: 브라우저 기본 스타일 속성을 따르게 합니다.

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

div {
	color: red;	
	border: 5px solid pink;
}
h1 { **border: inherit;** }

• 그리고 button , input 요소처럼 form 관련 태그들은 상속받지 않기도 합니다.
• 이것은 브라우저별로 적용된 스타일이 있기 때문입니다.

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
	<button>Hello</button>
  <input type="text" value="hello">
</div>

div {
	color: red;	
	border: 5px solid pink;
}
h1 { **border: inherit;** }