1. Type selector

유형 선택자(Type selector)는 HTML태그를 선택자로 사용합니다.
 

  위의 예제에서 선택자는 p가 되고, p태그로 설정된 문서에 스타일시트가 적용됩니다. 또한 다음과 같이 여러 선택자가 같은 속성을 가지고 있을 때는 묶어서 사용할 수 있습니다.

h1 { font-family: Helvetica }
h2 { font-family: Helvetica }
p { font-family: Helvetica }

  다음과 같이 사용하여 코드를 더욱 간단하게 만들 수 있습니다. 위의 코드와 같은 결과를 나타냅니다.

h1, h2, p { font-family: Helvetica }

 그리고, 하나의 선택자가 여러 속성을 가지고 있을 때에도 묶어서 사용할 수 있습니다.

H3 { font-weight : bold }
H3 { font-size : 12pt }
H3 { line-height : 14pt }
H3 { font-family : Helvetica }

위의 내용을 다음과 같이 설정하여도 같은 결과를 나타냅니다.

H3 { font-weight : bold ; font-size : 12pt ; line-height : 14pt ; font-family : Helvetica }

  이처럼 속성과 속성 사이를 세미콜론(;)을 사용하여 더욱 간단하게 코딩할 수 있습니다.
  어떤 속성은 shorthand property라고 부르는 일종의 대표속성을 가지고 있어서, 위의 H1에 대한 예는 아래와 같이 더 간단하게 만들 수 있다.

H1 { font : bold 12pt/14pt Helvetica }

2. <div>와 <span>

 div와 span은 스타일시트와 사용되기 위해 만들어진 HTML태그 입니다.

<div>태그는 블록 수준의 태그를 구별하고 다른 HTML태그를 포함하기 위해서 사용됩니다.

<span>태그는 문장 내에서 스타일을 바꾸기 위해 사용됩니다.

3. Contextual selectors

 이 속성은 HTML태그가 설정되어있는 순서에 따라 스타일시트를 적용합니다.

이 선택자를 설정하여 적용시키려면 꼭 HTML태그의 순서가 같아야 합니다. 그 순서는 h1 em { color : red }과 같이 순서대로 한 칸씩 띄어서 입력하면 됩니다.

다음과 같이 묶어서 사용할 수도 있습니다.

4. Class, ID attribute selectors

 속성 선택자(attribute selectors)는 HTML태그의 속성을 이용하여 스타일을 규정합니다.

1) Class attribute selector

  Class속성을 이용하여 HTML태그에 스타일을 추가할 수 있습니다. class를 사용할 때는 마침표(.)를 사용하여 설정합니다.

.red { color : red }

class="red"라고 설정되어있는 부분에 모두 스타일시트가 적용됩니다.

h1.blue { color : blue }

class="blue"속성이 들어간 h1 태그에만 적용됩니다.

2) Id attribute selector

id속성은 class속성과 비슷하지만, class와는 다르게 어떠한 특정 요소를 대상으로 한다는 점이 다릅니다. 여러가지 요소들이 사용할 때는 class를 사용하지만, 특정한 요소 하나만이 사용할 때는 id를 사용합니다. id를 설정할 때는 #를 사용합니다.

#red { color : red }

id="red라고 설정되어있는 부분에 모두 스타일시트가 적용됩니다.

h1#blue { color : blue }

id="blue"속성이 들어간 h1 태그에만 적용됩니다.

5. Pseudo-elements and pseudo-classes

1) Pseudo-elements

  pseudo-element는 첫번째 행(First-line)과 첫번째 문자(First-letter)가 있습니다. 각각의 요소들은 웹브라우저에서 웹페이지가 표시될 때 HTML문서의 첫 번째 행이나 첫 번째 문자에 스타일시트를 적용합니다.

  이 스타일시트는 콜론(:)으로 구분할 수 있으며, 아직까지 웹브라우저에서 잘 지원되지 않습니다.

웹브라우저에서 나타나는 웹페이지의서 <p>태그로 설정된 문서의 첫 번째 행에 색상을 적용하겠습니다.

p : first-line { color : blue }

<p>태그로 설정된 문단의 텍스트 중에서 웹페이지에 나타나는 첫 번째 행의 색을 파란색으로 설정합니다.

또한, 첫 번째 문자에만 스타일시트를 적용할 수도 있는데 다음과 같습니다.

p : first-letter { color : blue }

<p>태그로 설정된 문단의 첫 번째 텍스트의 색상을 파란색으로 설정합니다.

pseudo-element(First-line, First-letter)는 클론(:)으로 구별할 수 있습니다.

하지만, 아직까지 웹브라우저에서 pseudo-element를 완벽하게 지원하지는 않습니다.

2) pseudo-classes

링크가 설정되어있는 텍스트에 스타일시트를 적용합니다.