<LINK> 태그는 HTML 문서에서 HEAD 사이에 두어야 한다. 옵션인 TYPE 속성은 MIME 형식--CSS의 경우 text/css--을 지정하는데 사용되며, 브로우저가 지원하지 못하는 Style Sheet 형식은 무시할 수 있도록 해준다. 옵션인 MEDIA 속성은 Style Sheet가 적용되어야하는 매체를 지정한다. 가능한 값은 다음과 같다.
print, 프린터 출력인 경우
screen, 화면 출력인 경우
projection, 프로젝터 출력인 경우
braille, 점자출력 장치로 출력하는 경우
aural, 음성 출력인 경우
all, 모든 매체를 통한 출력인 경우(내정치)
여러 매체를 지정할 때에는 각 매체를 쉼표로 분리하거나 all을 사용한다
REL 속성은 HTML문서와 연결된 파일사이의 관계를 정의하는데 사용된다. REL=StyleSheet은 영구적인 스타일이나 내정된 스타일을 지정하는 반면 REL="Alternate StyleSheet"은 보조 스타일을 지정한다. 예의 첫번째 <LINK>에서 처럼 TITLE 속성이 없는 경우 영구적인 스타일로 정의된다.
내정된 스타일은 예에서 두번째 <LINK>에서처럼 자동적으로 적용되는 스타일이다. REL=StyleSheet과 TITLE를 함께 사용해서 내정된 스타일을 지정한다.
보조 스타일은 REL="Alternate StyleSheet"를 이용해서 지정한다. 예에서 세번째 <LINK> 태그는 보조 스타일을 지정한다. 보조 스타일은 사용자가 내정된 스타일을 대치하기위해 선택할 수 있다.
또한 하나의 스타일이 여러 Style Sheet를 통해 주어질 수도 있다.
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
이 예에서 세개의 Style-Sheet가 내정된 스타일로서 적용될 하나의 "Contemporary"로 결합된다. 여러개의 Style Sheet를 하나의 스타일로 결합하기위해, 각각의 Style Sheet에 동일한 TITLE을 사용해야 한다.
외부 Style Sheet는 스타일이 많은 페이지에 적용될 때 이상적이다. 외부 스타일 쉬트로 저자는 간단히 한 파일을 변경함으로서 전 사이트의 외관을 변경할 수 있다. 뿐만아니라 대부분의 브로우저는 외부 스타일 쉬트를 캐쉬에 보관하므로 일단 스타일 쉬트가 캐쉬에 보관되면 페이지를 표시하는데 발생하는 지연을 피할 수 있다.
Style Sheet는 STYLE 태그로 문서 내에 끼워넣을 수 있다.
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE 태그는 문서내에서 HEAD 태그사이에 와야 한다. 옵션인 TYPE 속성은 LINK 태그에서와 같은 기능으로 MIME 형식을 지정하는데 사용된다. 따라서 유사하게 TITLE과 MEDIA 속성 또한 STYLE 태그내에서 지정될 수 있다.
STYLE 태그를 인식하지 못하는 오래된 브로우저의 경우 STYLE 태그가 BODY 태그 사이에 온다면 STYLE 태그의 내용을 보여주게 되며 결과적으로 Style Sheet를 사용자가 보게된다. 이것을 막기위해 STYLE 태그의 내용은 위의 예에서 처럼 SGML 주석(<!-- comment -->)에 포함시켜야 한다.
Style Sheet 끼워넣기는 하나의 문서가 유일한 스타일을 가질때 사용된다. 동일한 Style Sheet가 여러 문서에서 사용된다면, 그때 외부 style sheet를 사용하는 것이 적당하다.
Style Sheet는 CSS의 @import 문으로 불러올 수 있다. @import 문은 CSS 파일이나 STYLE 태그 내에서 사용된다.
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
다른 CSS 규칙이 STYLE 태그내에 포함될 수 있지만 @import 문은 Style Sheet의 시작부에 있어야 한다는 것에 주의하기 바란다. Style Sheet내에 지정된 임의의 규칙은 불러온 스타일 쉬트내의 동일한 규칙보다 우선한다. 예를들어 불러온 스타일 쉬트중 하나가 DT { background: aqua }를 포함할지라도 DT 태그는 노란 배경색을 갖는다.
Style Sheet을 불러오는 순서는 이들을 어떻게 종속시킬 것인가를 결정하는데 중요하다. 위의 예에서 style.css가 STRONG 태그를 적색으로 보여지도록 지정하고 있고 punk.css가 STRONG 태그를 노란색으로 보여지도록 지정하고 있다면 나중에 불러온 규칙의 우선순위가 높으므로 STRONG 태그는 노란색으로 보여질 것이다.
불러온 스타일 쉬트는 스타일 쉬트를 모듈화할 때 유용하다. 예를들어 어떤 사이트는 사용된 선택자에의해 스타일 쉬트를 분리한다. BODY, P, H1, H2와 같은 기본적인 태그에대한 규칙을 정의한 simple.css있고, CODE, BLOCKQUOTE, DFN과 같이 추가적인 태그를 정의한 extra.css라는 스타일 쉬트가 있다. 또한 table 태그에대한 규칙을 정의하는데 사용될 table.css라는 스타일 쉬트가 있다. 이들 세개의 스타일 쉬트는 @import 문으로 필요시 HTML 문서내에 포함시킬 수 있다. 이 세개의 스타일은 LINK 태그를 통해 결합될 수도 있다.
스타일은 STYLE 속성을 사용해서 즉시 처리될 수 있다. STYLE 속성은 임의의 BODY 태그(BODY 태그 자신을 포함해서)에 적용될 수 있다. 이 속성은 속성 값으로서 임의 갯수의 CSS 선언을 취한다. 여기서 각각의 선언은 세미콘론에의해 분리된다. 예는 다음과 같다.
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">
New Century Schoolbook 글꼴을 사용할 수 있다면
이 문단은 적색의 New Century Schoolbook 글꼴로 표시된다.</P>
큰 따옴표는 스타일을 선언하는데 사용되므로 STYLE 속성내에서 New Century Schoolbook를 인용하는데 작은 따옴표를 사용하였다.
스타일의 즉시 처리는 프리젠테이션과 문장을 혼합해서 사용함으로서 스타일 쉬트의 많은 장점을 잃는다. 이 방법은 어떤 스타일이 어떤 태그에 한 번만 적용되는 경우처럼 드물게 사용해야 한다.
이들 크레스는 CLASS 속성으로 HTML 내에서 참조될 수 있다.
<H1 CLASS=punk>독자적인 기능확장</H1>
<P CLASS=warning>많은 독자적인 기능확장은 이 것을 지원하는 브로우저이든
그렇지 못한 브로우저이든 부정적인 효과를 가질 수 있다.
이 예에서 punk 크래스는 스타일 쉬트내에 punk 크래스와 연관된 HTML 태그를 가지고 있지 않으므로 임의의 BODY 태그에 적용될 수 있다. 위에서 주어진 스타일 쉬트를 사용한다면 warning 크래스는 단지 P 태그에만 적용될 수 있다.
크래스의 외관이 아니리 기능에따라 크래스의 이름을 붙이는 것은 좋은 습관이다. 위의 예에서 warning 크래스는 red라고 이름 붙일 수도 있지만 이러한 이름은, 크래스의 스타일을 다른 색으로 변경하거나 음성인식에 사용하기위해 음성 스트일을 정의하길 원하는 경우, 의미가 없어진다.
크래스는 HTML 문서내에 구조적으로 동일한 부분에대해 서로 다른 스타일을 적용하는 가장 효과적인 방법이다. 예를들어 이 페이지는 CSS 코드와 HTML 코드에대해 서로다른 스타일을 주는 크래스를 사용하고 있다.
SPAN 태그는 저자가 첨부할 수 없는 스타일을 구조적 HTML 태그에 부여할 수 있도하기위해 HTML에 도입되었다. SPAN은 스타일 쉬트내에서 선택자로서 사용될 수 있으며, STYLE, CLASS, ID 속성을 허용한다.
SPAN은 평문 태그(text-level element)이므로 HTML 내에서 EM, STRONG과 같은 태그로서 사용된다. EM, STRONG 태그와의 주된 차이점은 EM, STRONG 태그가 구조적 의미를 가지고 있는 반명에 SPAN는 그러한 의미를 가지고 있지 않다. 이것은 순전히 스타일을 적용하기위해서 존재하며 따라서 스타일 쉬트를 사용할 수 없을 때에는 아무런 효과를 갖지 못한다.
SPAN의 간단한 예는 다음과 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Experimental 19960712//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }-->
</STYLE>
</HEAD>
<BODY>
<P>문단의 <SPAN CLASS=firstwords>첫 몇단어</SPAN>는
작은 대문자일수 있다. 스타일은 <SPAN STYLE="font-family: Arial">Arial</SPAN>
와 같이 단어의 스타일로 변경하기위해 인라인될 수 있다.</P>
DIV 태그는 기능적으로 SPAN 태그와 유사하며, 주된 차이는 DIV ( "division"의 축약어) 태그는 블럭태그라는 점이다. DIV 태그는 문단, 제목, 표, 심지어 다른 DIV 태그로 포함할 수 있다. 이러한 특징으로 장, 요약, 각주, 노트와 같은 서로 다른 컨테이너를 만드는 경우 DIV 태그가 아주 이상적이다.
<DIV CLASS=note>
<H1>Divisions</H1>
<P>이 DIV 태그는 HTML 3.2에서 정의되었지만 HTML 3.2에서는 단지 ALIGN
속성만이 허용된다. HTML, Cougar의 다음 버전은 다른 것중에서 CLASS, STYLE,
ID 속성을 추가할 것이다.</P>
<P>DIV 태그는 다른 블럭 태그를 포함하므로 DIV 태그는 이 노트와 같이
많은 내용을 갖는 부분을 생성하는데 유용하다.
<P>이 태그는 닫아주어야 한다.</P>
</DIV>
(