[Lab] Codecademy CSS 教學筆記 2

--- Design a Button for Your Website ---

1 / 6
What you'll be building

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

On the CSS tab, add a div selector and add property: value pairs of:

1. height: 50px
2. width: 120px
3. border-color: #6495ED
4. background-color: #BCD2EE.

Your border-style can be any type (dashed, solid, and so on) and you can use any border-width you want. (We like 2px.)

3 / 6
Shaping your button
將邊界設成圓角
border-radius: 5px;

4 / 6
Positioning your button
設定margin以及將文字置中
margin: auto;
text-align: center;

1. margin: auto; is the CSS you use to tell the browser: "Hey! Make sure to set equal margins on each side of this HTML element." When the margins are equal, the object is centered.
2. text-align: center; is how you center text elements.

5 / 6
Adding the link 

6 / 6
It's alive!