[CSS] 05 Linking CSS Files
Published:
In this post, 05 CSS lecture is introuduced.
Linking CSS Files
아래처럼 별도의 CSS 파일을 만들고 HTML 파일에 link tag를 이용해 CSS file을 link 할 수 있다.
a {
color: black;
text-decoration:none;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
#grid ol {
border-right: 1px solid gray;
width: 100px;
margin: 0px;
padding-left: 33px;
}
body{
margin: 0px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#article {
padding-left: 25px;
}
@media(max-width:800px){
#grid {
display: block;
}
#grid ol {
border-right: none;
}
}
<!doctype html>
<html>
<head>
<title>WEB1 - html</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2> CSS</h2>
I'm <u>studying</u> <strong>CSS</strong>.<br>
Visit <a href="https://www.w3.org/Style/CSS/Overview.en.html">HERE</a> if you want to see the official document of CSS.
<img src="coding.jpg" width="100%">
</div>
</div>
</body>
</html>
Leave a Comment