1.HTML 에 CSS 데려오기
<link href="style.css" type="text/css" rel="stylesheet">2. Inline Styles
<p style="color: red; font-size: 20px;">I'm learning to code!</p>=>html에서 태그 안에 style 속성으로 스타일 입히는 것
3.The style Tag
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>4.The .css file
5.Linking the CSS File
- You can use the link element to link HTML and CSS files together. The link element must be placed within the head of the HTML file. It is a self-closing tag and requires the following three attributes:
- href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
- type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
- rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.
- When linking an HTML file and a CSS file together
<link href="style.css" type="text/css" rel="stylesheet">- link - href - type - rel
6.Tag Name
p {
}7.Class Name
.brand {
}8.Multiple Classes
- For instance, perhaps there’s a heading element that needs to be green and bold. You could write two CSS rules like so:
.green {
color: green;
}
.bold {
font-weight: bold;
}- Then, you could include both of these classes on one HTML element like this:
<h1 class="green bold"> ... </h1>9.ID Name
#large-title {
}10.Classes and IDs
- id를 이용해 여러 클래스 중 특정 아이디 확정 가능
- While classes are meant to be used many times, an ID is meant to style only one element.
- As we’ll learn in the next exercise, IDs override the styles of tags and classes.
- Since IDs override class and tag styles, they should be used sparingly and only on elements that need to always appear the same.
11.Specificity
-
browser decides which CSS styles will be displayed.
-
IDs are the most specific selector in CSS,
followed by classes, and finally, tags. -
For example, consider the following HTML and CSS:
h1 {
color: red;
}
.headline {
color: firebrick;
- 이런 경우에 겹친다면, 더 구체성을 가지는 (태그<클래스<아이디)
클래스의 속성이 적용
12.Chaining Selectors
-
여러가지 클래스에 한번에 속성 먹이고 싶을 때 한번에 적용시키기 가능
-
it’s possible to require an HTML element to have two or more CSS selectors at the same time.
-
This is done by combining multiple selectors, which we will refer to as chaining.
h1.special {
}13.Nested Elements
-
CSS also supports selecting elements that are nested within other HTML elements
-
어떤 클래스,태그,아이디 밑의 속성 콕 찝어서 css적용 가능
<ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
- 이런 css에서 li에만 속성 맥이기도 가능
.main-list li {
}14.Chaining and Specificity
- Adding more than one tag, class, or ID to a CSS selector increases the specificity of the CSS selector.
p {
color: blue;
}
.main p {
color: red;
}p 모두 파랑으로 나온다, except main에 있는 p
15.Multiple Selectors
-
to make CSS more concise, it’s possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code.
-
여러 클래스와, 태그, 아이디 한번에 써놓고 css한번에 때려넣기 가능
h1 {
font-family: Georgia;
}
.menu {
font-family: Georgia;
}===>
h1,
.menu {
font-family: Georgia;
}REVIEW
- CSS can change the look of HTML elements. In order to do this, CSS must select HTML elements, then apply styles to them.
- CSS can select HTML elements by tag, class, or ID.
- Multiple CSS classes can be applied to one HTML element.
- Classes can be reusable, while IDs can only be used once.
- IDs are more specific than classes, and classes are more specific than tags. That means IDs will override any styles from a class, and classes will override any styles from a tag selector.
- Multiple selectors can be chained together to select an element. This raises the specificity, but can be necessary.
- Nested elements can be selected by separating selectors with a space.
- Multiple unrelated selectors can receive the same styles by separating the selector names with commas.
