외부 파일에 스타일을 지정해서 사용할 수 있다.
사용하는 방법은 head 쪽에 <link href="css파일 주소" rel="stylesheet">을 적어주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../css/style.css" rel="stylesheet">
<title>CSS 외부 스타일</title>
</head>
<body>
<h1 class="title1">외부 스타일</h1>
<p id="p1">HTML 문서 외부에 스타일 시트(*.css)을 작성해 두고 여러 웹 페이지에서
해당 스타일이 필요한 경우 스타일을 참조하는 방식</p>
<p>HTML 파일을 열어 <head> 태그의 내부에 style.css 파일을 연결하는 코드를 <link> 태그로 추가한다.</p>
<label class="title1">스타일을 사용하는 방법</label>
<ul class="boldstyle brownstyle">
<li>인라인 스타일</li>
<li>임베디드 스타일</li>
<li>외부파일 스타일</li>
</ul>
</body>
</html>
h1 {
color: blue;
}
p {
font-size: 16px;
color: brown;
margin-bottom: 15px;
}
#p1 {
color: green;
}
label {
color: burlywood;
font-weight: bold;
font-size: 20px;
}
.tltle1 {
font-style: italic;
}
.boldstyle {
font-weight: bold;
}
.brownstyle {
color: brown;
}
]
728x90
반응형
'HTML > CSS 기초' 카테고리의 다른 글
| [CSS] margin 설정하기 (0) | 2020.07.28 |
|---|---|
| [CSS] 문단마다 스타일 설정하기 (0) | 2020.07.28 |
| [CSS] 글자 스타일 (0) | 2020.07.28 |
| [CSS] prefix (0) | 2020.07.28 |
| [CSS] 인라인 스타일, 임베디드 스타일 (0) | 2020.07.28 |
