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 <h1>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.