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:
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. ¯\_(ツ)_/¯
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;
}Woo! Up next we’ll add an awesome image.