본문으로 건너뛰기

Selector - Specifying Targets for Styling

Selector: Specifying Targets for Styling

CSS Selectors select HTML elements in a variety of ways, as described below.


Universal Selector: Uses the * symbol to select all HTML elements

CSS
* {
color: blue; /* Sets the text color of all HTML elements to blue */
}

Element Selector: Selects HTML elements with specific tag names

CSS
p {
font-size: 16px; /* Specifies the font size of all p tags to 16px */
}

Class Selector: Uses the .class format to select HTML elements with a specific class

CSS
.highlight {
background-color: yellow; /* Sets the background color of HTML elements with the 'highlight' class to yellow */
}

ID Selector: Uses the #id format to select HTML elements with a specific ID

CSS
#header {
font-weight: bold; /* Sets the font weight of the HTML element with the 'header' ID to bold */
}

Descendant Selector: Selects nested elements within another element

CSS
ul li {
list-style: circle; /* Selects li tags within ul tags and sets the list style to circle */
}

HTML & CSS Usage Example

The following is an example of using HTML and CSS together.

HTML
<body>
<p class="my-class">This HTML element uses a `p` tag and has the `my-class` class.</p>
<h1 id="my-id">This HTML element uses an `h1` tag and has the `my-id` ID.</h1>
</body>
CSS
p {
color: red;
}

.my-class {
background-color: blue;
}

#my-id {
font-size: 20px;
}

This CSS would render as follows:

(Text in red) This HTML element uses a p tag and has the my-class class. (Background in blue) This HTML element uses an h1 tag and has the my-id ID.

In the next lesson, we will look at how to structure advanced selectors.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!