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

3월 06, 2019

Learn Css | Codecademy

1. Link css to Html

<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

By adding link tag that designates style.css file to <head> block in html file I can apply new style to html file.

2. inline style

<p style="font-family: Arial;"> I love brew </p>

I could do inline styling without using css files by adding style tag to html file directly.

3. head에 style 넣기

<head>
	<style>
	p {
		font-family: Arial;
		font-size: 20px;
		color: red;
	}
	</style>
</head>

It is also possible to write directly style tag to <head> block of html file. I apply some styles to every <p> tags in html body.

4. css 파일 작성해보기

# index.html 
<head>
<title> Hello world </title>
<link href="./mystyle.css" type="text/css" rel="stylesheet">
</head>
<body>
...
</body>

# mystyle.css
p {
	font-size: 20px;
	font-family: Arial;
}

It is much better to manage stying by spliting html file up into html file which covers information contents and css file which covers style contents. We can connect these two files by using <link> tags as you see above. In <link> tag there are some attribute, <href> notifies the file path we want to link, <type> notifies file type and <rel> informs the way how to use the linked file if I say ‘stylesheet’ it means the same making <style> </style> blocks.

type
- text/css
- text/javascript
- application/xml

5. class

# index.html
<body>
<h1 class="title"> Good Morning </h1>
</body>

# mystyle.css
.title {
	color: maroon;
}

By combining “.” with “classname” you can selectively apply that style.

6. superposition classes

.bold {
	font-weight: bold;
}
.upppercase {
	text-transform: uppercase;
}

<h1 class="bold uppercase"> important information </h1>

If you have two class styles in css file and you want to apply multiful class styles to a tag in html file. It is easy. Just write as many class names as you want in that tag.

7. apply to id

.bold {
	font-weight: bold;
}
.upppercase {
	text-transform: uppercase;
}
#article-title {
	text-transform: capitalize;
	font-family: cursive;
}

# index.html
<body>
<h1 class="title" id="article-title"> Good Morning </h1>
</body>

In css file it is possible to access <id> tags with combining “#” and “id names”. What is funny thing is there can be collision with <class> tag styling. In this case <id> styling has higher priority so, <h1> text will be capitalized not uppercased.

8. id와 class의 차이점

What we studied to now, the difference between class tag and id tag is that when the two styles collide id style get a higher priority. But why this rule is needed? We can write css file without colliding these two styles, just use class only.
In this point I get to know that <id> name is so unique that any two tags can’t get a same id name.
Yeah. Id means Identity as you know.

이 블로그 검색

I love brew