Css 적용 방식 - inline, 내부, 외부

 

 

 

StyleType - Inline

<h1>제목1</h1>
<p>내용11111</p>
<p style="color:blue;">내용2222</p>
<p>내용3333</p>

제목1

내용11111

내용2222

내용3333

 

StyleType - 내부

<style>
h1#testh1 {      
  padding:10px;
  background-color:#bbb;
  color:#fff;
}
</style>
<h1 id="testh1">제목1</h1>
<p>내용11111</p>
<p>내용2222</p>
<p>내용3333</p>

제목1

내용11111

내용2222

내용3333

만약 "testh1"의 값으로 구분 하지 않으면 전체로 적용되어, 지금 화면의 주변 다른 예제들에도 h1의 스타일이 변경되어 버린다

 

Html속 Css적용(Html내부) Ex1

 

StyleType - 외부

test.css파일

h1 {      
  padding:10px;
  background-color:#faf;
  color:#fff;
}

<link rel="stylesheet" href="test.css">
<h1>제목1</h1>
<p>내용11111</p>
<p>내용2222</p>
<p>내용3333</p>