CSS Cascading

CSS Cascading은 스타일 시트 규칙이 적용되는 순서와 방법을 결정하는 CSS의 원칙이다. Cascading이란 용어는 계단식 또는 단계별을 의미하며, 스타일 규칙이 적용되는 방식이 위에서 아래로 흐르며 단계적으로 결정된다는 의미를 담고 있다.

핵심 개념

  • 선언 순서: 나중에 선언된 스타일이 먼저 선언된 스타일을 덮어쓸 수 있다.
  • Specificity: 보다 구체적인 선택자가 더 높은 특정도를 가지며, 이를 기준으로 스타일 규칙의 우선순위가 정해진다.
  • Important: !important 키워드가 선언된 스타일 규칙은 다른 규칙보다 높은 우선순위를 가진다.
  • Origin: 사용자 정의 스타일, 개발자 스타일, 브라우저 기본 스타일의 순서로 우선순위가 결정된다.
p {
  color: blue;
}
 
p {
  color: red;
}

위의 코드에서 두 번째 규칙이 첫 번째 규칙을 덮어쓴다. 따라서 <p> 요소는 빨간색으로 표시된다.