만약 위에서 서체의 색상을 지정해야 한다면 어떻게 하면 될까요? 모든 엘리먼트의 색상을 하나 하나 지정해야 할까요? 그것 보다 효율적인 방법이 있습니다. 바로 상속을 이용하는 것입니다.
아래처럼 html의 서체 색상만 조정하면 하위에 있는 모든 엘리먼트의 색상이 자동으로 바뀌게 됩니다. 이것은 각 엘리먼트가 상위 엘리먼트의 서체 색상 값을 물려 받기 때문입니다.
html{color:gray}
이러한 기능을 상속(inheritance)이라고 합니다.
하지만 모든 속성이 상속을 지원하는 것은 아닙니다. 상속을 하면 오히려 비효율적인 속성들이 있거든요. 아래 문서를 보시면 상속하는 속성과 상속하지 않는 속성의 목록을 볼 수 있습니다.