[CSS] ID selector vs Class seletor

 ID selector vs Class seletor

ID selector (한 페이지에 한개만 #로 지칭)

Selects an element with a given ID. Only one per page! (one html)

we refer to ID in CSS with a dash

<div>

<p>You say yes</p>

<p>I say no</p>

</div>

<div>

<p>you say goodbye</p>

<p id="special">I say hello</p>

</div>

Class selector (여러개 묶어서 지정할 때 dot으로 지칭)

IDs are great to single out individual elements but oftentimes we want to have multiple elements that look similar but we don't want all allies for instance. so let's say I wanted to style half of the allies one way and half of them another way we could use a class to achieve that.

So the way that's a class works its just like an ID except its called a class and we can apply it to any number of elements on a page.

we refer to Class in CSS with a dot

text-decoration:

Initial value	as each of the properties of the shorthand: text-decoration-color: currentcolor text-decoration-style: solid text-decoration-line: none

CSS Demo: text-decoration-style
text-decoration-style: solid; text-decoration-style: double;
text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy;

CSS Demo: text-decoration-line

text-decoration-line: none; none Produces no text decoration.

text-decoration-line: underline; underlineEach line of text has a decorative line beneath it.

text-decoration-line: overline;  overline Each line of text has a decorative line above it.

text-decoration-line: line-through; line-through Each line of text has a decorative line going through its middle.

text-decoration-line: blink;blink The text blinks (alternates between visible and invisible). 

여러개 쓰는 경우 그냥 나열하면 됨.

text-decoration-line: underline overline;

text-decoration-line: underline line-through;

For example

HTML 

<ul>

<li class="completed">

<input type="checkbox">

Walk Rusty

</li>

<li class="completed">

<input type="checkbox">

Buy Groceries

</li>

<li id="tomato">

<input type="checkbox">

Finish Recording Css courses

</li>

</ul>

CSS

#tomato {

background-color: tomato;

text-decoration: lightpink dashed blink line-through;

}

.completed {

text-decoration-line: overline underline line-through;

}

OUTCOME