스타일시트는 HTML에 알록달록한 옷을 입혀주는 녀석입니다. 컨텐츠와 디자인의 분리라는 멋진 말을 탄생시킨 장본인이기도 합니다.. 과거의 방식(상당히 오래전에)의 HTML은 사실 엉망진창이었습니다. 엘리먼트(혹은 태그)들 하나하나에 디자인 옵션(속성)을 부여해야 했고 코드는 길어졌으며 정작 지원하는 속성은 몇개 없었습니다.
엉망진창인 쉬운 예를 들어볼까요? 옛날에는 테이블에 1px의 선을 넣으려면 머리가 아파왔습니다. TABLE 엘리먼트에는 border 라는 속성이 있는데 이는 선의 굵기 를 나타냅니다. 문제는 최소 값은 1인데 이 값을 대입하면 대략 굵기가 3px정도 되는 볼품없는 굵다란 선이 나타난타는 것입니다. 대체 최소 단위가 일까요? 결국 테이블을 짜던 사람들은 네이버에서 1픽셀 테이블을 검색하기 시작하고 cellspacing이라는 선과는 전혀 무관한 속성을 통해 1px 테이블을 만들어 냅니다.
HTML 코드에 디자인 속성을 지정하는 것은 괴로운 일이었습니다. HTML소스가 무진장 길어졌습니다. 코드는 길면 읽기 힘듭니다. 인터넷 회선은 많은 데이터를 보내야 하므로 더 힘듭니다. 똑같은 디자인 속성이 불과 3줄 밑에 사용되고 있지만 여전히 똑같이 써넣어야만 했습니다.
그래서 탄생한게 스타일 시트입니다.