.css
파일로 저장선택자(Selector)
: CSS를 적용하고자 하는 HTML 요소(element)세미콜론;
으로 구분하고 중괄호{ }
로 전체를 둘러쌈속성명(Property)
과 속성값(Property Value)
쌍으로 구성되어 있으며, 이 둘은 콜론:
으로 연결p { color: red; font-size: 14px; }
<style>
h1 { color: navy; }
h1, h2 { text-align: center; }
h1, h2, p { background-color: lightgray; }
</style>
#id_value { style properties }
id
, 속성값은 큰따옴표로 묶어서 임의로 지정한 후 head태그의 style태그에서 샵#
으로 호출한 후 { }
안에 적용<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<style>
#para {
color: teal;
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>아이디 선택자를 이용한 선택</h1>
<p id="para">이 부분에 스타일을 적용합니다.</p>
<p>아이디 선택자를 이용하여 스타일을 적용할 특정
HTML 요소를 선택할 수 있습니다.</p>
</body>
.class_name { style properties }
<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<style>
.paras {
color: lime;
text-decoration: overline;
}
</style>
</head>
<body>
<h1>클래스 선택자를 이용한 선택</h1>
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을
한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
</body>
/* 주석내용 */
<style>
p { color: teal; /*이것은 한 줄짜리 주석입니다.*/ font-size: 30px; }
/*
이것은 두 줄짜리 주석입니다.
몇 줄이라도 가능합니다.
*/
</style>
<p style="color:green; text-decoration:underline;">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</p>
<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>
</head>
<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
인라인 스타일이 적용되었다면 다른 스타일은 무시되고 내부, 외부 스타일의 경우 가장 마지막에 적용된 스타일 시트가 적용된다