CSS 개요

CSS[cascading style sheets] 정의

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

• Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

• Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.

• Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

selector { property: value }

The Type Selectors

h1 { color: #36CFFF; }

The Universal Selectors

* { color: #000000; }

The Descendant Selectors

ul em { color: #000000; }

The Class Selectors

.black { color: #000000; }
h1.black { color: #000000; }

The ID Selectors

#black { color: #000000; }
h1#black { color: #000000; }

This rule renders the content in black for only <h1> elements with id attribute set to black.

#black h2 { color: #000000; }

In this example all level 2 headings will be displayed in black color when those headings will lie with in tags having id attribute set to black.

The Child Selectors

body > p { color: #000000; }

The Attribute Selectors

input[type = "text"] { color: #000000; }

• p[lang] − Selects all paragraph elements with a lang attribute.

• p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".

• p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".

• p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".

 

Multiple Style Rules

h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

Grouping Selectors

h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

combine the various id selectors together

#content, #footer, #supplement { position: absolute; left: 510px; width: 200px; }