코딩 배우기 | Learning Coding | CSS: An Overview 두번째
코딩 배우기 | Learning Coding | CSS: An Overview 두번째
INTRODUCTION TO CSS _ CSS: An Overview
13/26 Hexawhatnow?
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h1>I'm maroon!</h1>
<h2>I'm coral!</h2>
<h3>I'm goldenrod!</h3>
<h4>I'm sea green!</h4>
<h5>I'm royal blue!</h5>
<h6>I'm plum!</h6>
</body>
</html>
File2 _ stylesheet.css
h1 {color: #8B1C62;/*maroon*/
}
h2 {
color: #FF7256;/*coral*/
}
h3 {
color: #FFC125;/*goldenrod*/
}
h4 {
color: #54FF9F;/*sea green*/
}
h5 {
color: #530EE8;/*royal blue*/
}
h6 {
color: #8B668B;/*plum*/
}
14/26 Roses are red...
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h3>Roses are red.</h3>
<h2>Violets are blue!</h2>
</body>
</html>
File2 _ stylesheet.css
h3 {/*Add your CSS hex color here!*/
color: #cc6666;
}
h2 {
/*Add your CSS hex color here!*/
color: #8a2be2;
}
15/26 Pixels and ems
File1 _ index.html
<!DOCTYPE html><html>
<head>
<title>Result</title>
</head>
<body>
<p style="font-size: 1em">One em!</p>
<p style="font-size: 0.5em">Half an em!</p>
<p style="font-size: 2em">TWO EM!</p>
</body>
</html>
16/26 A font of knowledge
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h1>I'm going to be a serif font when I grow up!</h1>
<h2>I'm going to be a sans-serif font.</h2>
<h3>I'm going to be in cursive!</h3>
</body>
</html>
File2 _ stylesheet.css
/*Add your CSS below!*/h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
h3 {
font-family: cursive;
}
17/26 Backup values
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h1>I'm going to be a serif font when I grow up!</h1>
<h2>I'm going to be a sans-serif font.</h2>
<h3>I'm going to be in cursive!</h3>
</body>
</html>
File2 _ stylesheet.css
/*Add your CSS below!*/h1 {
font-family: Times, serif;
}
h2 {
font-family: Verdana, sans-serif;
}
h3 {
font-family: Vivaldi, cursive;
}
18/26 Review
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Free Play!</title>
</head>
<body>
<!--Go bananas!-->
<h1>Go bananas!</h1>
</body>
</html>
File2 _ stylesheet.css
/*Write your CSS below!*/h1 {
font-size: 1.5em;
font-family: cursive;
color: #FF7256;
}