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.