2. CSS 적용하기

1. 인라인 방식

<body style="font-size: 14px;">

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<h1 style='color:red; background-color:yellow;'>Hello world</h1>
</body>
</html>

2. 내부 스타일 시트

<head>
	<style>
		body {font-size: 14px;}
	</style>
</head>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		h1 {
				color:red;
				background-color:yellow;
		}
	</style>
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

3. 외부 스타일 시트

외부 스타일 시트의 경우에는 파일의 경로 (href)를 맞춰주기 위해 html 파일과 css 파일이 같은 프로젝트에 위치해야 합니다. css 파일의 경우에도 메모장에서 작성할 수 있으며, html 파일 저장할 때와 마찬가지로 확장자를 .css 로 바꿔주면 됩니다.

<head>
	<link rel="stylesheet" href="css/foo.css">
</head>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="test.css">
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

파일명 : test.css

h1{
	color: red;
	background-color: yellow;
}

어떤 방식이든 결과 화면은 이와 같이 나옵니다.