Making your title flashier

Portfolio Building with Neocities Making your title flashier

HTML is the structure of your website, the floor plan if you will: it’s the content, the text, the things that go into the site.

Cascading Style Sheets—CSS—are a whole separate language for describing the formatting of webpages: this includes colors, font, sizes, placement, and so much else.

The first thing we’re going to do is change the title of our portfolio page to make it look a little nicer and pop more.

We’re going to

Draw a border around the title
Center the text of the title on the screen
Make the title stay at the top of the screen even when you scroll down
Change the color of both the text and the background of the title

Your CSS code is going to go into a different file on your site. In Neocities, the file is style.css by default, but you can change this in the HTML file itself.

Now you should open the style.css file in the dashboard of your site, and you’ll see some code that looks like

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

The part before the curly braces (the { and }) is the selector. You use the selector to pick out the parts of the HTML you’re going to change, in this case it’s saying “everything between the <body> and </body> should…”.

What comes after the should? That’s what’s described inside the curly braces. The code tells us that the background of the page should be white, the text color should be black, and the text should use a font called “Verdana”.

Right here is all the basics of CSS. You write a bunch of code of the form

selector {
  property: value;
  property: value;
  .
  .
  .
  property: value;
}

to change different HTML tags’ shape, color, &c. You do need both the : and the ; in those exact places for each thing you’re changing.

Much like HTML the basics are pretty simple but there’s a lot of depth to what you can do.

So, let’s start by modifying our title. Since our title is an h1 our selector is going to also be h1. Then we’re going to add properties to create a border on our site.

h1 {
  border-style: solid;
  border-width: 3px;
  border-radius: 4px;
  border-color: black;
}

Here’s a screenshot of my site after adding this code:

A screenshot of the website showing a border around the h1 element that’s thin, black, and rounded

We can talk through what these properties mean before we move on. First, we’re telling the browser that we want a solid line border around the title. We also want that solid line to be thin-ish, but still noticeable, and so we set the width to be three pixels (3px). We also want it slightly rounded on the edges and can do that by giving it a border-radius of four pixels (4px). Finally, we set the color of the border to black.

So a neat thing to notice here is that the title is bigger than just the size of the text in it. It actually goes all the way from one end of the screen to the other. Wouldn’t it look nicer if our text was actually centered in the space? That’s just another line of code:

h1 {
  border-style: solid;
  border-width: 3px;
  border-radius: 4px;
  border-color: black;
  text-align: center;
}

If you refresh your page, you should see that the text is now centered rather than on the left.

Now, since we’re putting some effort into this title bar it’d be nice if it didn’t scroll away as soon as we moved down to check out the projects.

To that ends, we’re going to add just two more lines to our CSS:

h1 {
  border-style: solid;
  border-width: 3px;
  border-radius: 4px;
  border-color: black;
  text-align: center;
  position: sticky;
  top: 0px;
}

Here we’re telling the browser that this title should “stick” where we put it and where we put it is at the top of the page. Like a lot of things in programming, we measure starting from the top as 0. So saying top: 0px is telling the browser that the top of the title should be “zero pixels” down from the top of the page, or in other words just the top of the page.

Once we’ve done that, we should be able to see that our title will stay at the top of the page in its normal position until we scroll down. Spoiler warning: there’s going to be something kind of weird here that we’ll want to fix!

A screenshot showing the title overlapping with another heading as we scroll down

So our scrolling works, but there’s still a big problem: out title is transparent! It’s just a solid black border around the text and it only looked like it had a white background because there wasn’t anything behind it.

In order to fix this, we’re going to specify background-color as another CSS property. In fact, we’re going to change the text color with the color property too.

h1 {
  border-style: solid;
  border-width: 3px;
  border-radius: 4px;
  border-color: black;
  text-align: center;
  position: sticky;
  top: 0px;
  color: white;
  background-color: black;
}

And finally we get something that looks like

Website with title bar solid black and title text solid white

And we can have our title properly scrolling down through the page.

At this point, we’ve seen how to do a lot of the basics of CSS. Most of what we’re doing from here are applications of these basic concepts.

The next thing we need to learn about, though, is color and that’s what the next section will be on.

Previous Lesson

Back to Course

Next Lesson