CSS:개요 편집하기 (부분)

==적용하는 법==
상위에서 <style>을 정의하고 이후의 태그에서 사용되는 스타일을 적용한다.

태그 안의 class 속성을 지정하여 스타일을 적용할 장소를 지정한다.

다음은 html 안에서의 스타일 적용 예시이다.
{| class="wikitable"
|+
!의도
!설명
!코드
|-
|단순 적용
|선택자를 두어 해당 class를 가진 태그에 적용할 속성을 지정한다.
|<syntaxhighlight lang="html">
<style>
    .box {
        width:200px;
    }
</style>

    
<div class="box"></div>
</syntaxhighlight>
|-
|자식에 적용
|선택자 띄고 선택자를 통해 class안의 class가 성립할 때 적용할 속성을 기입한다.
wrap 안의 box에만 적용한다.(다른 box태그엔 적용되지 않는다.)
.wrap 쓰고 한 칸 띄고 .box를 넣는다.
|<syntaxhighlight lang="html">
<style>
    .wrap .box {
        width:300px;
    }
</style>
    
<div class="wrap">
    <div class="box"></div>
</div>
</syntaxhighlight>
|-
|해시기호
|class가 아니라 id 적용대상으로 삼는다.
|<syntaxhighlight lang="html">
<style>
    #box {
        width:200px;
    }
</style>

    
<div id="box"></div>
</syntaxhighlight>
|-
|특정상황
|선택자 뒤에 : 를 붙이면 가상선택자가 된다.
hover같은 경우, 마우스를 올리면 나타나는 효과를 적용한다.
|<syntaxhighlight lang="html">
<style>
    .icon:hover{
        width:300px;
    }
</style>
    
<div class="box"></div>
</syntaxhighlight>
|}
.box와 같이 적용할 영역을 지정해주는 걸 선택자라 부른다. 그 안에 적용하는 내용들은 속성, 그 속성값을 값이라 부른다.