CSS는 Cascading Style Sheet의 약자입니다. Style Sheet는 앞에서 주구장창 나왔었는데, Cascading은 무슨 의미일까요??
영어사전에 Cascade를 검색하면, 폭포, 폭포처럼 흘러내리는 의 뜻을 가지고 있습니다. 그리고 위에서 아래로 내려오는, 단계적인 이라는 뜻도 가지고 있습니다. 이는 곧 CSS의 특성을 나타냅니다: 1. 스타일 적용의 우선순위가 위에서 아래로 적용되며 2. 속성이 위에서 아래로 상속됩니다.
사람이 하는 일이니만큼, 하나의 요소에 두개 이상의 스타일을 적용하라고 CSS를 작성할 수 있습니다. 이런 경우, CSS는 각 스타일의 우선순위에 따라 가장 우선순위가 높은 하나의 스타일만 적용하게 됩니다.
- 브라우저 기본 스타일 : 가장 우선순위가 낮습니다.
- 제작자 스타일 : 웹페이지 개발자가 CSS로 작성한 부분입니다.
- 사용자 스타일 : CSS로 스타일을 지정해 놓아도, 사용자가, 예를 들어 크롬 테마로 폰트를 바꾸거나 한다면 적용이 되어야 합니다. 그런 의미에서 가장 우선순위가 높습니다.
만약 첫번째 우선순위가 같다면, 두번째 우선순위가 적용됩니다.
- !important
{ ~ !important;} 같은 식으로, !important 속성이 붙은 스타일이 있다면 가장 높은 우선순위가 적용됩니다. - 인라인 스타일
- id 스타일
- 클래스 스타일
- 타입 스타일
위에서 아래로 내려올 수록, 우선순위가 낮습니다. 또한 이 우선 순위는, 스타일의 적용범위가 넓을 수록 낮습니다.
만약 두번째 우선순위마저 같다면, 스타일을 정의한 소스의 순서대로 우선순위가 정해집니다. 즉, 나중에 작성한 코드가 먼저 작성한 코드를 덮어쓰게 됩니다.
웹 문서에 사용되는 태그 사이에는 포함관계가 존재합니다.
<body>
<p>
</p>
</body>
여기서 <p> 태그는 <body>태그에 포함됩니다. 이런 경우 <p>를 <body>의 자식, <body>를 <p>의 부모라고 합니다.
CSS에서, 자식 태그에 따로 스타일이 적용되지 않은 경우, 부모 태그의 속성을 그대로 가지게 되는데, 이 같은 특성을 상속이라고 합니다. 이러한 특징을 이용해 스타일을 좀 더 효율적으로 작성할 수 있습니다.