CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화된 문서를 화면에 어떻게 렌더링할 것인지를 정의하는 언어이다. CSS는 HTML의 각 요소Element의 style(design, layout, etc.)을 정의하여 화면에 어떻게 렌더링할 것인지를 브라우저에게 설명하는 언어이다.
특히 HTML5에 들어서는 HTML은 정보의 구조화, CSS는 styling의 정의 라는 각 언어에게 본연의 임무에 충실한 명확한 구분이 이루어졌다.
⇒ HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며, HTML은 CSS를 포함할 수 있다. 그러나 HTML 없이 단독으로 존재하는 CSS는 의미가 없다.
CSS는 HTML요소의 style을 정의하는데 사용된다고 했다. 그러려면 style을 적용하고자 하는 요소를 선택할 수 있어야 할 것이다. 이를 가능하게 해주는 것이 selector이다.
이와 같은 구문을 Rule Set(또는 Rule)이라 하며, 셀렉터에 의해 선택된 특정 HTML요소를 어떻게 렌더링할 것인지 브라우저에게 지시하는 역할을 한다. 이와 같은 Rule Set의 집합을 Style Sheet라 한다.
위의 CSS Rule set은 selector를 통해 HTML문서에 속해있는 모든 h1요소를 선택하여 선언 블록의 내용을 통해 어떤 style을 적용할 것인지를 지정해주고 있다.
CSS에서는 selector로 요소를 선택하고, 뒤에 따라오는 Declaration block내에서 Property에 값을 지정해줌으로써 선택된 요소에 다양한 스타일을 적용해줄 수 있다. 콜론을 통해 값을 지정하며, 세미콜론으로 속성간(혹은 선언간)의 구분을 할 수 있다.
속성에 지정하는 값을 말한다. HTML 어트리뷰트와는 다르게 따옴표 없이 표현한다. (font-family 값처럼 띄어쓰기 있거나 할때는 따옴표 있는 경우도 있다.)
CSS의 property value는 해당 프로퍼티에 사용할 수 있는
HTML은 CSS를 포함할 수 있다. 세가지 방식이 있다.
HTML에서 외부에 있는 CSS파일을 로드하는 방식이다. 가장 일반적으로 사용된다.
⇒ head 태그 안에서 empty element인 link태그의 rel(relationship을 의미)과 href 어트리뷰트를 사용한다.
HTML내부에 <style></style>태그를 사용하여 CSS를 포함시키는 방식이다.
이러한 방식은 매우 간단한 웹페이지의 경우에 사용하는 것은 문제 없지만, 일반적으로는 Link style을 사용하는 편이 좋다. HTML과 CSS는 서로 역할이 다르므로 다른 파일로 구분되어 작성되고 관리되는 것이 바람직하다.
HTML요소의 style어트리뷰트(style 태그가 아님)에 CSS를 기술하는 방식이다. JavaScript가 동적으로 CSS를 생성할때 사용하는 경우가 있다. 하지만 일반적인 경우 Link style을 사용하는 편이 좋다.