인라인, 내부, 외부 CSS 연결 방식을 구분합니다.
작은 실험은 style 속성, 한 문서 전용 규칙은 head의 style, 여러 페이지가 공유하는 규칙은 link로 외부 CSS 파일을 연결합니다. 프로젝트에서는 외부 CSS가 재사용과 캐시에 유리합니다.
예제의 HTML에는 스타일 선언이 하나도 없고 class=title과 class=lead라는 이름표만 붙어 있습니다. CSS 탭의 .title 규칙이 제목을 초록으로 칠하고 .lead 규칙이 문단에 12px 안쪽 여백과 3px 왼쪽 선을 더하는데, 선언은 이름표가 일치하는 요소에만 적용됩니다. 같은 class를 다른 문단에 붙이면 그 문단도 같은 모양이 됩니다.
외부 CSS는 head에 link rel=stylesheet href=style.css 형태로 연결하고, 브라우저는 이 파일을 받아 해석할 때까지 화면 그리기를 미룹니다. 스타일 없는 화면이 잠깐 비치지 않게 하려는 동작이므로 link는 head에 둡니다. 명시도가 같은 규칙이 여러 곳에 있으면 문서에서 나중에 나온 쪽이 이깁니다.
link의 rel을 빼거나 href 경로를 틀리면 외부 스타일이 적용되지 않습니다.
직접 바꿔보세요CSS 탭에서 .title과 .lead의 색상과 크기를 바꿔보세요.