CSS에는 3가지의 방법을 이용해 적용할 수 있다.

1. 인라인 스타일 (inline style) : 태그마다 style 속성을 준다. HTML코드와 CSS코드가 분리되지 않아, 한 공간에 같이 있게 된다. 같은 웹사이트의 다른 곳에서 계속 재생되는 스타일이라면 일일이 똑같이 복사해서 넣어줘야 한다. 일률적으로 수정 시 전부 찾아서 바꿔주어야한다. 가장 추천하지 않는 방식(정말 특별한 경우, 어떤 요소만 아주 예외적으로 꾸며준다던가 할때만 사용한다.)
   
   
2. 내부 스타일 시트 (internal style sheet) : 전체 코드가 많지 않을 때 사용한다. 코드가 길어진다면 한 문서의 길이가 너무 길어진다(많은 양의 스크롤). 다른 문서에 적용하기 위해 따로 복사 붙여넣기 해주어야 한다.
   
   
3. 링킹 스타일 시트 (linking style sheet) : css 파일을 아예 외부로 분리해두는 것이다.

    <link rel="stylesheet" href="style.css">

실전에서 가장 많이 쓰이는 링킹 스타일 시트 (linking style sheet)

/* 모든 요소 선택 */
* {
  font-weight: bold;
  color: darkorange;
}

/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
  color: plum;
}

/* 태그 선택자 */
p {
  color: olivedrab;
}

/* class 선택자 */
/* 태그보다 우선순위 높음 */
/* 페이지상의 여러 요소가 같은 class를 가질 수 있음 */
.blue {
  color: lightblue;
}

/* 다른 선택자에 이어붙일 수 있음(태그, 클래스 등...) */
/* 선택자는 구체적일수록 우선순위 높음 */
p.blue {
  color: slateblue;
}

.blue.dark {
  color: mediumblue;
}

p.blue.dark {
  color: darkblue;
}

/* id 선택자 */
/* class보다 우선순위 높음 */
/* id는 페이지상에서 요소마다 고유해야 함 */
#red {
  color: tomato;
}

/* 그룹 선택자 */
span, .dark, #red {
  text-decoration: underline;
}

모든 요소 선택자

모든 요소 선택자는 *로 표시한다.

같은 선택자

같은 선택자 끼리는 뒤에 오는 것이 우선순위이다(채택이 된다) (앞의 것을 덮어 씌운다).

태그 선택자

모든 요소 선택자보다 우선순위를 가진다.

class 선택자

ex) .blue
태그 선택자보다 우선순위를 가진다.

class 선택자를 다른 선택자에 이어붙이기

class 선택자는 다른 선택자에 이어 붙일수 있다. (태그, 클래스 등)
ex) p.blue -> p태그이면서 blue클래스를 가진 것. (태그 하나, 클래스 하나)
ex) .blue.dark -> blue클래스이면서 dark클래스 인 것. (클래스 둘)
ex) p.blue.dark -> p태그이면서 blue클래스이면서 dark클래스를 가진 것. (태그 하나, 클래스 둘)

클래스를 여러 개 가질 수 있는데, 클래스 속성에다가 스페이스로 구분을 한다.
HTML -> <p class="blue dark"> (p태그이면서 blue에 dark 한 것)
CSS -> p.blue.dark

구체적일수록 우선순위가 높다.

id 선택자

샾(#)을 사용한다. ex) #red
클래스보다 우선순위가 높다.
페이지 상에서 요소마다 고유해야 한다.

상단의 class 선택자를 보라. .blue 클래스를 자주 사용한다. (html에서 어겨도 딱 바로 티가 나지는 않는다. 그러나 자바스크립트 등에서 사용하는 경우에 문제가 발생한다.)

그룹 선택자

여러 요소들을 한꺼번에 선택하는 것이다.
요소들을 쉼표(,)로 구분해준다. ex) span,.dark,#red