Styling your first webpage with CSS
This article is part of a series:
- Your first webpage with HTML and Netlify
- Styling your first webpage with CSS (you are here)
If you’ve followed along, then you’ve created your very own webpage using HTML and put it on the web using Netlify. You probably noticed that it’s very plain-looking. That’s because we haven’t specified how anything should look. By default, the browser applies some basic styles—headings are big and bold, lists are indented, links are blue and underlined.
These default styles get the point across and make the site usable, but we could definitely make some improvements and use our own sense of style to add some personality. Design on the web is a big, wonderful world, with many resources to help yourself learn and improve. Here’s a great book on web design made for non-designers.
That said, for this article, we’re going to keep things simple and focus more on how to write CSS than how to create a great design. As you get better at HTML and CSS, you will be able to do more and you will need to follow design principles to keep your websites from becoming cluttered and chaotic. Fortunately, our site only has a little content.
As a reminder, here’s an example of the unstyled website we created in the last article.
If you want see what styles we’ll be adding to this page, check out the styled version of the website.
The <style> tag
CSS, or Cascading Style Sheets, is the language that we use to describe the appearance of our webpages. Any CSS styles that we add get applied to our webpage in addition to the basic styling that the web browser has already supplied.
Where do we write CSS? Well, remember that our
index.html document contains a
<head> section that has information about the page
that is invisible to the user.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My awesome website</title>
</head>
<body>
<h1>My awesome website</h1>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
<p>My name is Blake. I enjoy making websites and writing articles. I think everybody should have a personal homepage.</p>
<h2>Favorite board games</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Monopoly</li>
</ul>
<h2>Favorite TV shows</h2>
<ul>
<li>Stranger Things</li>
<li>Cheers</li>
<li>Game of Thrones</li>
</ul>
</body>
</html>
We can add a <style> tag inside the
<head> tag that will contain all of our CSS code.
<head>
<meta charset="UTF-8">
<title>My awesome website</title>
<style>
...CSS code goes here...
</style>
</head>
Great, let’s write our first CSS rule.
<style>
body {
font-family: "Gill Sans", sans-serif;
}
</style>
This rule changes the font of everything inside the
<body> tag to Gill Sans, if available on the user’s
device. If not, it tells the browser to use a default sans-serif font.
1
Save the file and open it up in a web browser (File > Open File…).
Anatomy of a CSS rule
Let’s look a little more closely at what we did in that example.
Here’s the code again (from now on I’m omitting the
<style> tag in these samples, but that is where the
CSS code lives for now).
body {
font-family: "Gill Sans", sans-serif;
}
That first bit, body, is called a selector. You
might say it selects the parts of your page you wish to
style.
The line inside the braces ({}) is a
property and value. The property in this example is
font-family, which controls what font you want to use.
The value is "Gill Sans", sans-serif, which tells the
browser, “I would like to use Gill Sans but if the user doesn’t have
it, use any sans-serif you have.” Note that a ; goes at
the end of the property/value line.
You can add multiple properties to a rule. For example, let’s make the width of our page more narrow so that users with wide screens don’t have to follow the text all the way across the screen.
body {
max-width: 500px;
font-family: "Gill Sans", sans-serif;
}
We just set the max-width property of the
body to be 500px. That means the width of
our page will never exceed 500 pixels in width. Any text that would go
beyond that width will instead be wrapped around to the next line.
It doesn’t really matter what order the properties go in, but I have my own preferences I tend to follow. The important thing is that, whatever ordering scheme you decide on, you be consistent.
As you can probably imagine, there are quite a few properties that you can use. In time, you will begin to remember the common ones offhand. But if you aren’t sure what property you need or you just want to see what’s available, check out the MDN CSS Reference (it’s a long list, but remember that you only need a handful for now—there’s no need to memorize this list.
Adding more styles to the page
Let’s look at our styling progress up to now.
So far, so good. But we should probably make the page a bit more centered so that people with wide screens don’t have to stare off to the left side so much.
We’re going to use the margin property, which controls
the space around an element. Specifically, we’re using
maring-left and margin-right, like this:
body {
margin-left: auto;
margin-right: auto;
max-width: 500px;
font-family: "Gill Sans", sans-serif;
}
We could have specified a pixel value here, but by using the
auto keyword, we’re telling the browser that we want an
even amount of margin to the left and right of the page. The result is
that the page is centered in the browser window.
Okay, cool. Let’s try changing some colors.
body {
margin-left: auto;
margin-right: auto;
max-width: 500px;
font-family: "Gill Sans", sans-serif;
background-color: antiquewhite;
color: saddlebrown;
}
That will give us:
Woo hoo, colors! We’re setting the
background-color property, which defines the color of
empty space, the background of the page. We’re also setting
color, which controls the color of text on the page.
There are different ways to reference colors in CSS. We’re using color keywords for ease of use. You can see the whole list of available color keywords, as well as other ways to represent colors, on this MDN CSS color reference.
We’re not going to win any design awards for the color choices here, but it’s my webpage and I can do what I want. 2
Styling links
By default, links are blue. But that isn’t sitting well with with the warm colors we chose. Let’s change it to something warmer.
a {
color: firebrick;
}
We’re creating a new rule. We want to target all of the
<a> elements on the page. We can do that by using
a as the selector. Remember that
color controls the text color. We’ll make it a reddish
color.
For fun, let’s make it so that the color of the link changes when you hover the mouse over it. We’ll need a new rule for this, with a slightly different selector. We don’t want to target every link, only the one the mouse is being hovered over. CSS has a special syntax for selecting elements that are in a certain state, like being hovered over.
a:hover {
color: crimson;
}
This selector says, if a link is in the hover state, apply this rule. In this example, we’re just changing the text color.
Meaning vs. appearance
Let’s make our navigation links sit horizontally in a row rather than stacked in a bulleted list. Remember, our list of links looks like this:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
You might think, “Well if I don’t want a bulleted list, I’ll just change the HTML.” But in this case, we aren’t changing the meaning of the menu—it is still a list of links. It’s just that we’re changing the way it looks by tweaking the layout and removing the bullets.
So we’ll keep the HTML the way it is. But we’ll add some CSS to change the appearance.
ul {
padding-left: 0;
list-style: none;
}
First, we’ll target the list as a whole. We’ll set
padding-left to 0 to remove the indentation
(padding is similar to margin, but we’ll discuss the difference
later). You can use list-style to change the bullet type,
but we’re setting it to none so that the bullets are
removed altogether.
Next, we’ll target the individual list items, or
<li> elements.
li {
display: inline-block;
margin-right: 15px;
}
Setting the display property to
inline-block will cause the list items to sit next to
each other in a row. We’ll add a little margin-right to
the list items so that they are spaced apart nicely.
But notice, there’s a problem:
By attempting to style our menu list, we inadvertently styled all of our lists. We don’t want that. But how do we target only the menu list? We can give it a name.
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
We can give any element the class attribute to give it
one or more names (separated by spaces) that we can use in our CSS.
Let’s adjust our CSS to use the new name.
.menu {
padding-left: 0;
list-style: none;
}
We changed the ul selector to .menu. When
using class names in CSS, we start them with a dot.
We can use this same name to target our list items.
.menu li {
display: inline-block;
margin-right: 15px;
}
This selector is saying, “target all list items that are inside an element with the class name of menu.”
Now that both of our rules are specifically targeting the
menu class name, our regular lists have reverted back to
their original look.
Styling the site header
Let’s do something fun with the site header. Hopefully you are starting to get the idea of how these CSS rules work—first you specify a selector, then a list of properties you want to change. This article is already getting long, so I’ll just drop in the code rather than describe each property. I encourage you to play around with the values to see how they work.
h1 {
margin-top: 0;
padding: 10px;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
background-color: saddlebrown;
color: antiquewhite;
}
This code produces the following look.
One thing I want to point out—this rule demonstrates the difference
between padding and margin. I gave <h1> some
padding to provide some space within its box, to give the text a
little padding between it and the edge of the box. On the
other hand, margin controls the space around the outside of
the box.
I really want the <h1> to touch the top of the
viewport, but, by default, there’s a little margin all around the
<body>. We’ll go back and modify our body rule to
get rid of the top margin.
body {
margin-top: 0;
margin-left: auto;
margin-right: auto;
max-width: 500px;
font-family: "Gill Sans", sans-serif;
background-color: antiquewhite;
color: saddlebrown;
}
There we go. Our homepage is looking good.
Reusing CSS across different pages
We would like to apply all of the styles we wrote for the homepage to
our journal page. One way to do that is to copy and paste our
<style> tag and all its contents to
journal.html. That would work, but what if we decide to
make a change, such as choosing a different color for links? We would
probably want to change the link color on both the homepage
and the journal. That means editing two different files.
Making changes would become more and more difficult for each
additional page we add to our site.
Fortunately, there’s a better way. We’ll use an external style sheet.
We’ll take all of our CSS out of index.html and put it
into a separate file. Then we’ll make both the homepage and journal
reference that file.
First create a separate file and name it style.css (you
can name it whatever you like so long as it ends in
.css). Then copy everything between the
<style> and </style> tags (but
not the tags themselves) and paste it into your new CSS file.
Next, edit index.html by adding a
<link> tag to the <head>:
<head>
<meta charset="UTF-8">
<title>My awesome website</title>
<link rel="stylesheet" href="style.css">
</head>
This bit of code links your HTML file with your CSS file. Now
index.html knows that you have CSS rules that it should
use in style.css.
Go ahead and make the same change to journal.html. Once
you do, the journal page should be receiving all of your custom
styles.
Styling articles
Let’s spruce up our blog article by making it appear on a white card.
Add this rule to style.css:
article {
padding: 20px;
background: #fff;
}
That’s nice. But why is there so much space above the heading? It’s
because the <h2> has top margin by default. But we
can remove it.
article h2 {
margin-top: 0;
}
This rule is targeting every <h2> that appears
inside an <article> and removing its top margin.
That’s looking better.
Let’s update our journal by adding another article. It should automatically receive the correct styles so long as we use the same HTML structure.
Blog articles usually appear with the newest ones first, so let’s add another article right above the first one.
<article>
<h2>My second entry</h2>
<time datetime="2020-01-12">January 12, 2020</time>
<p>I added some CSS to my website. It’s very stylish.</p>
</article>
It received the styles but something isn’t right—the cards are touching, causing them to appear like one giant card.
Not to worry, we can add some bottom margin to each article. Adjust
the article rule like so:
article {
margin-bottom: 20px;
padding: 20px;
background: #fff;
}
Which produces:
Much better. One last issue. Our menu appears to have lost its
horizontal styling. That’s because we need to add the
menu class name to our menu list. Make the following
adjustment in journal.html.
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
Looks great! You can check out the final journal page here.
Publishing your changes
Head back into your Netlify dashboard and go to the Deploys tab. At the bottom of the page you will see a box where you can drag and drop your website folder (just make sure you’ve saved all the files).
That’s it! Your website should have been updated to reflect the latest changes.
Conclusion and bonus challenge
If you have followed all the way through, you deserve a cookie and a pat on the back! You not only created your own website from scratch using HTML, you also made it look stylish by using CSS.
If you are thirsty for more, here’s a challenge for you. Adjust your menu so that the current page is in bold and not linked (hint: you could use a special class name).
- Most web browser’s default to Times New Roman, which is a serif font. There’s nothing wrong with Times New Roman, necessarily, but many webpage authors will change it just because it is the default font. If you want to go down the rabbit hole of the art and science of typography — which I totally recommend you do — check out Butterick’s Practical Typography. ↩
- That said, if you want people to actually be able to read your webpage, you want to choose background and foreground colors that contrast well. You can use this color contrast checker to make sure your text is easy to see. ↩