[关闭]
@Sarah 2015-12-26T20:31:34.000000Z 字数 21788 阅读 1353

CSS: An Overview

css

Seeing is believing
Take a look at the HTML file in index.html. Pretty standard, right? You know all this stuff: headers, paragraphs, images, lists, and tables. Look in the preview pane: no surprises there. (In fact, it's pretty ugly if you ask us.)

The stylesheet.css tab (which we'll teach you how to use in this course) contains all the CSS styling information: where HTML elements should go, what color they should be, how big they should be, and more.

We've commented out a crucial line in the index.html file. If you remove the comment (the in line 6 after the text), you'll be able to see the magic CSS imparts. Don't delete any of the actual tag!

Instructions
Remove the comment from around the tag on line 4, then view the result in the preview pane to see what you'll soon be able to do with CSS! You can click Full Screen to see all the images.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  5.         <title>Result</title>
  6.     </head>
  7.     <body>
  8.         <div id="header">
  9.             <div id="navbar">
  10.                 <ul>
  11.                     <li>Home</li>
  12.                     <li>About Me</li>
  13.                     <li>Plans for World Domination</li>
  14.                     <li>Contact</li>
  15.                 </ul>
  16.             </div>
  17.             <h2>About Me</h2>
  18.         </div>
  19.         <div id="left">
  20.         <img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/>
  21.         <p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
  22.         </div>
  23.         <div id="right">
  24.         <table>
  25.             <th colspan="3">My Bros</th>
  26.             <tr>
  27.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td>
  28.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td>
  29.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td>
  30.             </tr>
  31.             <tr>
  32.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td>
  33.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td>
  34.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td>
  35.             </tr>
  36.             <tr>
  37.                 <td><img id="bottom_left" src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td>
  38.                 <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td>
  39.                 <td><img id="bottom_right" src="https://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td>
  40.             </tr>
  41.         </table>
  42.         </div>
  43.         <div id="footer">
  44.             <div id="button">
  45.                 <p>Send me an <span class="bold">e-mail</span>!</p>
  46.             </div>
  47.         </div>
  48.     </body>
  49. </html>
  1. body {
  2.     background-color: #b7d1c4
  3. }
  5. h2 {
  6.     font-family: Verdana;
  7.     font-weight: bold;
  8.     text-align: center;
  9.     padding-top: 25px;
  10.     padding-bottom: 25px;
  11.     color: #acd1b2;
  12. }
  14. img {
  15.     height: 170px;
  16.     width: 170px;
  17.     box-shadow: rgba(0,0,0,0.2) 10px 10px;
  19. }
  21. #navbar {
  22.     position: fixed;
  23.     top:10px;
  24.     left:50%;
  25.     margin-left:-254px;
  26. }
  28. #header {
  29.     position: relative;
  30.     top: -10px;
  31.     background-color: #3c4543;
  32.     border-top-left-radius: 15px;
  33.     border-top-right-radius: 15px;
  34. }
  36. ul{
  37.     list-style-type: none;
  38.     position: fixed;
  39.     margin: -10px;
  40. }
  42. li {
  43.     display: inline;
  44.     border: 2px solid #000000;
  45.     font-family: Futura, Tahoma, sans-serif;
  46.     color: #ffffff;
  47.     padding: 5px;
  48.     border-radius: 5px 5px;
  49.     background-color: #cc0323
  50. }
  52. #left{
  53.     width: 45%;
  54.     float: left;
  55. }
  57. p {
  58.     font-family: Tahoma;
  59.     font-size: 1em;
  60. }
  62. #right{
  63.     width: 45%;
  64.     float: right;
  65. }
  67. table {
  68.     border: #000000 1px solid;
  69.     background-color: #acd1b2;
  70.     float: right;
  71.     margin-right: 10px;
  72.     border-bottom-right-radius: 15px;
  73.     border-bottom-left-radius: 15px;
  74. }
  76. td {
  77.     height: 75px;
  78.     width: 75px;
  79. }
  81. td img {
  82.     height: 75px;
  83.     width: 75px;
  84.     box-shadow: none;
  85. }
  87. th {
  88.     font-family: Verdana;
  89.     font-size: 1em;
  90.     font-weight: normal;
  91.     color: #3c4543
  92. }
  94. #bottom_left{
  95.     border-bottom-left-radius: 15px;
  96. }
  98. #bottom_right{
  99.     border-bottom-right-radius: 15px;
  100. }
  102. #footer{
  103.     clear: both;
  104.     position: relative;
  105.     bottom: -20px;
  106.     border-bottom-left-radius: 15px;
  107.     border-bottom-right-radius: 15px;
  108.     height: 75px;
  109.     background-color: #3c4543;
  110. }
  112. #button{
  113.     border: 2px solid #000000;
  114.     float:left;
  115.     position: relative;
  116.     left: 229px;
  117.     bottom: -20px;
  118.     border-radius: 5px;
  119.     background-color: #cc0323;
  120.     height: 30px;
  121.     width: 150px;
  123. }
  125. #button p{
  126.     position: relative;
  127.     bottom: 10px;
  128.     font-size: 0.8em;
  129.     color: #acd1b2;
  130.     text-align: center;
  131. }
  133. .bold{
  134.     font-family: tahoma;
  135.     font-weight: bold;
  136.     font-size: 1.2em;
  137.     font-variant: small-caps;
  138.     color: #ffffff;
  139. }

Why separate form from function?

Great work! Look at you. You're already writing CSS.

There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML):

You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over
You can apply similar appearance and formatting to several HTML pages from a single CSS file
Look at the HTML in index.html. That's a lot of tags! All those words are in regular font, but we want them to be super fancy.

Instructions
Go to the stylesheet.css tab and tell the span selector that you want the font-family to be cursive. Check the Hint if you need help!

?
Hint 似乎是 css 把html文档里span中间的做处理
Let's see... making something red meant we had to type

span {
color: red;
}
So if we put in

font-family: cursive;
that should fancify our font!

  1. p {
  2.     font-size: 100px;
  3. }
  5. span {
  6.     /*Add your CSS here!*/
  7.     color:red;
  8.     font-family:cursive;
  9. }

If it's in, it's out!

We previously showed you how to do inline styling with HTML, like so:

Red font!

This is a less awesome way to style your website for the reasons we just mentioned: you have to write the same code over and over, and if you want to make a big stylistic change to several elements, you have to change every single style tag. With a single CSS file, you only have to make the change in one place!

There are two ways to put CSS in one place. This first is to put your CSS between < /style> tags, right in the same file as your HTML. These < style> tags go inside the of your webpage; check out the example in the editor to the right.

Instructions
Make sense? Good! Hit Save & Submit Code to continue.

But there's an even better way.

You know you should write your CSS in a totally separate file. But how do you make sure your HTML file can see that CSS information?

You do this by putting a tag (as you saw in the first exercise of this course) between the ... tags of your HTML page. Your tag needs three attributes:

A type attribute that should always be equal to "text/css"
A rel attribute that should always be equal to "stylesheet"
A href attribute that should point to the web address of your CSS file
In the editor to the right, you'll see two files: index.html and stylesheet.css.

Instructions
Insert a to stylesheet.css in index.html. Check the Hint if you need help!

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Result</title>
  5.     </head>
  6.     <body>
  7.     <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  8.         <p>I want to be SIZE 44 font!</p>
  9.     </body>
  10. </html>
  1. p {
  2.     font-size: 44px;
  3. }

PSA: Self-closing tags

This brings us to a quick (but noteworthy!) concept in HTML: the self-closing tag.

Because nothing ever goes between tags, it's okay to use a single set of <>s to be the opening and closing tags. You do that like so:


You may have noticed us do something similar with the tag:


Most tags are not self-closing, but we'll point out the self-closing ones to help save you time and typing.

Instructions
All right! Hit Save & Submit Code to proceed to the next stop on our whirlwind tour of CSS: syntax!

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Result</title>
  5.     </head>
  6.     <body>
  7.     <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  8.         <p>I want to be SIZE 44 font!</p>
  9.     </body>
  10. </html>

Syntax for the wintax

CSS syntax is different from the HTML you're used to, but don't worry: it's easy to pick up! The general format looks like this:

selector {
property: value;
}
A selector can be any HTML element, such as

, , or

p {
color: red;
}
A property is an aspect of a selector. For instance, you can change the font-family, color, and font-size of the text on your web pages (in addition to many more).

A value is a possible setting for a property. color can be red, blue, black, or almost any color; font-family can be a whole bunch of different fonts; and so on.

You need to end each property-value with a semi-colon (;). That's how CSS knows you're done with one pair and ready for the next.

One selector, many properties

Great work!

Another cool advantage of CSS is that you can set many properties for one selector. For instance, if you want to set a paragraph's font, font color, and font size, you can simply write:

p {
font-family: Arial;
color: blue;
font-size: 24px;
}
Remember: end each property-value pair with a semicolon!

Please note: If you have adjusted your browser's zoom, tests involving font-size and height will not work correctly. To remedy this, please type Command+0 or Ctrl+0 to reset your view.

Instructions
Underneath your color: green property-value pair (but before the final }!), set the font-family to Garamond and the font-size to 24px.

  1. p{
  2.     color:green;
  3.     font-family:Garamond;
  4.     font-size:24px;
  7. }

Many selectors, many properties

Good work! They say that practice makes perfect, so let's do a couple more. (We'll talk even more about selectors in the next course.)

Instructions
Make all the h3 headings red.
Set all the paragraphs to the Courier font-family. (Make sure to capitalize "Courier" as shown!)
The second paragraph contains text between tags. Set the background-color of that to 'yellow'. (See the Hint for help!)
?
Hint
Remember the syntax:

selector {
property: value;
}

  1. /*You can do this! Write your CSS below.*/
  2. h3{
  3.  color:red;   
  4. }
  6. p{
  7.  font-family:Courier;   
  8. }
  9. span{
  10.  background-color:yellow;   
  11. }

The importance of semicolons

As you start adding more and more property-value pairs for each CSS selector, it's important to remember to put a semicolon (;) at the end of each line.

The semicolon tells CSS that one property-value pair is over and it's time to move on to the next one. Without semicolons, it'll become confused and your page won't look right.

Also, don't forget: all property-value pairs for a selector are surrounded by curly braces ({}).

Instructions
The CSS in stylesheet.css is broken; some of the curly braces ({}) are out of whack and semicolons are missing. Your mission (should you choose to accept it): fix this CSS!

  1. h3 {
  2.     font-family: Verdana;
  3.     color: blue;
  4. }
  6. p {
  7.     font-family: Garamond;
  8.     font-size: 16px;
  9. }

Color commentary

Great! You're really getting the hang of this.

While it's important to get all your syntax down correctly, it's also a good idea to write comments as you go along. Good comments will help remind you why you did something a certain way (or will help someone else out if they're reading your code without you there to explain it).

As you've seen, HTML comments look like this:


CSS comments, on the other hand, look like this:

/I'm a comment!/
Remember: the computer doesn't look at comments when figuring out what your HTML and CSS should do, but writing good comments is a good habit you want to pick up!

Instructions
See the CSS we've added for the p selector in stylesheet.css? Comment it out! (That is, put /* before the p in that tab and */ after the closing }.

  2. p {
  3. /*  color:red;*/
  4. }

Check yourself before you wreck yourself

You've learned a lot in just a few short lessons. We're impressed! Let's quickly review to make sure you really know your stuff.

Instructions
Add a to stylesheet.css between your tags.
Change the

header's font-family to Verdana. (Make sure Verdana is capitalized as shown!)
Change the

header's font-family to Courier. (Make sure Courier is capitalized as shown!)
Make the paragraph text color purple.
Add a /* CSS comment */ to the CSS tab! It can say anything you like. (Remember: HTML comments and CSS comments are written differently.)
?
//link的作用是把HTML文件和你的CSS连接到一起！！

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  6.         <title>Result</title>
  7.     </head>
  8.     <body>
  9.         <h1>Change me to Verdana.</h1>
  10.         <h3>Change me to Courier.</h3>
  11.         <p>Make me purple!</p>
  12.     </body>
  13. </html>

Hexawhatnow?

You've got the main ideas—now it's time to dive into the nitty-gritty.

You've noticed that when we've asked you to set color properties using CSS, we've been having you type things like color:red. You may have asked yourself: what if I want maroon? Or fire engine red? Or more of a red-orange? Does CSS know all those words?

The answer is no. It can, however, understand millions of colors in the form of hexadecimal values.

You're already extremely familiar with decimal values: it's everyday counting! You know when you see a number (e.g. 1,432) that each digit can only be the ten values 0 through 9. Because there are only ten possibilities, we say that regular counting is base-10.

Hexadecimal counting is base-16. Each digit can be the numbers 0 through 9 or the letters a through f! Crazy, right? Check it out:

Instructions
We've set the headers in the editor to different hexadecimal values, which you can see on the CSS tab. Click over to the Result tab to see the wide range of colors!

Hit Save & Submit Code to continue.

  1. h1 {
  2.     color: #8B1C62;
  3. }
  5. h2 {
  6.     color: #FF7256;
  7. }
  9. h3 {
  10.     color: #FFC125;
  11. }
  13. h4 {
  14.     color: #54FF9F;
  15. }
  17. h5 {
  18.     color: #530EE8;
  19. }
  21. h6 {
  22.     color: #8B668B;
  23. }

Roses are red...

There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values.

Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!

Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the same color.

Instructions
Make the

color #cc6666 and the

color #8a2be2.

  1. h3 {
  2.     color:#cc6666;
  3. }
  5. h2 {
  6.     color:#8a2be2;
  7. }

Pixels and ems

Great work! We'll do more with colors as you learn more CSS.

When we've asked you to adjust font size, we've specified that the unit you should use is px (for "pixels"), like so:

p {
font-size: 10px;
}
A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.

What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the tags we use for emphasis!)

The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!"

Check it out: we've set three different paragraphs to the font-sizes 1em, 0.5em, and 2em. For now, use whichever unit (px or em) you're more comfortable with—we just wanted to show you em now so you're not surprised when you see it later.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Result</title>
  5.     </head>
  6.     <body>
  7.         <p style="font-size: 1em">One em!</p>
  8.         <p style="font-size: 0.5em">Half an em!</p>
  9.         <p style="font-size: 2em">TWO EM!</p>
  10.     </body>
  11. </html>

A font of knowledge

We've also asked you to change the font-family of certain elements using CSS. You've seen us use the fonts Verdana, Courier, and Garamond. But how many fonts does CSS know?

The answer is: it depends. Most computers will understand popular fonts like Verdana, Courier, and Garamond, but each individual computer has different fonts installed on it. The good news is that CSS has some built-in defaults meant to ensure your users see what you intend. They are:

serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean.

sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does.

cursive: A scripty font! It looks like cursive writing.

We'll show you how to import your own fonts in a later course! This will help make sure the person viewing your page has all the fonts you want them to have.

Instructions
Set the font-family of the

header to serif, the

to sans-serif, and the

to cursive.

  1. /*Add your CSS below!*/
  2. h1{
  4.    font-family:serif; 
  5. }
  7. h2{
  9.    font-family:sans-serif; 
  10. }
  13. h3{
  15.    font-family:cursive; 
  16. }

Backup values

You don't have to jump straight to a default value like cursive or sans-serif: you can tell CSS to try several, going from one to the next if the one you want isn't available.

For example, if you write:

p {
font-family: Tahoma, Verdana, sans-serif;
}
CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.

Instructions
In the stylesheet.css tab, add Times as an option before serif, Verdana as an option before sans-serif, and Vivaldi as an option before cursive. Check the Hint if you need help!

?

  1. /*Add your CSS below!*/
  2. h1{
  4.    font-family:Times ,serif; 
  5. }
  7. h2{
  9.    font-family:Verdana ,sans-serif; 
  10. }
  13. h3{
  15.    font-family:Vivaldi,cursive; 
  16. }

Review

Great work! You've learned a ton so far. Let's take a quick breather to review.

We've covered:

What CSS is
Why we separate form from function
CSS syntax, including (multiple) selectors, (multiple) property-value pairs, and comments
Details of how colors, font sizes, and font families work
Instructions
Time for a little free play! Use the HTML and CSS files to the right to practice what you've learned. Hit Save & Submit Code when you're ready to move on.

Background color, height, and width

Remember our friend

, and how we used it to make those multi-colored blocks? Time for you to build your own blocks! (Well, block. Let's not get ahead of ourselves.)

There are three properties you'll need to set values for:

background-color, which you set to a color or hex value
height, which you set to a value in pixels
width, which is also measured in pixels
These exercises will give you a brief overview of the different HTML elements you can select and what some of their property-value pairs are (like the new ones we mention above). We'll cover HTML element selection more in the next course!

Instructions
In the stylesheet.css tab:

Set the background-color to #cc0000, like this: background-color: #cc0000;
Set the height to 100px, like this: height: 100px;
Set the width to 100px, as well.

  1. /*Add your CSS below!*/
  2. background-color: #cc0000;
  3. height: 100px;
  4. widtht: 100px;

Bordering on insanity

Many HTML elements support the border property. This can be especially useful with tables.

The border property in turn supports several values. For example, for a border 2 pixels thick, solid, and red, you'd type

selector {
border: 2px solid red;
}
Borders: pretty fancy.

Instructions
In the stylesheet.css tab:

Set your tds (table data cells) to have a height of 50px so we can see them better when we add our border.
Give your tds a border of 1px dashed blue.
Give your table a border of 1px solid black.
?

```/Add your CSS below!/
td{
height:50px;
border: 1px solid black;
}

  3. <div class="md-section-divider"></div>
  5. ##Links and text decoration
  6. Links have a lot of the same properties as regular text: you can change their font, color, size, and so on.
  8. But links also have a property, text-decoration, that you can change to give your links a little more custom flair. You're probably used to seeing links that are blue and underlined, right? Well, that's not the way it has to be!
  10. Instructions
  11. In the stylesheet.css tab, give your a selector a color of #cc0000 and a text-decoration of none. Check out how the link changes in the Result tab!
  14. <div class="md-section-divider"></div>

/Add your CSS below!/
a{
color :#cc0000;
text-decoration:none;
}

  4. <div class="md-section-divider"></div>
  6. ##Many selectors, many properties
  7. All right! Our HTML bone is connected to our CSS bone.
  9. Next: let's review selectors, properties, and values. Remember, the syntax is
  11. selector {
  12.     property: value;
  13. }
  14. Instructions
  15. Add a pair of <h1></h1> tags inside the body of our HTML page. Your h1 header can say anything you want! Then, on the CSS tab, make its font-family to Verdana and its color to #576D94.
  16. Add a pair of <p></p> tags below your h1 header. Put any text you like in there, then head over to the CSS tab and set the font-size to 18px and its color to #4A4943.
  17. Make sure to end each CSS declaration with a semicolon, like this:
  19. h1 {
  20.   font-family: Verdana;
  21.   color: #576D94;
  22. }
  25. <div class="md-section-divider"></div>

h1{
font-family:Verdana;
color:#576D94;
}

p{
font-size:18px;
color:#4A4943;
}

  4. <div class="md-section-divider"></div>
  6. ##Size and borders
  7. Excellent! Your page is a little bland, though. Let's add a picture with a border.
  9. Instructions
  10. Add an <img> to your HTML document. Its src attribute can point anywhere! (Check the Hint if you're stuck or need a picture.)
  11. On the CSS tab, set your image's height to 100px and width to 300px.
  12. On the CSS tab, give your image a border of 1px solid #4682b4.
  16. <div class="md-section-divider"></div>

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;
}

  3. <div class="md-section-divider"></div>
  5. ##Links and text decoration
  6. Great work! We're almost there.
  8. Instructions
  9. Add a link to your HTML page using <a href="url">Link text</a> tags (check the Hint if you need a reminder). You can link to any webpage.
  10. On the CSS tab, change your link's text-decoration to none and its color to #cc0000.
  11. You're done! Revel in the glory of your newfound CSS knowledge for a moment, then head on to the project.
  14. <div class="md-section-divider"></div>

a{
text-decoration:none;
color:#cc0000;

}

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;
}

```

##What you'll be building
You've probably seen all kinds of nifty-looking buttons on your favorite websites that link you to different webpages. In this project, we'll show you how to make your own!

We've included sample images and text here, but feel free to substitute your own in the next exercises.

Instructions
Check out the HTML and CSS we've used, and have a look at the button on the Result tab. Hit Save & Submit Code when you're ready to start building your button!

Q&A 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  5.         <title>About Me</title>
  6.     </head>
  7.     <body>
  8.         <img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
  9.         <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
  10.         <div>
  11.             <a href="https://www.facebook.com/codecademy">Friend us on <span>Facebook!</span></a>
  12.         </div>
  13.     </body>
  14. </html>
  17. <div class="md-section-divider"></div>

制作自己的按钮！

Drawing your button

Let's get started! First things first: we'll need to create our button. We'll do this with

tags.

Please note: If you have adjusted your browser's zoom, tests involving height and width will not work correctly. To remedy this, please type Command+0 or Ctrl+0 to reset your view.

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

height: 50px
width: 120px
border-color: #6495ED
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.)

  1. div{
  2.     height:50px;
  3.     width:120px;
  4.     border-color:#6495ED;
  5.     background-color:#BCD2EE;
  6.     border-style:3px solid #BCD800;
  7. }
  10. img {
  11.     display: block;
  12.     height: 100px;
  13.     width: 300px;
  14.     margin: auto;
  15. }
  17. p {
  18.     text-align: center;
  19.     font-family: Garamond, serif;
  20.     font-size: 18px;
  21. }
  24. /*Start adding your CSS below!*/
  30. <div class="md-section-divider"></div>

Shaping your button

This involves a new property called border-radius. (We'll learn more about it in later courses and projects.) This property modifies the corners of HTML objects; it's how you get those cool rounded buttons!

Instructions
Set your div's border-radius to 5px.

Positioning your button

Nice work! Now we'll work on centering your button on the page.

We'll go over positioning in the next course or two, but we think it's a good idea to give you a preview here. Here's how it works:

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.
text-align: center; is how you center text elements.
Instructions
On the CSS tab, set your div's margin to auto and its text-align property to center.

  1. div{
  2.     height:50px;
  3.     width:120px;
  4.     border-color:#6495ED;
  5.     background-color:#BCD2EE;
  6.     border-style:3px solid #946776;
  7.     border-radius:5px;
  8.     margin:auto;
  9.     text-align:center;
  10. }
  13. <div class="md-section-divider"></div>

Great! Now we want to add a link with text to our button.

In our example back in the first exercise, you may have noticed that we used tags to create a different font color for "Facebook!", like so:

Friend us on Facebook!
You can do this too, if you like, but it's not required.

Instructions
On the HTML tab:

Add a link (using tags) between your

tags. You can set its href attribute to go to any website, and you can make the link text itself say whatever you want!

On the CSS tab:

Set your link's text-decoration to none. Give it whatever color or font-family you like!

  1. a{
  2.     text-decoration:none;
  3.     color:#946777;
  4.     font-family:Garamond;}

It's alive!

Great work! In just a few short steps, you've made a functioning button that will send your website's visitors wherever you'd like them to go.

Feel free to go ahead and play with the settings on your button, such as changing its colors, the font size, or the border-radius value.

Instructions
Click on your button to have it take you wherever your heart desires! (Or, at least, wherever your href attribute goes.) Then hit Save & Submit Code to finish this course move on to more CSS lessons.

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注