CSS - 적용 우선순위

CSS적용에는 다양한 방식이 있다.

1. 태그명으로 스타일
2. class명으로 스타일 입히기
3. 태그명으로 스타일 입히기

그런데 과연 위에 3가지 방법 중 2가지 이상을 적용했을 때, 어떠한 현상이 일어날까?

첫번째 p태그는 태그, 클래스로 스타일을 입혔을 때,
두번째 p태그는 태그, 클래스, id로 스타일을 입혔을 때

그 결과, 첫번째 p태그 클래스로 입힌 스타일이 적용이 되었고
두번째 p태그는 id로 입힌 스타일이 적용이 되었다.

이 내용을 확인할 수 있는 것은 태그, class, id 동시에 선언 했을 때 id로 입힌 스타일이 적용된다.

쉽게 설명하자면 ID > CLASS > 태그

다른 내용으로는

1. css파일에서 style 입혔을 때 (css 파일 링크 방식)
2. html파일에서 style 태그로 스타일 입혔을 때 (임베디드 방식)
3. html파일 안에 태그 안에서 style 적용을 했을 때 (inline 방식)

이 경우에는 어떻게 css가 적용이 될까?

이럴 경우 무조건 태그 안에서 style 적용(inline 방식)으로 적용이 되는 것을 확인할 수 있다.

따라서, 이 내용으로 알 수 있는 것은 우선 순위가 존재한다는 걸 알 수 있다.
css 우선 순위를 파악하면 기존의 css를 덮어씌울 수 있다. 이 우선 순위를 알고 있다면 css 충돌을 피할 수 있을 것이다.