코딩 배우기 | Learning Coding | CSS: An Overview 세번째
코딩 배우기 | Learning Coding | CSS: An Overview 세번째
INTRODUCTION TO CSS _ CSS: An Overview
19/26 Background color, height, and width
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div></div>
</body>
</html>
File2 _ stylesheet.css
/*Add your CSS below!*/div {
background color: #cc0000; height: 100px; width: 100px;
}
20/26 Bordering on insanity
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<table>
<thead>
<th colspan="3">Nine Blocks!</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
File2 _ stylesheet.css
/*Add your CSS below!*/td {
height: 50px; border: 1px dashed blue;
}
table {
border: 1px solid black;
}
21/26 Links and text decoration
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<p>The below link goes to Google!</p>
<a href="http://www.google.com/">Google</a>
</body>
</html>
File2 _ stylesheet.css
/*Add your CSS below!*/a {
color: cc0000; text-decoration: none;
}
22/26 HTML + CSS = BFFs
File1 _ index.html
<!DOCTYPE html><html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body></body>
</html>
File2 _ stylesheet.css
23/26 Many selectors, many properties
File1 _ index.html
<!DOCTYPE html><html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h1>Many Selertors, many properties</h1>
<p>HTML study for JONE STUDIO</p>
</body>
</html>
File2 _ stylesheet.css
h1 {font-family: Verdana; color: #576D94;
}
p {
font-size: 18px; color: #4A4943;
}
24/26 Fall back!
File1 _ index.html
<!DOCTYPE html><html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h1>Many Selectors, many properties</h1>
<p>HTML study for JONE STUDIO</p>
</body>
</html>
File2 _ stylesheet.css
h1 {font-family: Verdana, sans-serif; color: #576D94;
}
p {
font-size: 18px; color: #4A4943; font-family: Garamond, serif;
}
25/26 Size and borders
File1 _ index.html
<!DOCTYPE html><html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h1>Many Selectors, many properties</h1>
<p>HTML study for JONE STUDIO</p>
<img src="http://bit.ly/NnVbxt"/>
</body>
</html>
File2 _ stylesheet.css
h1 {font-family: Verdana, sans-serif; color: #576D94;
}
p {
font-size: 18px; color: #4A4943; font-family: Garamond, serif;
}
img {
height: 100px; width: 300px;
border: 1px solid #4682b4;
}
26/26 Links and text decoration
File1 _ index.html
<!DOCTYPE html><html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h1>Many Selectors, many properties</h1>
<p>HTML study for JONE STUDIO</p>
<img src="http://bit.ly/NnVbxt"/><br><br>
<a href="http://jonestudio.blogspot.kr/">JONE STUDIO</a>
</body>
</html>
File2 _ stylesheet.css
h1 {font-family: Verdana, sans-serif; color: #576D94;
}
p {
font-size: 18px; color: #4A4943; font-family: Garamond, serif;
}
img {
height: 100px; width: 300px;
border: 1px solid #4682b4;
}
a {
text-decoration: none; color: #cc0000; font-family: Verdana, sans-serif;
}
Congratulations, you've finished this course!
Next Course: Design a Button for Your Website
Next Course: Design a Button for Your Website