내맘대로의 EPUB 제작 가이드

CSS 스타일은 선택자와 스타일 속성, 그리고 속성에 대한 값으로 이루어진다. 이중 선택자는 스타일 속성의 묶음이다. 선택자 하나에 여러 스타일 속성-글자크기, 여백, 색, 테두리 등-을 지정할 수 있으며 문서에서는 이 선택자를 이용해 글자나 문단에 스타일을 적용할 수 있다. (CSS 기본 구조 참고)  선택자는 태그, 클래스, ID, 그룹 등 여러 방식으로 지정할 수 있다.

1. 태그 선택자

    - 태그를 선택자로 사용하면 HTML 태그 스타일을 변경할 수 있다. 예를 들어 <h1>태그의 기본 글자 크기와 줄간격은 뷰어에 따라 정해져 있다. 그런데 CSS 파일에서 <h1>태그에 스타일을 적용하면 본문에서 <h1> 태그에 아무런 스타일을 지정하지 않아도 CSS에서 지정한 스타일이 적용된다. 

CSS 스타일 시트를 만들때 h, p 태그 등 많이 사용하는 태그는 태그 선택자로 스타일을 적용해 두면 태그별로 스타일을 지정할 필요가 없기 때문에 편집하는데 시간을 절약할 수 있다. 모든 태그에 스타일을 지정할 수 있으며 동일한 스타일이 반복되는 텍스트 관련 태그(p, hx, cite, strong 등)에 스타일을 지정하면 편하게 사용할 수 있다.

2. 클래스 선택자

    - CSS에서 가장 많이 사용하는 선택자이다. 태그 선택자는 지정된 태그 명을 사용해야 하지만 클래스 선택자는 클래스의 이름을 성격에 맞게 정할 수 있다.(단, 영문과 숫자를 권장한다) 예를 들어 이미지와 관련된 클래스라면 앞에 img를, 텍스트와 관련된 클래스라면 txt를 붙이는 식이다. 이미지 편집을 위해 왼쪽정렬, 오른쪽 정렬, 가운데 정렬을 많이 사용한다면 img_left, img_right, img_center 처럼 클래스의 쓰임에 따라 이름을 지정하면 된다. 

클래스를 지정하려면 .(점dot)을 찍고 클래스 이름을 쓴 후 스타일을 지정하면 된다. 클래스 이름은 사용자가 해당 클래스의 쓰임을 쉽게 파악할 수 있게 지정하는게 좋다. 

.class_name { 스타일  }

클래스를 태그에 사용하기 위해서는 class라는 속성을 사용한다.

<p class="class_name">내용</p> 

3. 태그에 종속된 클래스

    - 클래스는 특정 태그에 종속된 형태로 사용할 수도 있다. <p> 태그와 <h1> 태그에 가운데 정렬을 적용하고 싶은데 <p> 태그는 글자 색을 빨간색으로, <h1>태그는 글자 색을 파란색으로 하고 싶다고 하자. 이럴때 클래스 명을 center로 지정하면서 <p>태그와 <h1>태그에 서로 다른 스타일이 적용되도록 할 수 있다. 

태그.class_name { 스타일  }

4. 그룹 선택자

    - 태그나 클래스에 동일한 스타일을 적용할 경우 그룹으로 묶을 수 있다. 만약 h1, h2, h3에 동일한 스타일을 적용하고 싶다면 각 태그에 스타일을 적용할 수도 있지만 그룹으로 지정해서 한번에 스타일을 적용할 수 있다. 그룹으로 선택자를 지정하려면 선택자를 ,(콤마)로 구분해서 나열한 후 스타일을 지정한다.

h1, h2, h3 { 공통 스타일 }

5. ID 선택자

    - ID 선택자는 클래스 선택자와 유사하지만 스타일을 적용할 때 class 대신 ID를 사용한다. 하나의 ID는 문서 내에서 반드시 한번만 사용할 수 있다. ID는 특정 위치로 이동하거나 특정 단어의 주석을 연결해 주는 역할을 하기 때문에 동일한 ID가 한 문서에 하나 이상 사용될 수 없다. 그래서 ID 선택자는 많이 사용하지 않는다. ID 선택자는 선택자 이름 앞에 #을 붙이고, 반드시 영문으로 시작해야 한다.

#selector_name { 스타일 }

<p ID="selector_name"> 내용 </p>

**

ID는 문서 내에 특정 위치나 특정 내용을 연결할 때 사용한다. 그렇기 때문에 하나의 단락에는 하나의 ID만 사용할 수 있다. 다만 해당 내용을 참고하거나 그 위치로 이동하는 링크에는 여러번 사용 가능하다.

인라인 스타일은 HTML 태그에 직접 스타일을 적용하는 방식이다. 여러개의 스타일이 중복 적용될 경우 인라인 스타일이 우선시 되는 장점이 있지만, 많은 단점이 있어 특별한 경우가 아니라면 권장하지 않는다. 인라인 스타일을 적용하게 되면 다음과 같은 문제점이 발생한다.

1. 태그별로 스타일을 지정해 줘야 한다.

    - 모든 태그에 스타일을 개별적으로 지정해 줘야 하기 때문에 편집 시간이 오래 걸리고 문서가 복잡해진다. 뷰어에서 로딩시간이 오래 걸리고 오류가 자주 발생한다. 또한 문서의 용량이 커지기 때문에 동일한 내용이라면 외부 스타일을 사용한 문서보다 용량이 커진다. 

2. 스타일을 변경하기 위해서는 모든 태그를 수정해야 한다.

    - 본문은 동일한 스타일이 적용된 여러 단락으로 되어 있다. 한 책에 수백에서 천개 이상의 단락이 있는데 인라인 스타일을 사용했다면 편집을 바꾸기 위해 모든 단락을 수정해야 한다. 그리고 문서를 수정해야 할 때 스타일이 어떻게 적용됐는지 파악하기 어렵다. 외부 스타일을 사용했다면 css파일을 보고 문서의 스타일을 한눈에 파악할 수 있으며, 수정을 할 때도 하나만 고치면 된다.

3. 스타일의 일관성을 유지하기 어렵다.

    - 인라인 스타일은 단락별로 스타일을 지정해야 하기 때문에 스타일이 여러개 있을 경우 일관성을 유지하기 어렵다. 인라인 스타일을 적용한 문서 중에는 본문 글씨 크기가 챕터별로 1.2em, 1.0em, 1.3em 등 서로 다른 경우가 많다. 그리고 주석, 인용, 참고 등 서로 다른 스타일을 적용할 때도 챕터별로 다른 스타일을 적용해서 일관성이 유지되지 않는 경우가 많다. 

4. 스타일이 변경되지 않는다.

    - 이는 뷰어에 따라 다를 수 있지만, 인라인 스타일을 적용하면 웹킷 기반의 뷰어에서는 스타일이 변경되지 않을 가능성이 높다. 사용자가 뷰어 설정에서 글꼴이나 글자 크기를 바꾸더라도 인라인 스타일이 적용된 단락은 변경되지 않는다. 태블릿, 스마트폰, 전자잉크(EPD)를 사용한 전용 단말기 등 다양한 전자책 독서 환경에서 스타일이 변경되지 않는다면 사용자의 불편을 초래할 수 있다.

4번은 단점이기도 하지만 인라인 스타일이 필요한 이유이기도 하다. 인라인 스타일은 CSS적용 순서에서 가장 상위에 있기 때문에 스타일이 중복되더라도 우선 적용된다. 예를 들어 외부 스타일에서 글자 크기를 1em으로, 내부 스타일에서 글자 크기를 2em으로, 인라인 스타일로 글자크기를 3em으로 적용하고, 뷰어 설정에서 사용자가 글자크기가 1.5em으로 적용했다면 최종 결과물은 인라인 스타일의 글자크기 3em이 된다.(단, 뷰어에 따라 사용자 스타일이 우선 적용될 수 있다) 따라서 스타일 자체가 본문의 내용을 설명하는데 중요한 역할을 한다면 인라인 스타일을 사용할 수 있다.

기본 문법

인라인 스타일은 여는 태그 뒤에 style 속성을 사용해서 적용할 수 있다. style 속성 뒤에 " "(따옴표)로 묶어 여러개의 스타일 속성을 ;(세미콜론)으로 구분해서 지정할 수 있다. 

스타일 적용 예

인라인 스타일은 특별한 경우가 아니라면 사용하지 않아야 한다. 하지만 대부분의 전자책 편집기는 인라인 스타일로 스타일을 지정하고 있다. 코드 방식을 동시에 지원하지만 WYSIWYG 방식이 편집하기 편하기 때문에 HTML이나 CSS를 모르는 편집자라면 편집기에서 기본 제공하는 편집 기능을 사용하게 되는데 이 방식은 대부분 인라인 스타일이 적용된다. 

인라인 스타일이 적용되면 뷰어에서 로딩 속도가 오래 걸리거나 오류가 발생하기 쉽고 문서 용량도 크게 증가한다. 문서의 편집 상태를 한눈에 파악하기 어렵고 수정하는데 시간이 오래 걸리기 때문에 문서편집기를 이용하더라도 WYSIWYG 방식을 지원하는 편집기라도 코드 방식을 권한다.

외부 스타일은 내부 스타일과 스타일을 만드는 방식은 동일하다. 다른 점은 내부 스타일은 HTML파일 안에 스타일이 정의되지만 외부 스타일은 별도의 CSS파일을 만든다는 점이다. [파일명.css] 처럼 .css 확장자가 붙은 스타일 파일을 만들고, 이 파일을 HTML 파일 안에 링크를 걸어 사용한다. 1.2.4장에서 설명했던 스타일은 외부 스타일로 아래처럼 적용할 수 있으며 내부 스타일과 동일한 결과가 적용된다. 

파일명 : style.css로 저장

css sample_외부 스타일.zip

HTML 문서의 헤더 사이에 있던 스타일을 style.css라는 파일로 만들어 별도로 저장하고, HTML 문서에는 별도로 저장한 CSS 파일을 링크로 연결했다. 

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

이렇게 하면 HTML 문서는 더 간결해진다. 그런데 문서를 간결하게 만들자고 파일을 두개로 나눌 필요가 있을까?

외부 스타일을 만드는 이유는 문서를 간결하게 정리하는데 있는게 아니다. 문서가 간결해 지는 것 외에도 아무 많은 이점이 있다.

1. 외부 스타일을 적용하면 문서가 간결해 진다.

    - 1.2.4장의 내부 스타일 예제와 위의 예제를 비교해 보면 쉽게 이해할 수 있다. HTML 문서 내에 CSS가 들어가지 않는 것만으로도 문서가 훨씬 간결해진다.

2. 문서 내용을 여러개의 HTML 파일로 나누더라도 일관된 스타일을 적용할 수 있다.

    - 내부 스타일을 적용하면 같은 내용이라도 스타일이 여러번 정의된다. 편집을 하다 보면 스타일을 수정하게 될 때가 있는데 HTML 파일을 하나씩 모두 수정해야 하는데 이런 과정을 반복하다 보면 스타일이 틀어지게 된다. 하지만 CSS파일을 사용하면 CSS 파일 하나만 수정하게 되고, 수정된 내용이 모든 HTML 파일에 적용되어 스타일이 항상 일관되게 유지된다. 

3. CSS 스타일만 수정하면 모든 문서에 수정된 내용이 반영되기 때문에 편집이 쉬워진다.

   - 각 챕터별로 HTML 파일로 나눠진 10개의 챕터로 된 책이 있다고 하자. 챕터의 제목을 다른 스타일로 바꿔야 할 경우 내부 스타일은 10번을 작업해야 한다. 하지만 CSS를 이용하면 한번의 작업으로 10개의 챕터를 모두 수정할 수 있다.

4. 문서의 양이 줄어들고 뷰어의 성능을 높일 수 있다.

   - 뷰어는 문서를 열 때마다 스타일을 분석한다. 뷰어에서 가장 많은 부하가 걸리는 부분 중 하나가 이 스타일을 분석하는 작업이다. CSS를 이용하게 되면 뷰어는 한번만 스타일을 분석하면 되는데 내부 스타일을 이용하면 모든 스타일이 동일하더라도 챕터를 열 때마다 스타일을 분석하기 때문에 챕터가 열리는 속도가 느려질 수 있다.

5. 누구나 쉽게 스타일을 이해하고 편집할 수 있다.

   - CSS로 스타일을 정리해 놓으면 책이 어떻게 편집됐는지 이해하기 위해 CSS 파일만 분석하면 된다. 모든 HTML 파일을 열어볼 필요 없이 CSS 파일만 확인하면 스타일이 어떻게 적용됐는지 확인할 수 있기 때문에 편집자가 바뀌더라도 스타일을 쉽게 수정할 수 있다.

6. 재활용이 가능하다.

   - 출판사마다 고유의 편집 스타일을 갖고 있다. 그리고 분야별로 적용하는 스타일이 다르다. CSS를 이용하면 스타일을 템플릿화 시킬 수 있어 책에 일관된 스타일을 적용할 수 있게 된다. 책을 만들 때마다 새로 스타일을 조정할 필요 없이 CSS 파일로 정리된 스타일을 적용하기만 하면 된다. 물론 책의 내용에 따라 세부적인 스타일을 적용해야 한다면 그 책의 CSS 파일을 수정하면 된다. 또한 소설, 여행, 인문 등으로 템플릿을 만들어 관리한다면 성격이 다른 분야에 다른 스타일을 적용할 수 있기 때문에 편집 시간을 크게 줄일 수 있다.

이 외에도 외부 스타일의 장점은 많이 있지만 이정도만 해도 외부 스타일을 사용해야 하는 이유로 충분하리라 생각한다. 

CSS는 태그 내에 직접 적용하는 인라인 스타일, 꾸미고자 하는 HTML문서에 스타일을 지정하는 내부 스타일, 별도의 CSS파일을 만들어 모든 문서에 적용할 수 있는 외부 스타일 이렇게 세가지 방식으로 적용을 할 수 있다. 아래에 보이는 샘플은 이중 내부 스타일로 CSS를 적용한 모습이다. 스타일은 헤더<head>...</head> 사이에 스타일 태그<style>...</style>로 묶어 지정할 수 있다. 이렇게 지정된 스타일은 해당 HTML 문서 전체에 영향을 주게 된다. 

css sample_내부 스타일.zip

스타일을 하나씩 살펴 보도록 하자.

먼저 제목을 표현하는 <h1> 태그의 스타일은 선택자를 태그로 지정했다. 

h1    {

font-size :  2.0em;

text-align : center;

margin : 40px 20px 10px 20px;

}

이 의미는 문서에서 사용하는 <h1>...</h1>태그에는 별도의 스타일을 지정하지 않아도 글자 크기 2.0em, 가운데 정렬, 위쪽 40픽셀, 오른쪽 20픽셀, 아래쪽 10픽셀, 왼쪽 20픽셀의 간격을 띄운 스타일을 지정한다는 의미이다. 따라서 문서를 작성할 때 제목의 스타일을 신경쓰지 않고 <h1>...</h1>태그만 사용해도 이 스타일이 항상 적용된다.

아래 나오는 <p>태그도 마찬가지이다. 

p    {

text-align: justify;

text-indent: 1em;

font-family:"기본글꼴";

font-size: 1em;

} 

문서를 작성할 때 가장 많이 쓰는 태그가 <p>태그이다. 문서의 본문은 주석을 달거나 인용구를 넣는 등 본문과 구분이 필요하지 않는 이상 동일한 스타일이 적용된다. 그리고 이런 문단이 수백, 수천개가 나올 수 있다. 매번 문단을 추가할 때마다 스타일을 지정해야 한다면 아주 귀찮고 힘든 작업이 될 것이다. 그래서 문단 태그인 <p>태그에 스타일을 한번 지정함으로써 문단마다 스타일을 지정하는 수고를 덜 수 있다.

CSS에서 <p>태그의 속성을 정의했기 때문에 아무런 속성을 지정하지 않아도 양쪽정렬에 들여쓰기 1em(글자 한자 크기), 글꼴은 기본글꼴, 글자 크기는 1em으로 지정된다.  이렇게 문단에 기본 스타일을 적용해서 문서를 작성하다 보면 인용구나 주석처럼 본문과 다른 스타일을 적용해야 할 필요가 있다. 이때 사용할 수 있는 속성이 클래스(class="선택자")이다. 

class는 혼자서 사용할 수 없고 다른 태그의 속성으로만 적용할 수 있다. 이때 사용하는게 <span>태그이다. <span> 태그는 그 자체로는 아무런 속성을 갖고있지 않다. 대신 어떤 속성이든 전달하는 역할을 한다. 특정 태그가 아닌 임의의 속성을 지정하기 위해서는 [.선택자]를 사용한다. 앞에 점[.]을 찍고 표현하고자 하는 선택자의 이름을 지정한 후 속성을 지정하면 된다. 이렇게 지정된 선택자는 어떤 태그에서도 사용할 수 있다.

.txt_red

{

color:red;

}

<span class="txt_red">기본크기란 뷰어(브라우저)가 기본으로 정한 크기를 말한다.</span>

CSS에서 글자 색을 빨간색으로 지정한 .txt_red 선택자의 속성을 <span>태그가 문단 내에 그대로 전달을 하기 때문에 <p>태그의 기본 속성에 빨간색 속성이 더해져서 <span>태그로 묶인 부분만 빨간색으로 표현된다.

스타일을 지정하다 보면 특정 태그에만 스타일이 적용되야하는 경우가 있다. 이럴 경우 선택자 앞에 적용되야 하는 태그를 붙여 [태그.선택자]로 이름을 만든 후 스타일을 부여하면 된다. 

p.blue_color

{

color:blue;

}

이렇게 태그가 지정된 선택자는 다른 태그에서는 적용되지 않는다. 

<p class="blue_color">p 태그 스타일에 글자 색만 파란색이 된다.</p>

<h1 class="blue_color">.txt_blue 클래스는 p태그 전용이기 때문에 h태그에는 적용되지 않는다</h1>

이 문서를 브라우저로 열어보면 <p> 태그는 파란색으로 표현되지만 <h1>태그는 파란색이 적용되지 않는 것을 볼 수 있다. 이런 형식은 특정 태그에서만 약간 다른 스타일을 적용하고 싶을 때 사용할 수 있다.

p.blue_color { color:blue; font-size:0.8em;}

h1.blue_color { color:blue; font-size:1.2em;}

이렇게 지정한다면 둘다 파란색을 표현하는 속성은 같지만 제목에는 글자 크기를 크게, 본문에는 글자 크기를 작게 꾸밀 수 있다. 

끝으로 스타일은 여러개를 중복해서 사용할 수 있다. 가운데 정렬에 파란색으로 편집을 하고 싶다면 아래처럼 두개의 속성을 한번에 적용하면 된다. 원하는 스타일이 서로 다른 클래스로 지정되있다면 두 속성을 합한 새로운 클래스를 만들 필요 없이 class="선택자 선택자 선택자 선택자" 이렇게 중복으로 선택자를 사용하면 된다. 이때 선택자와 선택자는 공백으로 구분하면 된다. 

<p class="txt_center blue_color">p태그 스타일에 가운데 정렬과 글자색 속성이 추가된다.</p>

헤더에 스타일을 지정하다 보면 스타일이 많아져 문서가 복잡해 지거나 문서의 양이 늘어날 수 있다. 내부 스타일을 사용하면 모든 HTML 문서에 동일한 내용을 반복해서 넣어야 하기 때문에 화면에 보이는 내용은 얼마 안되도 스타일 때문에 문서의 크기가 수십에서 수백 킬로바이트까지 늘어날 수 있다. 실제로 유통사에서 판매되는 책 중에 이런 EPUB들이 상당수 존재한다. 

편집기를 사용할 경우 동일한 스타일이 반복해서 만들어지는 경우도 있다. 텍스트의 양만으로는 100kb도 안될 정도의 분량인데 200kb ~ 300kb 이상 더 심한 경우는 1mb가 넘는 경우가 있는데 이런 문서를 열어보면 대부분 WYSIWYG 방식^[각주:1]의 저작도구로 편집한 경우가 많다. 이런 EPUB은 동일한 스타일의 CSS가 아래 예처럼 무한히 반복되어 불필요하게 용량을 늘리고 뷰어의 속도를 느리게 하거나 오류가 나게 된다. 이는 편집기의 문제이기 보다는 편집기에만 의존하는 편집자의 잘못이다. 아무리 뛰어난 편집기라 하더라도 이런 문제를 해결할 수는 없다. 따라서 편집자가 CSS와 HTML을 제대로 알고 있어야 제대로 된 EPUB을 제작할 수 있다. 

잘못된 CSS 스타일 지정

1.2.3 CSS 스타일 적용

스타일은 HTML 태그에 적용하는 방식(인라인 스타일:Inline style), HTML 문서에 적용하는 방식(내부 스타일:Internal Style), CSS파일을 따로 만들어 적용하는 방식(외부 스타일 : External Style) 이렇게 3가지 방식으로 적용이 가능하다.

만약 한 문서에 3개의 스타일을 모두 적용했다면 1순위 인라인 스타일 > 2순위 내부 스타일 > 3순위 외부 스타일 의 순서로 서로 스타일이 적용된다. 예를 들어 인라인 스타일에 글자색을 ‘빨강'으로 놓고 외부 스타일에 ‘노랑'을 지정했다면 인라인 스타일에서 지정한 ‘빨강'이 글자색이 된다. 

인터넷 브라우저에서는 외부 스타일 다음에 브라우저의 기본 스타일이 적용되는데 전자책 뷰어는 뷰어에 따라 다르다. 어떤 뷰어는 CSS를 모두 받아주지만 일부 뷰어는 CSS를 무시하는 경우가 있어 CSS 스타일이 제대로 표현되지 않을 수 있다. 또한 사용자가 스타일을 편집할 수 있게 한 뷰어라면 외부 스타일이 무시될 수 있다. 따라서 스타일을 적용할 때에는 어떤 뷰어에서 사용할 것인가도 고려해야 한다. 

□ 인라인 스타일

인라인 스타일은 HTML 태그에 직접 스타일을 적용하는 방식이다.

인라인 스타일은 모든 태그에 스타일을 적용해야 하기 때문에 작업 시간도 많이 걸리고, 문서 전체 스타일에 통일을 주기 어려워 사용하지 않는다. 하지만 특수한 편집이 필요할 때 유용하다.

빨강 12px,파랑 16px,검정 20px,

이런 내용이라면 편집자는 글자 색과 글자 크기가 변하지 않고 그대로 보여지기를 원할 것이다. 이 편집을 외부 스타일로 지정했다면 사용자가 글자 크기를 변경하거나 색을 변경할 때 함께 변경될 수 있다. 이럴 때 인라인 스타일을 사용한다면 외부에서 어떤 스타일 변화가 있더라도 글자 크기와 글자색이 바뀌지 않고 항상 같은 모습으로 표현된다.(일부 뷰어에서는 스타일을 완전히 무시하는 경우가 있어 인라인 스타일도 적용되지 않을 수 있다.)

□ 내부 스타일

내부 스타일은 HTML문서의 <header>에 CSS를 정의하는 방식이다.

내부 스타일은 HTML 문서 전체에 적용되기 때문에 인라인 스타일보다 편집이 쉽다. 하지만 10개의 챕터를 10개의 HTML 파일로 나눈 책이라면 각 파일마다 스타일을 부여해야 하고, 편집을 수정 할때도 10개의 파일을 모두 수정해야 한다. 

내부 스타일은 하나의 HTML 파일에 모든 내용이 다 들어가고 스타일이 2~3개 정도로 적은 경우에는 간편하게 사용할 수 있지만 정의해야 할 스타일이 많거나 파일이 여러개인 경우에는 사용하지 않는 것이 좋다. 

□ 외부 스타일

외부 스타일은 스타일 시트 파일(파일명.css)을 만들어 스타일을 정의하고, 이 파일을 HTML 문서에 링크로 연결해 사용하는 방식이다. 책을 편집할 때 가장 많이 사용하는 방식이며, 대부분의 뷰어도 외부 스타일을 사용할 것을 권장하고 있다. 

CSS 스타일을 별도의 파일로 만든다 - style.css

html 문서에 CSS 파일을 연결해서 스타일을 지정한다.

외부스타일을 이용하면 문서를 여러개의 파일로 나눠도 전체에 동일한 스타일을 적용할 수 있고, 스타일을 수정할 때도 CSS파일만 수정하면 되서 작업 시간을 줄일 수 있다. 또한 하나의 CSS파일 안에 여러 스타일을 정의하고, 이를 전체 문서에 적용할 수 있기 때문에 파일 용량도 줄일 수 있고, 관리도 편하다. 

1.2.2. CSS의 기본 구조

CSS는 HTML 태그나 클래스에 표현하고 싶은 스타일을 정의한다. 스타일을 지정받게 될 태그나 클래스를 선택자(Selector)라고 하고, 선택자 뒤에 지정할 속성과, 속성의 값을 대괄호{ }로 묶어 표현한다. 

CSS의 구조

하나의 선택자에 여러개의 속성을 정의할 수 있다. 글자 크기, 모양, 색 등 글자 속성, 상하좌우 정렬, 좌우 여백, 들여쓰기, 줄간격, 테두리, 배경색 등 문단 편집에 필요한 속성, 이미지, 동영상, MP3, 에니메이션 등 CSS로 표현할 수 있는 편집 형태는 다양하다.

CSS도 HTML처럼 여백이나 줄간격은 무시된다. 그래서 구조적으로 보기 좋게 편집이 가능하다. 아래 3개의 CSS는 모두 똑같은 스타일이 적용되지만 첫번째 보다 두번째가 알아보기 쉽다. 만약 여러사람이 사용하거나, 제3자가 스타일을 수정할 필요가 있다면 세번째처럼 설명을 추가할 수도 있다. “/*”와 “*/”사이에 있는 내용은 공백처럼 컴퓨터가 무시를 하기 때문에 CSS에 설명을 추가할 때 사용할 수 있다. 

속성을 한줄로 나열하게 되면 어떤 속성을 적용했는지 확인하기 어렵다. 속성을 한줄로 나열하기 보다는 아래처럼 한줄씩 줄바꿈을 해서 선택자에 어떤 속성이 적용되었는지 보기 편하게 정리하는 것이 좋다.

또한 아래처럼 /*설명*/을 붙여 각 선택자에 어떤 목적으로 속성을 적용했는지를 적어주거나 각 속성에 특이점이 있다면 어떤 특이점이 있는지 등을 설명해 주는 것이 좋다. 설명을 달아 두면 시간이 지나도 CSS를 알아보기 쉽고, 만약 제3자가 수정을 할 일이 생기더라도 처음 책을 편집한 사람의 의도를 쉽게 파악할 수 있게 된다.