IT 일기장

[HTML&CSS] CSS Selectors - 2 본문

프로그래밍 언어/HTML&CSS

[HTML&CSS] CSS Selectors - 2

뽕슈 2021. 12. 5. 23:16
반응형

저번에는 id 속성으로 CSS를 먹였었는데 이번엔 class 속성으로 먹였다.

 

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1 class="center">My First CSS Example</p>
        <p class="center">This is a paragraph</p>
    </body>
</html>

style.css

.center {text-align:center;color:blue;}

아직은 정말 쉽다 class 속성중 center라는 명을 가진 애들은 CSS를 먹일 수 있다.

 

 

p tag 의 class 속성중 center라는 명을 가진 애들을 지정할수도 있다.

 

style.css

p.center {text-align:center;color:blue;}

id 속성도 마찬가지지만 class 속성에 여러개 이름을 지정할 수 있다. 뭐 아직까지는 이해하는데 무리가 없다.

 

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1 class="center">My First CSS Example</p>
        <p class="center">This is a paragraph</p>
        <p class="center large">large font-size.</p>
    </body>
</html>

 

style.css

p.center {text-align:center;color:blue;}
p.large {font-size: 300%;}

 

반응형
저작자표시

'프로그래밍 언어 > HTML&CSS' 카테고리의 다른 글

[HTML&CSS] input type number maxlength 적용하기  (1) 2024.09.02
[HTML&CSS] 구글 이스터에그 do a barrel roll 구현  (0) 2023.08.09
[CSS] 상단 여백 조절  (0) 2021.12.14
[HTML&CSS] CSS Selectors  (0) 2021.12.04
[HTML&CSS] CSS Tutorial  (0) 2021.12.04
'프로그래밍 언어/HTML&CSS' Related Articles more
Comments