My code's not working!

×

  1. Double check all your files are saved.
  2. Check each quote has a pair.
  3. Do all of your HTML tags have a closing tag?
  4. Ask a mentor for help!

Add Some CSS

Alright! So we’ve got all of our content on our page, but it looks kind of plain. This is where CSS comes in. CSS lets us completely customize the look and feel of our webpages.

The first step to styling our webpage is linking styles.css and profile.html page together. To do this we use a <link> tag. You probably remember from this morning that we include stylesheets in the <head> of our HTML document.

Right now the head of our HTML document looks like this:

  <head>
    <link rel="stylesheet" href="assets/basic-layout.css">
    <title>Profile Page</title>
  </head>

Let’s add another <link> tag below the one that’s already been included.

  <link rel="stylesheet" href="styles.css">

🎉 Woo! Now we’re ready to start writing some CSS.

Open up styles.css.

Let’s add a background color to our header.

  header {
    background-color: #82bef5;
  }

Save and refresh your page.

You should see something like:

header_step_three

Now, let’s change the font color to white. Add color: white to the CSS code block you just wrote:

  header {
    background-color: #82ebf5;
    color: white;
  }

Note: Even though we all know the correct way to spell colour is with a ‘u’, CSS won’t work unless we spell it color, like the Americans do. ¯\_(ツ)_/¯

header_step_four

Looking better!

Hmm… wouldn’t it be awesome if our text was centered in our header tag?

Let’s use a CSS class to center our name and address in the header.

Let’s start by adding a class name to our <header> tag. A class is a type of HTML attribute, remember that we add attributes to opening HTML tags. Add the class center to the <header> tag.

  <header class="center">
    <h1>Larry Ducksworth</h1>
    <p>312 Farmhouse Lane, Quacksville, Newfoundland, A1B 2C3</p>
  </header>

Now, let’s style the center class in our styles.css file.

  .center {
    text-align: center;
  }

header_step_five

Woo! Up next we’ll add an awesome image.