HTML 문서의 <head> 섹션에 <link> 요소로 외부 스타일시트 파일을 연결합니다.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
외부 스트알 시트는 텍스트 편집기로 작성할 수 있습니다.
스타일시트 파일의 확장자는 .css로 지정합니다.
스타일시트 파일에는 HTML 태그가 없어야 합니다.
다음은 외부 스타일시트의 예입니다.
body {
background-color: lightblue;
}
p {
font-size: 25px;
color: green;
}HTML 문서의 <head> 섹션에 <style> 요소에 정의합니다. 다음은 내부 스타일시트의 예입니다.
<head>
<style>
body {
background-color: lightblue;
}
p {
font-size: 25px;
color: green;
}
</style>
</head>
인라인 스타일은 단일 요소에 고유한 스타일을 지정하는데 사용할 수 있습니다.
HTML 요소의 style 속성에 CSS속성을 추가합니다.
<p style="font-size:35px;color:green">폰트크기 35px 색상 green</p>
인라인 스타일은 문서 내용에 스타일을 포함하므로 스타일시트의 장점을 상실합니다
꼭 필요할때에만 사용하십시오.
여러 스타일시트가 동일한 요소에 동일한 속성에 적용된 경우 마지막에 적용된 스타일시트의 값이 적용됩니다.
스타일시트 적용순서를 보게 되면 다음과 같습니다.
결과는 font-size:35px; background-color: yellow; color: red; 적용됩니다.