Cascading의 두 가지 원칙

CSS는 Cascading Style Sheets의 약자로, 위에서 아래로 흐르는(cascading) 작동방식을 가지고 있다.

Style이 적용되는 데 있어서 Cascading은 두 가지 원칙을 가지고 있다.

1. 우선순위(specificity)

0. !important가 지정된 스타일
1. Inline CSS
2. Internal/External CSS
3. 브라우저 기존 스타일

• 우선순위가 같은 경우에는 더 나중에 정의한 것이 적용된다.
  • external을 먼저 정의하고 internal을 정의한다면 internal > external 이다.
• 스타일의 우선순위는 개별 프로퍼티에 대하여 적용된다.
  • 중복되는 프로퍼티가 있을 경우에 우선순위대로,
    그렇지 않으면 상위에서 내려온 스타일이 그대로 적용된다.

2. 상속(inheritance)

CSS에도 상속 기능이 있다. 상위(부모, 조상) 요소의 프로퍼티를 하위 요소가 물려받는 것이다.
그러나 모든 프로퍼티에 대하여 상속이 되는 것이 아니고, 상속이 되는 프로퍼티와 그렇지 않은 프로퍼티가 정해져 있다.

• 상속되는 프로퍼티
  font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style

• 상속이 되지않는 프로퍼티
  margin, padding, border, box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height

기본적으로는 상속이 되지 않는 프로퍼티이더라도, 속성값을 inherit이라고 써주면 상속을 받을 수 있다.