How-To Project Part 3

In Part 1 we set up our project.

In Part 2 we created the structure of our project with HTML.

In Part 3 we will add the CSS to our project.

In Part 4 we will get our project online.

I used this website to get my color scheme.

We don’t have enough tools yet to do a lot. We can’t center everything, though you can use text-align: center to move text to the center. That’s not necessarily what you want because if you can’t center an image yet, then it’s not that nice looking.

I did slip in one thing to my code, padding. I added padding around my links to create boxes to be buttons for the links. I removed the automatic link underlining by using text-decoration: none.

What to look for when things don’t work:

  • Did you select the right thing? Your selector is the HTML tag, the .class, or the #id. Try something like background-color: red to see if you selected the right thing.
  • Did you select the right file? If nothing works no matter what you do, make sure you are selecting your CSS file in your link in the HTML. We checked that in the first lesson by using * {background-color: red} to make sure we were getting to the file.
  • Did you type correctly? Check for typos, and especially for punctuation errors. Classes take a period. IDs take a pound sign. HTML tags take nothing. Properties are separated by a semi-colon and are enclosed in brackets.
  • Don’t just delete! Don’t assume you don’t have it right. Look for a little error.

Here’s my code.

* {
background-color: #ed8a63;
}

h1 {
font-size: 2.5rem;
color: #3a4660;
font-weight: 600;
}

h2 {
font-size: 2rem;
color: #845007;
}

h3 {
font-size: 1.5rem;
color: #3a4660;
}

a {
background-color: #3a4660;
color: #c9af98;
text-decoration: none;
padding: 20px;
}

You can see the video lesson.