Although there is simply no way to show everything that CSS
is capable of in a single chapter, I do want to give you an idea of some of
the options that you have when styling elements on your page.
We're going to start by exploring some of
the things you can control around typography.
So I have the type.htm file open from the 07_04.
And just to give you an idea of what's going on,
on this page, we have a heading one at the top, we have a couple of paragraphs.
They go on to describe some of the aspects of how HTML and CSS work together.
So I advise you to kind of read through that text, because I tried to go a little
bit more in depth with some of the exercise files in terms of the text of it.
So read through them, there's some good stuff in there.
Okay, so above that,
and ahead of our document, we can see that we already have a style element.
We see that we have a single rule set on the body element.
That's setting the width of the body to 70% and a margin to 0 and
auto, which is kind of a weird selector.
So what's that doing for us?
Well, if I go out to my browser you can see that,
that is essentially centering the page.
So that 70% is saying, hey,
all the visual content should be 70% of the available browser size.
So if I resize the browser, it's always going to stay right at 70%, which is nice.
Now the thing that the margin is doing for us, is it's centering the page.
Because, so what we got here is what we call shorthand notation.
When we set a margin, we set margins all the way around the sides of an element.
Top, right, bottom, and left.
So for this margin, we're saying 0 for the first value, which gives us top and
bottom, and then auto for left and right.
So you just kind of have to know that shorthand syntax.
So auto for left and right says hey, the width is 70%,
whatever's leftover, put half of that on the left,
half of that on the right, then you get a centered element.
So that's exactly what's going on there.
Let's focus on typography.
I'm going to go down to the next line and
create a brand new rule for the h1, for my heading one.
All right, now again.
I really like to go ahead and open and close those curly braces at
the very beginning because I know that I've got an opening and closing one and,
and it's very easy to forget to close that bracket.
So we're concentrating on type.
So the first property we're going to set is font-family, font family.
Now when you're passing in a font family, you can ask for a specific type face.
In this case, I'm going to ask for Georgia.
Now Georgia is what we call a system font,
meaning it's installed on almost every computer out there when it ships.
That way, I know that the end user that's looking at
this page is probably going to have that font.
You see, when we deal with HTML and CSS, we can't install a font for somebody.
So basically, we have to rely on the font that's on the client machines to
display within the page.
Now recently, with the advent of web fonts and services like Typekit, that's changed.
But for the most part, unless you're going to be using a service like
Google Fonts, or Adobe's Edge Fonts or Typekit.
You're probably still going to need to use these types of system fonts.
All right, now, one of the things that came in to play as system fonts were
being used is the fact that maybe somebody doesn't have Georgia installed,
what happens then?
Well, if you don't specify what we call a fallback what
happens is the default font for that user agent displays.
And Georgia is a serif font,
meaning it looks more like Times New Roman, it has serifs on the end of it.
What if the default font for that user agent was a Sans Serif Font?
It would look weird and unintended.
So, you can describe fallback fonts.
In this case, in quotation marks, I'm going to do Times New Roman.
The quotation marks are necessary because this font has more than one name.
If it's just one name, you don't need the quotation marks.
But the quotation marks group this font together in one name.
So, basically what we're saying here is,
if you don't have Georgia, give me Times New Roman.
And then finally, I'm going to do another cursor and
then I'm just going to type in serif.
And those are your sort of fallback families.
I'm basically saying that, hey, in case you don't have Georgia or
Times New Roman, just give me whatever serif you have available.
And that way at least I get the style of font that I'm looking for.
Okay, on the next line, I'm going to do a font-size and
I'm going to change the font-size to 2ems.
Now font-size of course is how big this is, and
I'm doing 2 E-M which stands for em.
Now, you could do pixels here if you want, there's nothing wrong with that.
You can do 32 pixels.
But 2ems is a little bit more flexible.
This is what we call a relative unit of measurement.
What this is doing, is I'm basically saying to the user agent,
hey, whatever your default font-size is, give me twice that.
So two times what your default is.
This is very handy for
the world we live in now where we have a lot of different devices.
So if somebody is on the phone, 16 pixel text actually looks pretty big,
whereas on a desktop screen, 16 pixels is pretty small.
And that way, I get to size this text relative to
the device somebody's reading it on, and it's a nice way to do things.
Couple of other things we're going to do here is font-weight and
I'm going to set that to normal.
By default, the headings are bold.
So by doing this I'm saying I don't want this heading to be bold.
And then finally we're also going to do font-style, and for
font style, I'm going to do italic.
Now, you can see here,
we've done font family, font size, font weight, font style.
There are a lot of different properties.
These are certainly not even all of them,
that we can use when we're controlling typography.
So as you can see, learning CSS is a lot about learning properties and
which values are available.
So, for font style for example, I could do italic or I could do normal.
For font weight, I could do bold or I could do normal.
That's the equivalent of using the bold or the italics tag in HTML.
It allows me to have a little bit more control over that without having to
use those elements.
All right, if I save that and go into the browser,
you can see the heading is doing exactly what I wanted it to do now.
It's Georgia, it is italicized and it's not bold, and it's a little big but
it's not as big as it was before.
I'm setting a relationship to, to body count.
If I go back into my CSS,
I want to create a new rule that is going to control the paragraphs.
I'm going to scroll down a little bit, to get myself a little bit more room.
So you guys can see what I'm doing here.
And by the way, you can see, I'm having trouble getting it to line these rules up.
If your code editor is doing what I'm doing, it's a little wonky here,
don't worry about it, it doesn't matter.
These styles could all be on the same line and it would still render properly.
Okay so, for my paragraph, I'm going to do font family again.
And this time, I'm going to change it to Arial,Helvetica,sans-serif.
And I'm going to use my code ending to help me out.
All right, so for font family, this time I'm going to do Arial,
Helvetica, sans-serif, which is a totally different font.
Now, look what I forgot to do, do you see it?
I forgot to do my closing curly brace.
See how easy that is to do?
So always remember to do your closing curly brace.
I certainly forgot mine.
Okay, after that I'm going to do font-size, and
I'll set the font-size to 1em.
I'm going to do line-height.
Line-height is the space between the individual lines of the paragraph, and
I'm going to set that to 1.6 so it's going to increase the space.
You could think of that as like single spacing, double spacing,
that sort of thing.
So line-height, 1.6.
And then finally text-align, I'm going to set that to justify, and
that is going to set how the edge of the paragraph should be aligned.
So left align, right align, centered.
In this case I'm doing justify.
All right.
I'm going to go and save that, go back to the browser.
And you can see, we're getting exactly what we want.
We're getting a little bit more spacing between the lines.
We're increasing that using the line height.
I'm using a different font for
Arial and you can see what the justify text alignment does for us.
Now we can also, in addition to controlling things like family size,
line height, things like that.
We can control the spacing between elements too.
And even though this is seen as a typographic style, we're going to use
a property that's really what they call a box model property.
And that would be margins to control the spacing of our elements.
So what I'm going to do is go up to my h1 selector.
And I'm going to change its margin to 1em, space 0, space .4ems.
So again, we're using shorthand notation here.
When margins are set, they're done in sort of a clockwise fashion, from the top.
So it goes top, right, bottom and left.
When we use three values like this, we're saying for the top, I want 1em, for
the left and right, I want 0 and for the bottom, I want .4ems.
So again, it's just understanding how this shorthand annotation works.
Then I'm going to get down to my paragraphs and
I'm going to change a few other things here.
I'm going to set the width of the paragraph to 60%.
I'm going to set its initial margin to 0, and look at that, I forgot my semicolon.
Syntaxual rules are there for a reason and
one of the nice things that this particular code-editor's doing for
me is if I break one of those rules, you can see that the code coloring changes.
So, it's a nice visual indicator for me that hey, you just made a mistake.
So it's very common to do.
When something like that happens just go up there, put the semicolon in and
you're fine.
So for margin, I'm going to type in 0 for the initial margin but
then I'm going to go underneath that and type in margin-bottom and
I'm going to set that to 1em.
So what I'm doing basically is setting zero all the way around and
then just 1em for the bottom.
Now when I say this and go back up,
now you'll notice that my paragraphs are 60% of the available space.
The spacing between them is now being controlled with their bottom margin.
And, I've also controlled the spacing between my heading and my paragraph too.
So, I'm just sort of making everything look a little bit more harmonious,
using these styles.
And you can see the level of control you have over these elements is
actually quite good.
Now one last thing.
What if we wanted all of our text in the page to be Arial, Helvetica, and
Sans Serif except for the heading one, and we wanted that to be Georgia?
Well now, using the strategy that we've got here,
I would have to set that on all those other elements individually.
So what if we had tables?
What if we had lists?
What if we had block quotes?
I would need to set the same font family property in all of them.
I'd rather not do that.
I like taking care of things globally.
So the last thing we're going to do, is we're going to move this information up to
the body so that it's a global style applied to all elements.
So up in body, I'm going to do one last rule, and
I'm going to do font and just font.
So the same way that we can do shorthand notation for
things like margins, we can do shorthand notation for fonts.
And for fonts I'm going to say 100% and then I'm going to say Arial,
Helvetica and then sans-serif.
And if I was smart, I would have copied it from down here.
Now, 100% is essentially saying the same thing as 1em.
I'm saying, give me your default font size.
So they're almost the same.
I'm going to take font family and font size away from paragraph.
I'm going to strip it, because it doesn't need it, and now,
this font would be applied to everything on the page.
However, this shows us another thing about CSS.
You'll notice that the h1 is saying I want Georgia in two ends, but
body is saying this should be applied to everybody.
So now we have a conflict, between our CSS.
Whenever there's a conflict in your CSS, the closest rule wins.
Meaning, the more specific rule wins.
In this case, h1 is more specific, a single element.
So it overrides its parent, which is body.
So if I save this, go back out to my CSS.
It doesn't look any different,
it's exactly the same, but now we have slightly more efficient styles.
So I know we did a lot here, but really those are just some of
the basic text formatting options that we have when we're using styles.
So at this point, if you're starting to feel a little overwhelmed in terms of CSS,
please don't.
Remember, this is not a CSS course.
The main purpose of these exercises is to show you a little bit of
what CSS is capable of and to expose you to the syntax, so
that you're going to have a head start when you begin learning CSS on your own.