기본 스타일

태그 들 중에는 기본적으로 스타일 시트가 내장 되어 있는 태그가 있다.
예를들어 h1~h6 태그는 폰트 사이즈가 커지는 스타일이 내장 되어 있다.

<h1>다람쥐 헌 쳇바퀴에 타고파</h1>

사용자 정의 스타일

기본 내장 스타일 시트보다 사용자 정의 스타일이 우선된다.

h1{
  font-size:16px;
  font-weight:normal;
}

가장 마지막에 작성한 스타일

아래와 같이 작성하면 p태그의 글자색은 orange가 된다.

p{color:red;}
p{color:blue;}
p{color:orange;}

태그와 가까운 스타일

인라인 스타일이 태그와 제일 가깝기 때문에 중복 될 경우 최우선으로 적용된다.

1. 인라인 스타일
2. style 태그
3. CSS파일

점수

선택자마다 점수가 있다. 점수가 높은 스타일이 적용된다.

인라인 스타일 1000점

<div style="color: red;">인라인 스타일</div>

아이디 선택자 100점

<style>
  #title{
    color:green;
  }
</style>
<h1 id="title">아이디가 title 입니다</h1>

가상 클래스 선택자 10점

:hover 등

클래스 선택자 10점

<style>
  .content {
    color:red;
  }
</style>
<p class="content">클래스가 content 입니다.</p> 

태그 선택자 1점

<style>
  p{
    color:blue;
  }
</style>
<p>안녕하세요.</p>

겹치기

스타일을 겹치면 점수가 올라간다.

<style>
  /* 2점 */
  nav > h2{}   
  /* 11점 */
  nav .title{} 
  /* 110점 */
  #main .sub{} 
  /* 11점 */
  a:hover{}
  /* 13점 */
  a:hover span::first-letter{} 
</style>

!important

!important 를 사용하면 무조건 최상위 점수가 된다.

/* 10000점 */
p{
  color:blue !important; 
}