Hi, in today's lecture,
we're going to talk about styling your text on your webpages.
One of the best and easiest ways
to really make your page look a little bit different than the standard default is to
think about how you might wanna style your text to kind of bring maximum impact.
So many, many options and we're gonna talk about some of them today.
One of those options is to think about basically your font.
Some of the things you can style are the font family, the font style,
the font variant and the font size.
We can also think about styling the color and background of your font.
We can talk about alignment as well.
And finally, we're going to talk very briefly about line-height.
These are all four things that you can do to just really kind of highlight or
emphasize the different things you would like your style to bring about.
So first let's talk about font family.
Font families are just different types of text.
So if you've used Word before, you've gone in, you've gone to font family and
you can pick Arial or Wingdings or all these different types of fonts.
You can do the same things on your webpage.
So I've got a couple of examples up here for you of the more common.
You have Helvetica, Courier, Courier New, Comic Sans, cursive or Verdana.
I tried to put the font type here in the slide, but
it might be hard for you to see.
And I kind of did that on purpose, because what looks obvious to you when you're
designing doesn't always look obvious to the people who are looking at your page.
I also picked these particular ones cuz I wanted to show you
that some are a single word, such as Helvetica.
But Comic Sans MS is multiple words, so I had to put it inside quotes.
All right.
So how it works is, again, you use your syntax rule.
You have your selector, your property, and then your value.
So in this case I've said whenever you see an h1 heading,
don't use the browser default heading, instead I want you to use the Arial font.
So it changes the font slightly to look like this example here.
Now every single browser doesn't support everything.
We've seen this even with HTML 5.
Some browsers support some text, some don't.
In the same way some browsers support some fonts and others don't as well.
So what you can do is you can provide alternatives.
In this example, I've given the browser three different alternatives to use.
I'm basically saying,
whenever you come up to an h1 tag, I really want you to use the Courier font.
But if you don't have the Courier font, go ahead and use the Impact font.
If you don't have that one, go ahead and use Arial.
Now, one of questions you might ask yourself is,
what if it doesn't have any three of these fonts?
It doesn't have Courier, Impact, or Arial.
Well, if you remember,
when we first talked about cascading style sheets, we said if you give it a rule and
it can't support it, it will always go back to the browser default.
So you don't need to worry about font disappearing because
you gave it a bad font family.
It'll always come through.
So when you pick your font families,
there's a few things you should think about.
The first one is maybe the most important,
is some fonts are much more user friendly than others.
There are basically two categories.
You have serif fonts and sans-serif fonts.
The serif fonts are the ones that have the kind of the fancy edges along the side
that you used when you were learning calligraphy or different things like that.
The sans-serif fonts are very clean, there's no drop downs or
anything like that.
So when it comes time for someone to blow your page up,
kind of really go in and I'm trying to think of the right word,
when they wanna go in, and they wanna make it look bigger.
Serif fonts can really get messy, so avoid those whenever possible.
I personally don't use custom fonts myself, but
I've never been an artsy type of person.
So if you do decide that you wanna have your own font, or
some sort of special web-safe custom font,
you need to use something special here called a font-face rule.
And what we do, is you can see in the first example, you say, hey,
I'm gonna define my own font-face.
I'm gonna happen to call it mySpecialFont.
You can call it anything you want to call it, and then you need to give it a source.
So that source, this is a new one you haven't seen before.
We're not using href, we're not using source, we're using url.
And the url says this is where you can find the file
that defines my special font.
And once you do that, once you write the font face rule once,
throughout the rest of your style sheet you can go ahead and reference it.
So now every time I use an h1 font, you're gonna use mySpecialFont.
So now let's talk about font style.
It's a much fancier word than you might expect, but
we're simply talking about do you want your font to look normal,
which is the default, or do you want it to be italic?
Or do you want it to be oblique, which is basically just a special kind of italic.
So normal font will happen no matter what if it's just how it's going to be.
If someone else has written a style sheet and they've made it all italic, that's
when you might want to say, no, no, I'm going to overwrite it and make it normal.
Italic is always a certain kind of lean, basically, to your font.
An oblique is when you really want to be extra special and
define exactly what angle you want to have your text lean towards.
The font variant, we really only have two options here.
We have normal and we have small-caps.
People use this quite a bit when they're trying to do very consistent and
yet somewhat fancy look to it.
So here I've said again, always using h1, I want my font variant to be small-caps.
So now when you look at my text, my h1 text down at the bottom,
I've written Small caps variation.
But when the browser displays it, it's going to display it in small caps.
So this keeps you from having to go back and
forth to remembering to change all your text to uppercase or lowercase.
It doesn't matter how you write it, the browser will always show it in uppercase.
Now font size is something that we'll be talking about pretty much throughout this
entire course and in other courses we're going to be doing as well,
such as responsive design, because it's really a lot of different ways to do it.
So let's just start with the most basic.
Your options are, you can use font size equals extra-extra-small,
extra-small, small, and smaller.
I don't really like those very much,
because it doesn't really give me a frame of reference.
You can have medium, you can have large, extra-large, xx-large, and larger.
Very few people use these options, but they're out there so
I wanted to tell you what they were.
Instead, what many people use is they use pixels.
So, I'm gonna include on the website this nice kind of table for
you that relates how many pixels to an inch, how many pixels to picos, so
you can get a feel for it.
But most people do something along the lines of 20 pixels, 35 pixels, 80 pixels.
And this is a very consistent look and
it's something that people can kind of feel what it should look like.
However, I tend to use percentages instead.
Percentages are going to allow us to change the font size as we resize
the screen much more easily.
So if you were to say use 100% it's going to be the default size.
If you say use 110% it will be slightly larger.
If you were to use 75%, it'd be three-quarters the size.
Next, let's talk about color and background color.
The color attribute is the color of the foreground, which is the fancy word for
just the text itself.
All right.
The background-color is the color of the background behind the font that
we're looking at.
And depending on what kind of text you're styling, it can look very different.
So, here I've done one rule, and you haven't seen this before.
I'm going to go ahead and style two different selectors.
I'm going to style h1 and span.
So if you put a comma right there, I've got it right here,
between the h1 and the span, you can put as many commas as you want, and
write as many selectors as you want.
In this case I've said, hey, I want my color to be blue,
and I want my background color to be gray.
And if you're not sure where these strange numbers came from,
go watch the colors video.
It'll explain everything for you there.
So now I've gone in, and in my HTML, I have colors in an h1 tag,
and I have the word inline inside a span tag.
And what I want you to notice is that for the h1,
the block element, the background color covers the whole width of the page.
But for span, for inline elements,
the background color only goes around just the element and the text itself.
Next let's talk about aligning text.
Aligning text is simple.
It's probably one of the easiest things you can do in HTML.
And you're gonna be really happy.
Because later when you decide you want to align other things, it's so hard and
you're just gonna want to put everything in text.
So your options are when you use text align you can use left,
which means just align the text to the left.
That's what we do already.
You can have right, which means align everything to the right, center, and
justify.
Center everything as much as you, along the middle of that division.
Justify tries to spread it out to use as much space as possible.
So let me show you some examples cuz that's really the best way to understand
what's going on here.
Here I've got a left alignment.
Everything lines up along the left hand side of the screen.
The next one I've used text in line equals right.
And you can see that everything is lined up to to the right.
It looks really weird.
There's very few reasons you're gonna use this.
Unless you have something else kind of going along in the side
in the middle here.
The next one we're going to do is center.
People use center quite a bit.
They almost use it too much, but it is a nice way to kind of break up your text and
have it look a little bit different.
So justify is really hard to explain, and even when you first look at it,
you might not notice what's going on.
But with justify, the browser is putting in little bits of extra space
to kinda help you spread it out so it has the exact same width all the way along.
So I'm gonna show you the justified with the left.
And I think that's the best way to kinda see the difference,
is that you basically don't have the empty space here.
They've kinda spread it out over here, so no one place has too much blank space.
Next we're gonna talk about line height, and
line height is really different because it's not affecting the font itself.
It's not affecting your text.
It's affecting how much space is around your text.
Some of you may have used Word before, and
you can go and just how much space there is between the lines.
Maybe you want it to be one line, one and a half lines, double spaced.
That's what we're talking about here.
So my first example I said line-height equal 50%.
And the next one I said line-height equals 200%.
So, in the first rule, that's kind of a weird rule to write because I'm saying I
want things to overlap with each other.
In the second rule I'm saying I want you to really spread out far.
Oops, all right, I'm going to go ahead and put an example later online where I can
show you exactly how these things would look.
Or even better, I'm just going to turn this into a teachable moment and
have you go in there and type it yourself and
look at how these two different rules affect the text.
So let's review.
I know I went over a lot of things, and it can be overwhelming.
So one of the most important things is with everything we do in this course,
is take five, ten minutes, type some stuff in, take a look and see what happens.
Make as many mistakes as you can,
because this is the time to make mistakes, when you've got me and
the rest of the crowd here to answer the questions on the different boards.
Practice on toy problems.
Don't make a huge webpage and try to style it.
Create a page with three or four paragraphs, a couple links, and practice
on those, because it doesn't matter, you don't need to practice on a big page,
you can practice on the small problems and it really makes a big difference.
And finally, if you decide that you're ready to code and you are ready to do that
large project, make sure you design your larger projects on paper first.
I can't stress enough that if you start coding and styling without really having
a clear plan, you're just gonna get very frustrated and
hopefully, not hopefully, you'll get very frustrated and you'll quit.
And I don't want you to do that.
So plan all your projects on paper first.
If you follow these suggestions, if you practice, practice,
if you do toy problems, if before you jump into big problems you sketch it out first,
I think you're gonna have a lot of fun, and
you're gonna have a really great page that you're gonna be proud of.