CSS 생성 방법

스타일 시트 삽입 방법

스타일 시트를 읽을 때, 브라우저는 그것에 따라 HTML 문서를 포맷합니다. 스타일 시트를 삽입하는 방법은 세 가지가 있습니다：

외부 스타일 시트

스타일이 많은 페이지에 적용되어야 할 때는 외부 스타일 시트가 이상적입니다. 외부 스타일 시트를 사용할 때는 파일을 변경하면 전체 사이트의 외관이 변경됩니다. 각 페이지는 <link> 태그를 통해 스타일 시트에 링크합니다.<link> 태그는 (문서의) 헤더에 위치합니다：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

브라우저는 mystyle.css 파일에서 스타일 선언을 읽고, 그에 따라 문서를 포맷합니다。

외부 스타일 시트는 어떤 텍스트 편집기에서도 편집할 수 있습니다. 파일은 어떤 HTML 태그도 포함할 수 없습니다. 스타일 시트는 .css 확장자로 저장해야 합니다. 이는 스타일 시트 파일의 예제입니다：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

속성 값과 단위 사이에 공백을 두지 마세요. 예를 들어, "margin-left: 20 px" 대신 "margin-left: 20px"을 사용하면 IE 6에서만 유효하며, Mozilla/Firefox 또는 Netscape에서는 올바르게 작동하지 않습니다。

내부 스타일 시트

단일 문서가 특별한 스타일을 필요로 할 때는 내부 스타일 시트를 사용해야 합니다. 이를 위해 <style> 태그를 문서 헤더에 정의할 수 있습니다. 이렇게 합니다:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

인라인 스타일

표현과 내용을 혼합하기 때문에, 인라인 스타일은 스타일 시트의 많은 장점을 잃게 됩니다. 이 방법을 조심스럽게 사용하세요. 예를 들어, 스타일이 단일 요소에만 적용되어야 할 때는 이렇게 하지 마세요。

인라인 스타일을 사용하려면, 관련 태그 내에 스타일(style) 속성을 사용해야 합니다. 스타일 속성은 어떤 CSS 속성이든 포함할 수 있습니다. 이 예제에서는 문단의 색상과 좌 외쪽 마argins을 변경하는 방법을 보여줍니다：

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

다중 스타일

만약 어떤 속성이 다른 스타일 시트에서 같은 선택자에 의해 정의되면, 속성 값은 더 구체적인 스타일 시트에서 상속됩니다.

예를 들어, 외부 스타일 시트는 h3 선택자에 대해 세 가지 속성을 가지고 있습니다:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

내부 스타일 시트는 h3 선택자에 대해 두 가지 속성을 가지고 있습니다:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

이 페이지가 내부 스타일 시트와 외부 스타일 시트를 링크하고 있으면, h3는 다음과 같은 스타일을 얻습니다:

color: red; 
text-align: right; 
font-size: 20pt;

따라서 색상 속성은 외부 스타일 시트에서 상속되며, 텍스트 정렬(text-alignment)과 글자 크기(font-size)는 내부 스타일 시트의 규칙에 대체됩니다.