셀렉터 { 속성: 속성값; } | p { font-size: 20px; color: #333; } | p, div { color: #333; }
셀렉터(선택자) { 속성: 속성값; } - 하나의 셀렉터에 하나의 속성을 적용
셀렉터, 셀렉터 { 속성: 속성값 } - 두 개의 셀렉터가 같은 속성을 적용
셀렉터 셀렉터 { 속성: 속성값 } - 전 셀렉터에 속한 셀렉터에 속성을 적용
셀렉터는 태그 방식, 아이디(#) 방식과 클레스(.) 방식이 있다.
위 처럼 사용되며, 속성과 속성은 세미콜론(;)으로 구분합니다.
1. 인라인 방식(Inline Type) : 태그에 직접 적용
<body>
<p style="font-size: 12px;>두목은 멋져부러~</p>
</body>
2. 인터널 방식(Internal Type) : <head></head> 사이에 지정
<head>
<style type="text/css">
p { font-size: 12px; }
</style>
</head><body>
<p>두목은 멋져부러~</p>
</body>
<head>
<link rel="stylesheet" type="text/css" href="CSS의 경로" />
</head><body>
<p>두목은 멋져부러~</p>
</body>
<head>
<style type="text/css">
@import url(CSS의 경로);
</style>
</head><body>
<p>두목은 멋져부러~</p>
</body>
도트(.)로 셀렉터를 구분하며, 셀렉트의 이름을 사용자가 지정하여 스타일을 입히는 방식입니다.
<head>
<style type="text/css">
.doomok { color: #333; }
</style>
</head><body>
<p class="doomok">두목은 멋져부러~</p>
</body>
샵(#)으로 구분하며, 아이디의 이름을 사용자가 지정하여 스타일을 입히는 방식입니다. 클래스와 아주 유사하지만 문서 내에서 클래스는 동일한 태그요소에 다중 적용이 가능하지만, 아이디는 하나의 태그요소에만 적용가능합니다.
<head>
<style type="text/css">
#doomok { color: #333; }
</style>
</head><body>
<p id="doomok">두목은 멋져부러~</p>
</body>