CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 각 구성요소의 여백 및 폭/높이, 색상, 글꼴 등의 시각적인 효과를 주는 언어다. 확장자로는 .css를 사용한다.
문법
CSS는 기본적으로 다음과 같이 생겼다.
div.wiki#libre {
padding: 10px;
color: #663399;
}
여기서 div.wiki#libre는 선택자(Selector)로, 해당 선택자에 맞는 요소에 스타일이 적용된다. 여기선 "div태그 중에 class가 wiki이고, id가 libre인 요소"를 의미한다. 중괄호({}) 사이에는 속성(attribute) 이름과 값이 연속으로 나오는 데, 여기서 해당 요소에 어떤 속성을 지정하는 지를 표기한다.
최신 CSS(CSS3)에는 미디어 쿼리(Media Query) 및 애니메이션 등의 기능이 추가되어 문법이 다소 복잡해졌다.
웹 페이지에 적용
작성한 CSS를 HTML 웹 페이지에 적용하는 방법은 다음과 같이 크게 세 가지가 있다.
- 해당 요소의 style속성에 직접 입력하는 방법. 별로 권장하지 않는 방법이다.
- CSS를
<style>태그 안에 넣는 방법. - 외부 파일로 만들어
<link rel="stylesheet" href="(주소)">태그를 적용하는 방법. 대체로 이 방법을 권장한다.