CSS 클래스 선택기와 ID 선택기

CSS에서 클래스 선택기는 마침표와 함께 표시됩니다:

.center {text-align: center}
위의 예에서 center 클래스가 있는 모든 HTML 요소는 중앙에 배치됩니다.

아래 HTML 코드에서는 h1과 p 요소 모두 center 클래스를 가집니다. 이는 둘 다 ".center" 선택기의 규칙을 따른다는 것을 의미합니다.

이 제목은 가운데 정렬됩니다

p>

********************************
ID 선택기
ID 선택기로 지정할 수 있음 특정 ID로 표시된 HTML 요소에 대한 특정 스타일. ID 선택기는 "#"으로 정의됩니다. 아래 두 개의 ID 선택기의 경우 첫 번째 선택기는 요소의 색상을 빨간색으로 정의할 수 있고 두 번째 선택기는 요소의 색상을 녹색으로 정의할 수 있습니다.
#red {color:red;} #green {color: green;}
다음 HTML 코드에서 id 속성이 빨간색인 p 요소는 빨간색으로 표시되고, id 속성이 녹색인 p 요소는 녹색으로 표시됩니다.

이 단락은 빨간색으로 표시되어 있습니다.

이 단락은 녹색입니다.

참고: id 속성은 각 HTML 문서에 한 번만 나타날 수 있습니다. 이유를 알아보려면 XHTML: 웹사이트 리팩토링을 참조하세요.