Codecademy front-end engineer course
DAY4
- Learn CSS: Selector and Visual Rules [1) CSS setup and Selector]
- Inline Style [인라인]
: add CSS attribute directly next to the HTML tag.
<p style="color: red; font-size: 20px;">I'm learning to code!</p>- The style tag
: you can specify which elements to apply the styling to.
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
- Linking the CSS file [CSS 파일 링크 걸기]
| href | attribute must be the address, or path, to the CSS file. |
| type | describes the type of document that you are linking to (text/css) |
| rel | relationship between the HTML file and the CSS file (stylesheet) |
<link href="./style.css" type="text/css" rel="stylesheet">
*CSS must select HTML elements, then apply styles to them.
- CSS with Class name
:To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name.
<!--html code-->
<p class="title">Sole Shoe Company</p>p {font-family: Arial;}
h1 {color: maroon;}
.title{color: teal;}
- Multiple Classes [클래스 여러 개]
If every HTML element had a single class, all the style information for each element would require a new class.
Luckily, it’s possible to add more than one class name to an HTML element’s class attribute.
<!--html code-->
<h1 class="green bold"> ... </h1>.green {
color: green;
}
.bold {
font-weight: bold;
}
- ID name
:To select an id element, CSS prepends the id name with a hashtag (#)
<!-- HTML code -->
<h1 id="large-title"> ... </h1>#large-title {
font-family: cursive;
text-transform: capitalize;
}
*Classes can be reusable, while IDs can only be used once.
*IDs are more specific than classes, and classes are more specific than tags.
- Selector Specificity [선택자 우선순위]
: The most specific selector type is the ID selector, followed by class selectors, followed by type selectors.
<h1 class="headline">Breaking News</h1>h1 {
color: red;
}
.headline {
color: firebrick;
}-> the color of the heading would be set to firebrick, as the class selector is more specific than the tag selector
- To make styles easy to edit, it’s best to style with a tag selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.
- Chaining Selector [Selector 묶기]
h1.special {
}: The code above would select only the h1 elements which have a class of special
- Nested Element
<ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>.main-list li {
}-> We can only adjust css style to the lists of class named 'main-list'
- Chaining &Specificity [묶었을 때의 우선순위]
.description h5{color: teal;}
h5{color: rebeccapurple;}-> the more general selector(h5) will not adjust to the page, because of the more specific CSS selector (.description h5).
- tag elements with a specific class [클래스와 태그]
:chain the class selector to the end of the element selector with no space between
p.time{color: gray;}- Multiple Selector [선택자 여러개]
h1 {
font-family: Georgia;
}
.menu {
font-family: Georgia;
}The above code can be converted to the below code with multiple selector
h1,
.menu {
font-family: Georgia;
}*QUIZ1
p {
}
#side-bar {
}
.main-content {
}
.main-content p {
}-> Id selector like #side-bar is the most specific element
*QUIZ2
body {
color: green;
}
.main-content a {
color: blue;
}
a {
color: red !important;
}-> the color of the links will appear in red color, because the !important rule overrides the other declarations.
'Web' 카테고리의 다른 글
| [CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB) (0) | 2021.01.19 |
|---|---|
| [Front-end] 6) Github로 웹페이지 만들기/Semantic CSS (0) | 2021.01.19 |
| [Front-end] 5)CSS 비주얼 규칙/ Visual Studio Code로 웹페이지 만들기 (0) | 2021.01.17 |
| [HTML] 3)HTML 구조/ Semantic HTML (#HTML tags) (0) | 2021.01.15 |
| [Front-end] 1)Brief info about Front-end web development (0) | 2021.01.10 |
