코딩 배우기 | Learning Coding | Design a Button for Your Website
코딩 배우기 | Learning Coding | Design a Button for Your Website
INTRODUCTION TO CSS _ Design a Button for Your Website
Now I can style great looking buttons for my webpages.
1/6 What you'll be building
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
<a href="https://www.facebook.com/codecademy">Friend us on <span>Facebook!</span></a>
</div>
</body>
</html>
File2 _ stylesheet.css
img {display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
div {
border-radius: 5px;
border: 2px solid #6495ED;
background-color: #BCD2EE;
height: 50px;
width: 120px;
margin: auto;
text-align: center;
}
a {
text-decoration: none;
color: #3D59AB;
font-family: Verdana, sans-serif;
}
span {
font-weight: bold;
font-size: 18px;
color: #ffffff;
}
2/6 Drawing your button
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
</div>
</body>
</html>
File2 _ stylesheet.css
img {display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #bcd2ee;
border-style: dashed;
border-width: 2px;
}
3/6 Shaping your button
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
</div>
</body>
</html>
File2 _ stylesheet.css
img {display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #bcd2ee;
border-style: dashed;
border-width: 2px;
border-radius: 5px;
}
4/6 Positioning your button
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
</div>
</body>
</html>
File2 _ stylesheet.css
img {display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #bcd2ee;
border-style: dashed;
border-width: 2px;
border-radius: 5px;
margin: auto;
text-align: center;
}
5/6 Adding the link
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
<a href="http://jonestudio.blogspot.kr/">Go Go Go</a>
</div>
</body>
</html>
File2 _ stylesheet.css
img {display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #bcd2ee;
border-style: dashed;
border-width: 2px;
border-radius: 5px;
margin: auto;
text-align: center;
}
a {
text-decoration: none;
color: #FFC125;
font-family: Garamond, serif;
}
6/6 It's alive!
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
<a href="http://jonestudio.blogspot.kr/">Go Go Go</a>
</div>
</body>
</html>
File2 _ stylesheet.css
img {display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #bcd2ee;
border-style: dashed;
border-width: 2px;
border-radius: 5px;
margin: auto;
text-align: center;
}
a {
text-decoration: none;
color: #FFC125;
font-family: Garamond, serif;
}
Next Course: CSS Selectors