Hi.
Welcome to our first truly technical lecture in our CSS course.
It's about adding style to your pages.
If you've come to this course with me from our HTML course,
you know that I know that you can make general HTML files.
But up til now, you may not have styled them at all.
What I want you to know before we even begin styling, and you start putting your
own little twists on the pages, is that the same HTML file may look different
when viewed on different browsers, and there's a few reasons for that.
First, some tags aren't supported in some browsers while they are in others.
So if you've ever used the details tag, you can see that sometimes your page will
have little arrows or different little markings on them and other times it won't.
So that comes down to tags that are supported.
But also, every single browser has its own different default style.
And what that default style says is this is how I want my H1 headings to look, or
this is how much padding I want around my paragraphs.
So if you go to the exact same page on different browsers, it may be hard to
tell, but you'll see tiny little differences in how things are made.
But in general, this default look is really plain.
And most people I know, they don't want their pages to look plain.
They want to put in some style.
So let's begin looking at ways you can do this.
One way to add style is to think about adding it directly into the text.
Now as HTML evolved, we went from having tags that were distinctly about color,
and about different centering, and things like that.
To saying no, no, we don't want tags that have to do with style.
We only want tags that have to do with content.
People said, okay, we can do that, but I want to make it pretty.
So how they did this is they added style attributes.
So in this case I've taken an h1 tag and added the style attribute and
simply said "color:blue".
And what this is going to do is it's going to make this particular h1 heading
have blue font to it.
So it's very simple.
It's a nice way to just go in and add simple styling to your page.
However, this still kind of breaks our rule
of wanting to separate content from style.
Because if you want to change it to, say, red or green or
something like that later, you're going to have to go in and
change the tag, because you're going to have to change the attribute.
So I really tried to go out of my way to not use this at all, and instead,
get in the habit of doing things the right way.
And the right way to style your pages is to use CSS.
Cascading style sheets are basically a way for you to write rules that say how you
want to style all the paragraphs, or how you want to style all your headings, or
how you want to style some of your images.
It's a really nice,
specific way that everyone can follow to make these styling choices.
And the rules are set up like this.
First you have to put up your selector, and
selector is just kind of a fancy way of saying what it is you want to style.
In our case, we'll start off by just giving the selector
different tag names such as h1 or paragraph.
Once you find which tag it is you want to style,
you say which property it is you want to change.
So we can look at things such as color, background color,
how much space we put around it, we're gonna cover all of those.
But for right now, we're gonna start off really simple and deal with colors.
Then, you have to give each property a value,
saying which color you want it to be.
So, on one side, we have the very generic, how we write a rule.
And on the other, I've written a very specific rule that says, hey,
whenever you see an h1 heading, I want you to make the font color blue.
So we've done exactly what we did when we embedded using the style tag,
but now it's very generic, and we're not talking about a specific heading.
We're not talking about a specific tag.
So, when you write those rules, the syntax is very important.
A lot of times, when you write HTML, the browser is really nice to you and
if you forget to close a tag it says, that's okay,
I know what she wants me to do and it'll go ahead and put the page up anyway.
When you're doing CSS,
if you're sloppy with what we call your syntax, you're going to get in trouble.
So, the brackets and the semicolons are very important.
So, let me show you again when we go back here,
you can see that I've got a beginning bracket and
a closing bracket, and I've got this semicolon right at the end.
You need to remember to include those.
And one of the reasons I talk about this is that when you start writing your code,
when you pick a good editor, and most editors are pretty good, such as Sublime
or TextWrangler, TextEdit, Notepad++, they will put colors in for you.
So all of a sudden if you're looking at your CSS rules and
you're like, woah, I kind of expected things to be different colors, but
instead everything's white or everything's red.
It kind of gives you this hint that you've messed up on your rule syntax.
In the same line, I just kinda wanna throw in here that when you're writing your rule
you can put comments in to kinda help you debug and
help you explain to yourself what you're going.
And this is how comments are done in CSS.
You just do the /*, */ again.
So what happens if you want to do more than just one property?
What if instead of saying just you want the color to be blue,
you also want the background color to be yellow?
Well, no problem.
You can have as many property value combinations as you want.
You just need to remember to separate them with semicolons.
So in this case, again,
I've set the color to blue and the background color to yellow.
All right so
now that you know how to write a rule how do we actually get them to work?
Well there's two ways and
the first way I'm gonna tell you about is called using an Internal Style Sheet.
So as you can see over here in my code, I've got the basic template of our file.
And inside the head tags, I've put this style tag in, that's where
you're going to want to put your rules, they're defined right within that style.
So now, inside the style tag, I've added the h1, the color blue, and
I've ended my style tag.
So what happens now is that when the browser opens your page,
it gets to the head section it says, oh great,
she wrote some rules, let's see what she wants me to do.
And it's gonna know to go through your page and
apply this rule to all the H1 tags.
And if you have multiple rules including paragraphs, images, things like that,
it's gonna know, I want to apply this to all instances in the entire file.
Okay.
Now there's a really good chance you're gonna mess up because I do this 80% of
the time when I'm developing in class, and
what I do is I forget to close this style tag.
And if you forget to close that style tag down at the bottom,
well actually your page may end up being blank.
So don't freak out when you first start doing this if your page is blank,
it probably means you forgot to close the style tag.
All right.
So, internal style sheets are really nice
when you're just trying to style up one page.
All right?
And I often do it just so I can keep all my code in one file instead of going back
and forth and back and forth.
But Imagine that you have site where you're gonna have 10,20, a 1,000
different pages and you want them all to have a very consistent look about them.
You don't wanna have to go in and say if you want to change a color,
you don't wanna have to go in and open every single one of those files so
you can change the color to red or green.
Instead what you want to use is you want to use something called
external style sheets.
The way it works with an external style sheet is that you put your rules
in a different file.
So you open up a file,
you're gonna save it something such as like mystyle with a .css file extension.
So now the browser knows, oh everything in HTML, that's the content.
Everything in .css, that's the layout.
Now, when you make your external style sheet, it looks just like we just did
in the internal, except for you don't use a style tag.
Then, once you've put your rules in a separate file,
all you need to do is add a link into the head section.
So in this case, I've gone in,
I've put my link, I need to let it know the relationship cuz of the style sheet.
And you have to remember to put the file name.
so once again this is where it's going to be really important
that you're naming things in ways that they make since to you.
You can link to as many different style sheets as you want,
most of the time we start with one.
So Now that we've had that style sheet,
every single file that links to it will all share that style sheet.
So remember when I mentioned that you might have a site with 10, 20,
1000 pages to it and you decide to change that color from blue to red or green or
something like that?
This is great.
All you need to do is open up style.css, change one line of code, and
you've now just changed potentially thousands of pages Okay,
so let's talk for a second about this idea of cascading style sheets.
What does it mean that we're cascading?
Well, when the browser goes to make your page, the first thing it's gonna look at
is go, all right, maybe they're not telling me anything.
How do I normally make h1 headings?
How big do I make that font?
Have its own kind of default values.
But then it goes and it looks and it says, oh are there any external style sheets.
Because if so, I'm gonna overwrite my browser defaults and
put in the rules that are in this external style sheet instead.
Next it's going to check for internal style.
That style you have in the head section.
Because in general, the browser thinks, hm, maybe there's something really special
about this particular page, and here she wants me to do these rules instead.
Finally, any of those inline styles where you use the attribute tag,
those are gonna have the highest precedence of all.
So it can be really confusing, because you might start writing up different rules,
and you can't figure out why some are working and some aren't.
This is where the cascading part comes in again.
First it looks at defaults, then external, then internal, and then inline.
Which is why really you want to avoid using any inline style because
it pretty much nullifies all your styling rules.
Alright, so we know how those four go, but what if you have a selector ANd,
you've linked to two or three different style sheets, and
that same H1 has been defined to be blue, green, and yellow, but in different files.
How does the browser know what to do?
Well, how it works is that the rules from the most recent file have precedence.
And what I mean by the most recent file, it means it goes up into the head section
and it goes one, two, three, and it kind of looks at what order you listed them,
and the last one you listed is the one that's going to have precedence.
Okay?
Well, what if you have a selector in the same file, and
you've written H1 multiple times.
This can actually happen quite a bit.
Especially if you decide to go off and be part of a big development company,
you write some code, and then someone else writes some code, or,
as I tell my undergrads, maybe you went out and had a really good time one night,
and you came home and decided, I'm gonna code!
And you forget that you've already written some rules.
Well, if that's the case, once again,
the browser's going to look at the one it saw last.
So, in this case, I have two rules for h1.
One writes at the color to blue.
And I said, hey I want you to use this aerial font family.
And then later, there might be a whole bunch of stuff in here,
might be nothing, and I say hey, I want you to use a font family Times.
How the browser's going to look at this is it's gonna go down,
doo-doo-doo-doo-doo and say, I'm gonna make all the font blue, and
I'm gonna go ahead and make the font family Times.
It's just always is going to use the last one it saw.
So again, the most recent rule has precedence,
whether it was inside your code or it came from different files.
There is, however, one way to overwrite this.
Suppose you're writing something and you know you want something to be that way.
You don't care if anyone else overwrites it.
You really wanna make sure people aren't using inline style,
different things like that.
What you can use is you can use the !important Attribute right here.
So right here I've got font-family, Arial, and I've got important right here.
So even though later I decide to overwrite it with times, the browser's going to say
nope, I know that she really wanted me to use Arial, and it works out.
So let's go ahead and look at an example of what I mean by all those precedents.
I know just listening to me can get a little overwhelming, so I've got a quick
example showing you the different ways And then I'll kind of wrap up this lecture.
So let's start off using the style attribute.
As you can see in here, I've written the code, and
I've used the style attribute for this h1 heading, and this one paragraph.
So in this case, I want my h1 heading to be blue, and my paragraph to be red.
And what I really wanna show you is that
the only paragraph that was changed to red text or red font was the first one.
The other one's still black.
So the only way to style is if you go in and you change each and
every tag to make it look the way you want it to.
If I wanted all the paragraphs to be red, I'd have to go in there and
put style equals, style equals.
In this example there's only two,
but you can imagine how it'd get really annoying if you had a lot, okay.
In our next example we have an internal style.
In this case, I've put in my style tag up at the top and I've added rules for
paragraphs and H1 headings, and it should handle both.
So now there's nothing in here anymore, my tag is all by itself.
And if you look at the result, let's go over here.
You can see that now, even though my HTML doesn't have any type of styling in
at all, both of the paragraphs are red over here and so's the heading.
All right?
The last example I had for you is, I took these exact same rules and
I put them off into an external style sheet.
Again, there's no style tag here.
It's just the rules themselves.
And then I had to go back to the HTML file, and you can see right up here,
near the top, I have hey, let's link to the style sheet I want.
Now, I wanna point this out very carefully to you.
If you notice, I have css/externalStyle sheet.
This means that my style sheet is in a special folder called css.
Developers really stress that you do this,
because you want your code to be kind of organized into different parts.
So again, in the same way,
I now have a page that uses external style sheets and looks really good.
So all this code is gonna be available for you to look at it, but
I want you to kind of play with it as much as you can.
But, I wanna use this final example to help
you kind of understand how the cascading works.
So right here, I have my external style sheet.
I'm gonna go over here for just a second.
Go to my, and I'm going to add, One last thing.
Sorry, this is gonna be awkward.
And I'm gonna say you know what?
Instead, I want that font to be black again, and I end it.
I'm gonna show you what happens when you mess up really quickly.
I'm gonna save it, I'm gonna reload my page And everything disappeared.
This was what I was talking about.
You really wanna make sure you include that style tag.
Do it. Make sure you close it up.
All right.
So now what I have going on here is my browser has its browser default.
It has an external style sheet, and now it also has an internal one.
So let's see what color it's going to be,
if it's going to be blue or if it's going to be black.
And as you can see, it's black.
So as you start styling, it's going to be very important that you look at
different ways for separating your content from your formatting.
As well as looking at the different ways that you can do that formatting.
So, one of the first things I want you to think about
is how this idea of external and
internal style sheets really plays into the separation of content from formatting.
And at the same time I want you to understand that we don't always
follow every rule.
In the beginning we always have to start with really,
really simple examples to help you guys solidify what's going on with CSS.
So I'm just going to end this now with a brief,
brief demo from an example they have at csszengarden.com because
I think it really brings home the idea that CSS can be very powerful.
So let's take a look.
So at this site,
CSS Zen Garden, They've actually done a really great job of showing
all the different ways you can format an exact same file but in different ways.
So up here, if you take a look, you can see that this is one person's style sheet
for decorating or styling this document.
Now, without changing any of the HTML at all, someone else came in and said, hey,
you know what, that's nice, but I'm going to style it this way.
It looks completely different.
It's the same exact HTML but it looks completely different.
In the same way, we've got this one right here, same exact HTML.
But you couldn't look any different,
because they've added some CSS and JavaScript to it that's different.
So come on with me.
We're gonna code a lot in this course.
We're gonna be playing a lot with this course.
You're gonna be messing up a lot in this course.
But I can't wait for
you to develop something that really reflects how you want your page to look.
Thanks.