- 웹 문서의 편집을 자유롭게
- 글꼴, 자간/행간, 배경, 테두리, 레이아웃 배치 등을 html의 제한을 넘어 문서를 보기 좋게 꾸민다.
- 통일감 있는 문서 작성

● 스타일 시트를 사용하는 방법
1. 문서 내부에 정의하기 (Embedded Style)
<style type = "text/css">
선택자 {Property:value}
</style>
예)
<html>
<head>
<style type="text/css">
p {font-size:50;color:pink}
h3 {font-size:12;color:skyblue}
</style>
</head>
<body>
<p>CSS의 Embedded Styele</p>
<h3>선택자로 h3사용</h3>
</body>
</html>

2. 태그에 직접 정의하기(Inline Style)
<태그 style="property:value">
예)
<html>
<body>
<div style="font-family:궁서;font-size:30pt;color:lime">InlineStyle로 지정하여 처리</div>
</body>
</html>

3. 외부 문서에서 연결하기(Linked Style)
1) css문서(csslink.css문서)
u {background-color:skyblue;font-size:30;color:white}

2) html문서
<html>
<head>
<Link rel="stylesheet" type"text/css" href="csslink.css">
</head>
<body>
<u>언더라인이 적용된 외부파일 이용</u><br>
이것은 아무것도 적용되지 않는 부분
</body>
</html>

● 스타일시트에서 사용하는 단위
절대단위
- in : 인치(1인치=2.54cm)
- cm : 센티미터
- mm : 미리미터
- pt : 포인트(1포인트=1/72인치)
- pc : 파이카(1파이카=12포인트)
상대단위
- % : 기준이 되는 크기에 대한 비율
- px : 1픽셀을 1로하는 단위(화면의 해상도에 따라 상대적임)
- ex : 그 범위에서 유효한 폰트의 소문자 x높이를 1로하는 단위
- em : 그 범위에서 유효한 폰트의 높이를 1로 하는 단위

● 스타일 시트의 기본
Selector{property:value;property:value}
->Selector : 스타일을 적용할려는 대상지정

1. head에 지정하기
- 하나의 태그에 스타일을 지정
태그 {property:value;property:value;...}

2. 여러 태그에 같은 스타일 지정하기
태그1,태그2,태그3 {property:value;property:value;...}

예)
<html>
<head>
<style type="text/css">
p,h2 {font-family:궁서;font-size:25}
i,h3 {font-family:돋움;font-size:30}
</style>
</head>
<body>
<p>p태그와 h2태그는 같은 글씨체, 글자 크기가 적용</p>
<h2>p태그와 h2태그는 같은 글씨체, 글자 크기가 적용</h2>
<i>i태그와 h3태그는 같은 글자체, 글자 크기가 적용</i>
<h3>i태그와 h3태그는 같은 글자체, 글자 크기가 적용</h3>
</body>
</html>

3. 하위 태그에 스타일 지정하기
- 상위 태그에 포함된 하위 태그에만 스타일을 적용할 경우 사용
- 태그사이는 space 로 구분
태그1 태그2 태그3 {property:value;property:value;...}

예)
<html>
<head>
<style type="text/css">
p u {background-color:yellow;color:blue}
div span {font-family:궁서;color:purple}
</style>
</head>
<body>
<p>여기는 문단을 표시하는 p태그 <u>여기는 언더라인 u태그</u>입니다
<div><span>하위태그에 스타일이 적용되는 예문입니다</span></div>
</body>
</html>

4. 클래스 이용하기
- 같은 태그라도 상황에 따라 각각 다른 스타일을 지정하고자 할때 사용
[정의]
태그.class이름 {property:value;property:value;...}
      .class이름 {property:value;property:value;...}
[적용]
<태그 class="class이름">

예)
<html>
<head>
<style type="text/css">
.bg {background-color:green;color:white}
td.bg1 {background-color:skyblue}
td.bg2 {background-color:pink}
a:visited {text-decoration:none}
a:hover {background-color:purple;color:white}
</style>
</head>
<body>
<p class="bg">안녕하세요
<p>
<table border=2>
<tr><td class="bg1">1라인입니다</td></tr>
<tr><td class="bg2"><a href="http://www.naver.com">2라인입니다</a></td></tr>
<tr><td>3라인입니다</td></tr>
<tr><td>4라인입니다</td></tr>
</table>
naver
</body>
</html>

5. ID이용하기
- id는 클래스와 비슷하지만 한 페이지에서 하나만 부여한다(JavaScript에서 제어)
[정의]
#id이름 {property:value;property:value;...}
[적용]
<태그 id="id이름">

예)
<html>
<head>
<style type="text/css">
#useid {background-color:black;color:white}
</style>
</head>
<body id="useid">
여기는 몸체 입니다
</body>
</html>