Styling Web Pages

The start of every webpage is good structure, or good HTML. This is how we mark up or label our content, so we know whether it's headings or paragraphs, and we insert things like images and breaks, and this is the basis of every webpage. But the next step is to style it.

Based on this markup, we might want to change the default styling of things like our heading 1s and our heading 2s, which are our subheadings, and the paragraphs, and there could be anything that we want to change, from the color, to the font, to the space between things, to the width of the page; for example, this page gets really wide and doesn't look very good. There's all sorts of things we want to style and change the default look of. We always choose the markup based on what it says about the content, so we're properly labeling or marking up our content not based on how it looks, because we know that we can change how things look.

We're not stuck with the default appearance. And so we're going to see how we can style it using CSS, which is a companion language that goes hand-in-hand with HTML. It works on top of HTML to go in there and say how things are supposed to look.

There are a couple ways we can put CSS into our page, and to make things simple, to start we're going to embed it into the webpage. It's going to be here in the head section, because we're not going to see the direct output per se—we're not creating content; that all goes in the body—but we're creating something for the page to think about. What goes on in the head of the webpage is where it thinks; it's like the brain of the page.

It's going to think about these styles, it's going to know them, so that later when it encounters an actual heading, it says, oh I remember how you want the headings to look and I'll make them look the way you want them to. So up in the head section here, I'm going to create a style tag. So close that style tag, and that creates the opening and closing of the style tag, and technically that is HTML, but what goes inside of that is no longer going to be HTML.

Now that we're in a style tag, inside of the style tag, we're not going to put HTML; we're going to put CSS. That is going to refer to our HTML elements, but the difference is we're going to say how they should be styled. We're not going to be creating headings; we're not going to be creating paragraphs.

We're going to be saying, this is how a heading should look. This is how a paragraph should look. If I want to style how heading 1s look, this is a tag to create a heading 1. The name of the tag is h1, but the less-than/greater-than bracket actually creates it in the body tag.

I'm going to use the same name up here, h1, and I'm going to put in curly braces. I type in one curly brace to open it and it puts the closing, and then I hit Return, and these closing braces are going to contain all the settings for how my heading 1s should look. And I could set a color.

So let's say, for example, I type in color: red;. The syntax here is kind of like attributes in HTML but slightly different. Normally in an HTML attribute, you've got the name of the attribute equals some value in quotes.

Well, we're not using equals; we're using a colon instead. And we're not wrapping it in quotes to indicate the start and end; we're ending with a semicolon.

So it's kind of similar. It's a property and then the value for that. We're saying this should all be red text.

So I'm going to save that, come back to my browser, hit refresh, and there my heading is now red. Of course I can change it. If I have some base color here, once I have the color I can hover over this little icon here and I could choose a new color.

And there are different ways that you can write that color. If you click on this top part here, you can switch between the way that it's coding it. And there are different ways that they can be coded.

We're going to start with this hex value. So these hex values are different ways to encode the colors. Don't worry about having to understand the hex codes.

You don't actually have to understand those. They are just a code equivalent of the red, green, and blue amounts. But you can either mix them up here in Visual Studio Code if you want to.

That's one way you could do it. Or the other thing is if you're using a design app like an Adobe app or Figma, a lot of people will use Figma to do their web design. In Figma you could be designing something and it will give you the hex code there.

You can also go to Google and look up color picker. And there's a color picker built right into Google. Right here it is.

And you can mix up colors here as well. And once you get the color that you like, there is the hex code right there. That's the code equivalent of that.

And you can copy it and come here and paste it. If it does not automatically put the hash sign, you do always want to start these hex codes with a hash. And this will be either three or six characters long.

They can be a combination of 0 through 9—numbers—and then A, B, C, D, E, and F. They don't go above F. But again, you don't really have to know by looking at that and saying, oh I know that's purple. You just use a design app or some sort of color picker and copy that hex code.

A lot of brands will say, oh this is our hex code that we want you to use. And you can copy and paste that in. Or you can use whatever design app.

Or you can also mix them up right here and use your little color picker. Choose the color you want.

And there you've got the hex code. Save it. Come back to the browser.

Refresh. And there you've got that color. We have a variety of different properties that we can do in CSS.

I can also change the font size. So anything that is the default—when you put in a property, you override the default.

For example, prior to this the color was black. By overriding it, I'm saying no, I don't want the color black; I want it to be this blue.

It has a default size. It has a default font. Any of those things I can override.

I can say, yeah I want to change the font size. And once it's chosen here, I can hit TAB to accept it. Then I can type in, let's say, 35 pixels.

Save that. Hit refresh. Notice it gets a little bit bigger.

If I do 55 pixels, it's going to get a lot bigger. But also, if you want your headings to be small, you can say it's only going to be 15 pixels, which would be quite small.

It's actually going to be smaller than the normal text. The point being that just because something has a default size or default color does not mean you're stuck with it. You can do anything that you want.

Now, for a main heading like this, of course I think it needs to be bigger because we want it to be big and prominent. I also want to set a font that's different.

This is the default font, which is Times New Roman. Later we'll learn how to do custom fonts, but for right now I'm going to stick to a font that we know everybody has on their computer.

So as I do font-family here, notice it gives some pre-made font lists. When we're using a font, fonts have to be rendered using an installed font on a computer somewhere. That means your phone, your Android device, your iOS device, your Mac, your PC—whatever computer you're on—to render text you need a font on that computer to render that.

In another exercise later, we'll learn how to load custom fonts. But right now we're just relying on common fonts that we think are installed on all these devices. And we can't be sure if those fonts are installed on those devices.

So let's say I just list Arial. Now I know there's some commas here, which I'll come back to in a moment. But let's just say I say Arial.

That's a common font. Everybody should, for the most part, have Arial, and now that will be in Arial, a different font.

There are two different categories of fonts here that we're talking about: Serif and Sans Serif. If you're not familiar with those, Serif versus Sans Serif.

If you have not seen these, let's look up an image here. Here you can see Serif typefaces will have these decorative serifs, and sans means without.

So without those serifs. Do you have the serifs or do you not have the serifs? Those are two main categories of typefaces, and so the default is Times New Roman, which is a Serif typeface.

And I just switched to Arial, which is a kind of Sans Serif typeface. Now it's possible that somebody might not have Arial. So what would happen if they don't have Arial? Well, I didn't specify a fallback font.

So you can put a list of fonts to say my first choice is Arial. If they don't have that, maybe Helvetica is another common font that some people have. Maybe a little less common, but some people have Helvetica.

But what if they don't even have either of those? Maybe I could go with a category of font—maybe Sans Serif as a category. I don't know exactly what that font would be.

It would be up to the browser to know what system fonts are available, and it could choose an appropriate Sans Serif. In fact, if you just say Sans Serif by itself, it would likely choose Arial or Helvetica as a first- or second-choice font.

But the idea here is that whatever fonts you're specifying, it will try your first choice if available; if that's not available, it'll try the second; if that's not available, it'll try the third.

So for example, there's a funny kind of looking font called Hobo—Hobo like the clown. It is a funky kind of typeface.

A very old typeface. Not a lot of people have it, but I just want to point out that I don't have that installed on my system, so I'm not seeing Hobo. So it's skipping Hobo and saying, let's go to Arial instead.

Now, if I did actually have Hobo installed, then it would be in Hobo. But not many people are going to see that. That is why, since we can't be sure what other people are going to have on their computers or devices, we go with a first-choice, second-choice, third-choice kind of pecking order.

But later on we will see that you can load custom fonts, where you actually load the font onto the devices for people. Now it'll take a little extra time to download those fonts behind the scenes, but then we can be assured that people should be able to have those fonts available, assuming that they get downloaded properly. All right, so now I want to also make my heading twos.

I want them to be the same font, maybe a different size. They should be a little smaller, right? Maybe I want them to be the same color, so I can actually copy all of these and paste them down here, and say they're the same color, but maybe they are smaller—so maybe they're only 25 pixels—but they're the same font size and color.

Save that and hit refresh. Or maybe I want them to be a different color, so I can come in here and choose a different color. Save that.

So I can have them be different colors. Notice when I say heading two, heading two affects all heading twos. This is redefining the defaults for, in this case, all the heading ones.

I only have one. All the heading twos, of which I have numerous, will all look the same way. So you can do this for each of the tags.

For example, I could also do this for paragraphs. I could say, for the paragraph tag, how do I want those to look? Maybe this time I want a different font—maybe Verdana, which is another kind of Sans Serif typeface.

And I'll say, as a fallback, in case they don't have Verdana, it'll be some sort of Sans Serif. You don't have to specify numerous fallbacks. You could just say, I want this font, and if not, this is the category of typeface.

Verdana will look a little different from something like Arial or Helvetica. It looks a little different. And if I actually put in Arial here, you can see.

So this is what Arial would look like. If I go back to Verdana—I'm going to copy this and paste this address here—this one will be loaded with Verdana, and this one I did not hit refresh. So this one is Arial, and this one is Verdana.

Looks pretty similar, but you can definitely see in the word “Redmond” it's a little different—just so you can see it as a different font. It's a little bit wider, so there's a bit of a difference there—just so you can see it is a different font.

Now, for the default font size of a paragraph, the default font size is 16 pixels. If I were to say 16 pixels, you're going to notice nothing changes. It looks exactly the same because it is the default.

So you don't really need to state the default, assuming you like it. You can just leave it off, because without it, it's 16 pixels; with it, it's 16 pixels.

If you want to change it from the default, then of course you'd want to specify that. If I want to make it smaller, down to 14, then things get a little smaller, of course. Or if I want to make it bigger, I could do that.

And lastly, one more setting here before you do your exercise. Let's say I want to increase the space between the lines. In print design, and in some design apps, they call it leading.

But leading was in the days of metal type. When we were printing things and now doing digital web stuff, we're talking about how tall the lines are—we're talking line height.

How tall are the lines? If my fonts are 14 pixels tall, I want my lines to be even taller because I want some extra space around them. So I'm going to make them 25 pixels. That increases the space, so now there's more space, because each line has a certain height to it.

The text sits vertically centered in that space. So you tell it how tall the lines are, and how big the text in each line is. So line height is the spacing between the lines.

All right, go ahead and do exercise 2a to get your start with CSS.