[Eng]Today I learned : Day 2 Html&Css

1. to be more specific

# index.html 
<h1 class="destination"> Seoul </h1>
<h2 class="destination"> Busan </h1>

# style.css
h1.destination {
	font-family: cursive;
}

Specify css style only to be applied to h1 with “destination” class name.

2. access to nested structure

# index.html 
<div class="description"> 
<h1> Seoul </h1>
<p> Seoul is famouse city... </p>
</div>
<h1> Beijing </h1>

#style.css
.description h1 {
	color: teal;
}

In html file all the elements are in including relationship. This is called nested, as you can see in index.html file there are h1 and p tags which are subordinate to div having “destination” classname. what can I do to change the color of text “Seoul”? In this case I want to say “please change the h1 tag having ‘description’ class name” and this is possible by specifying elements with adding space between tags. Pay attention to that only the element which is at the end of the line is applied to style. This is more specific method to specify elements and of course it gains higer priority than general specifying method.

3. 우선순위

2. nested 구조 특정하기

# index.html 
<div class="description"> 
<h1> Seoul </h1>
<p> Seoul is famouse city... </p>
</div>
<h1> Beijing </h1>

#style.css
.description h1 {
	color: teal;
}
h1 {
	color: rebeccapurple;
}

Text “Beijing” would change to rebeccapurple color but text “Seoul” would change to teal color.

4. !important

#style.css
.description h1 {
	color: teal;
}
h1 {
	color: rebeccapurple !important;
}

There is a strong method to ignore above rules, which is the strongest rule in Css file. If I write “!important” at the end of the that attribute then it is applied ignoring other rules.

5. text 꾸미기

# style.css
body {
	font-size: 18px;
	font-family: Helvectica;
	font-weight: bold;
	text-align: center;
}

You can apply style to whole html body by writing body {} in css file.

6. color

# style.css
p {
	background: white;
	color: black;
}

In css’s color attribute there are “background” and “foreground” style. “background” literally deals with background and “foreground” deals with elements. For example color of text in <p> would change to black.

7. opacity

# style.css
.caption {
	background: white;
	color: black;
	opacity: 0.75
}

Opacity deals with transparency.

8. background image

# style.css 
.image {
	background-image: url("https://www.naver.com/lion.jpeg");
}

If you want to supply your own image, use “background-image” attribute and fill it with url.

9. etc

# style.css
.caption li{
	list-style: square
}