Hello and welcome to Web Applications for Everybody.
We are taking a look today at Cascading Style Sheets.
You can download the source code and unzip it on
your computer if you like or you can browse this code
and just play with it in the browser because it's
all static content so it's just as easy to play with them in the browser and of course,
we're going to want to take a look at this in the developer console.
It just makes a lot more sense to get into this and so here we go.
We're taking a look at CSS.
There's a couple of ways to do this.
We can see here.
We can see the style attribute.
Style color equals blue and there's all kinds of various CSS parameters.
Color is the parameter and blue is one of
the values and you got to look all these things up.
One of the nice things that we can see is we can see over
here as we move between elements in the document object model,
we can see what the CSS values are and so Arial Sans,
like for example, this is cascading.
The body on here is Arial or Sans Serif and that means the Arial Font,
if we can get it, Sans Serif is a fallback font.
And so that this H1,
this little bit right here,
this H1 is being colored.
Browsers have their own default so display block,
font size two em which is twice as big as the rest of the font, etc, etc.
This came from the browser and then this came from the style sheet.
So this is cascading and the bottom ones here are,
I mean, this is the most important one because this is the one we said that's closest.
And that's how the cascading works.
You saw that.
Saw that and then the cascading is, again,
we take a look at this little guy right here and so the closest one is we want
a monospace font family but the body said the
font family's Arial and Sans Serif but this one has been overridden.
We can, kind of, see that and that's why this particular text is monospace.
Another thing we can do is we put border style.
Now, when I'm working with this stuff I tend to remember border a
lot because it's a good way for you to mark something out and say,
what am I doing in here?
And we'll see, like when we're moving text around border,
solid border, a red border and a five pixel border.
So that's what we see.
And you can also see that there's
some extra padding around there as well or some extra margin.
And margin top, that's another one.
Scroll this up a bit.
Margin top throws five ems of space above the text and so this is a normal paragraph.
We got five extra ems. Now what's an em?
Em is the height of a character in
the current font and so em is a really convenient measure.
There's ems and pixels and percent.
So a margin before,
that's one em over here,
the paragraph already has an em, margin before.
And then, I'll come down here.
Here we've added the margin top.
This margin top overrode the margin top that was part of the paragraph tag automatically.
So that's the style rules.
Let's keep on going.
While this is technically possible this would
really be overwhelming to put a style on every tag.
And so one of the things we tend to do is we want to put style rules that are generic.
So we'll say we would like the body tag and this is a style rule.
This is the selector,
body and then font family,
and again, font family works.
Says please give me the Arial font and if that's not available give me Sans Serif font.
Curly brace, curly brace, H1 tags.
We're gonna go through the whole document and paint H1 tags blue,
go through the whole document,
whole document, find every paragraph tag,
set the border style to solid,
border color to red, five pixels.
So you see that every paragraph and we're gonna change our anchor
tags to have green and have no text decoration because they're defaulted by,
to have their default
to have underscore and we're going to make the background color like gray,
wide just so we see it so you can see that particular thing up there.
And then if you look down into the text here,
we have paragraph tags and an anchor tag and no style equals done here.
So what we've done. Ignore that little part there that's
what puts this little thing in the corner so that's not now we're talking about.
We put no style tags whatsoever and we put all
the style tags up here but now we've also done
something that all the paragraphs have to have
the same style which sometimes is what you want and sometimes it's not what you want.
Now what happens again now if you have multiple pages as we
have here it gets a little tiresome to put this text in
every page and so what's really common
instead so now we have the same basic rough paragraph stuff here.
Nothing in here.
We have a pre-tag of course.
We have a paragraph tag.
There's no style equals on these things but up in the head
we have one line right here that basically says let's take
a look at this style sheet and if we were to look at the style sheet dot CSS it
is in the same folder rules dot CSS.
It's in the same folder as that HTM file and it's exactly the stuff we had there.
It's just a set of selectors and then a select of key values,
what we want, color blue, border style,
border color, et cetera,
et cetera, et cetera.
And so it really is the same as what we saw- what we showed
before except now that we have in, we that,
we have to put this into every file and you'll see we'll
put this now from now on and everyone that I'm looking
at and so- but now
our problem is is that we've done something with this to do all the headers, right?
All H1s, all paragraphs.
But we need better ways to mark text and
so- and so we have
these tags and these tags that we use just to put handles on.
And in the old days like this paragraph tag has this border,
see that has those- the margin up there, you know, has,
has the border but it has
this one em margin and that's- that's
that space that you're seeing that makes paragraphs look good.
I mean that's not a bad thing.
And so, if so,
if you look at that we have all these, that,
these colors got this strong tag,
by default the thing used a Serif font.
I don't like that.
So let's get down to here and this,
