| CSS 사용 방법 | 예제 |
| 인라인 스타일 (style 속성) | <p style="color: blue;">텍스트 내용</p> |
| 내부 스타일 시트 (<style> 요소) | <style> p { color: blue; } </style> |
| 외부 스타일 시트 (<link> 요소) | <link rel="stylesheet" href="styles.css"> |
| 클래스 선택자 | <p class="highlight">텍스트 내용</p><br><style> .highlight { color: red; } </style> |
| 아이디 선택자 | <p id="intro">텍스트 내용</p><br><style> #intro { font-weight: bold; } </style> |
| 요소 선택자 | <p>텍스트 내용</p><br><style> p { font-size: 16px; } </style> |
| 자손 선택자 | <div><br> <p>텍스트 내용</p><br></div><br><style> div p { color: green; } </style> |
| 자식 선택자 | <div><br> <p>텍스트 내용</p><br></div><br><style> div > p { font-style: italic; } </style> |
| 인접 형제 선택자 | <h2>제목</h2><br><p>텍스트 내용</p><br><p>추가 내용</p><br><style> h2 + p { color: orange; } </style> |
| 일반 형제 선택자 | <h2>제목</h2><br><p>텍스트 내용</p><br><p>추가 내용</p><br><style> h2 ~ p { background-color: yellow; } </style> |
| 가상 클래스 선택자 | <a href="#" class="hover">링크</a><br><style> a:hover { text-decoration: underline; } </style> |
| 가상 요소 선택자 | <p class="quote">인용문</p><br><style> p.quote::before { content: "«"; } </style> |
| 박스 모델 속성 | <div style="width: 200px; height: 150px; background-color: yellow; padding: 10px; border: 1px solid black;">내용</div> |
| 텍스트 관련 속성 | <p style="color: blue; font-size: 18px; text-align: center;">텍스트 내용</p> |
| 배경 관련 속성 | <div style="background-color: yellow; background-image: url('image.jpg'); background-repeat: no-repeat;">내용</div> |
| 위치와 레이아웃 속성 | <div style="position: relative; top: 20px; left: 30px;">내용</div> |
