Now we're going to start showing how we change our HTML so that we can use CSS.
There's a couple of different ways that we can sort of reference CSS inside of our HTML.
First, we can apply a CSS to any HTML tag using a style attribute.
We can also take a style sheet right in the head
of our document or a completely separate file.
The third one is really the most common.
We take a look at this.
We can take this paragraph tags.
This is a paragraph tag, and we can put a border around it,
a red border and some border with etc.,
and so we see this style tag here.
The style tag says for this tag and this tag only,
I want to make these,
set these parameters: border style solid,
border color red, border with five pixels,
and that leads to this particular thing.
Now we ought to talk a little bit about the C and cascading style sheets.
There is style that is inherited, right?
The body style says we're going to do font family Arial sans-serif,
and so that means from here down it's font-family Arial sans-serif.
This paragraph did not override this font-family. So I could override it.
I could change the font here to be like fixed with font or something,
but because I didn't override the font-family,
that means that the font-family here is Arial because the default is like
serif font Times New Roman look and I do not like that so I
make font-family Arial everywhere but this is inherited.
That's the cascading part that sort of you can think of it as whatever we apply,
the closest one applies.
And because we didn't change font-family here,
then we take the ones that enclose it.
This paragraph tag is enclosed in that body tag and
so the style comes in to that particular thing,
but the key thing here is is that style equals is
an attribute that sets CSS on a particular tag and no further.
This next paragraph does not have it and the one before doesn't have it.
In the same example,
this paragraph it's font family monospace.
The Arial would be inherited but now we've
overridden it ad so this is Arial, Arial, Arial,
but we chose to override the Arial in that particular paragraph
so that's kind of cascading but it's all using the style equals.
You'll get into interesting arguments
whether or not you should use the style equals a lot or a little.
You just got to be careful.
The most important thing is to not end up in
a situation where you're using it too much and saying the same thing over and over again.
Sometimes, though, you just like say,
I want it red and I don't want to get too fancy about it.
I just want it red, end of story.
You can also put the style rules in a header. Here's the head.
Remember the HTML pages have a head and then a body, head is met data.
One of the things, in addition like title you can put in,
is a style tag and then in the style tag you can just put
CSS rule so you've kind of switch from HTML to CSS in the same document.
This is very same document.
This just basically say go down,
find the body, paint that with this rule.
Find the header one tag,
paint it with that rule.
If you look, there will be no style attributes down here because we just
know that we can make the all the header ones in the document be blue with that one rule,
and so we just hoist these things out from the tags up into a general thing.
This is generally much better.
If you want to make your header ones be blue,
you don't want to say style color blue over and over and over again.
That's what I mean by don't repeat yourself.
That's what I mean by don't repeat yourself so you can put their style
rules right in the header of the document.
Probably an even better way to do this,
because you don't want your documents to get too big,
and especially if you have like a caching server,
that's too complex, is to put a link and then have
style sheet and then have the file and another just a file of CSS rules.
Instead of putting them right here in the document,
you put them in a separate file and then
your document is kind of smaller and the fact that you're going to
putting these in probably many different pages so over and over and over again.
Why not put the CSS in a separate file and pull it in every time you need it?
The same CSS rules if we take a look at it.
It's going to do the exact same thing.
It's going to be the exact same thing and there is a rule to make the header one blue.
It's the same rules that we had here except
that those rules are not in the background document,
instead, they're in a separate document.
Here we have the stuff right and we pull this style sheet in.
I mean this literally is it,
but somehow this header has inherited rules that come out of here.
The header is blue so we have some other stuff,
links we can- Oh,
that's just telling us what we got to do.
The the header blue comes out of rules.css.
This is what the rules look like but they're
the exact same rules that we had in that previous example.
The span of the div tags are two tags that we added to
HTML at the same time that CSS was kind of like becoming the norm.
All the tags in HTML,
paragraph tag Li tag,
have what's called a predefined formatting rules.
If you just make a paragraph tag with no- you just a paragraph and paragraph,
it has some rules about like spacing and stuff and so there's all these rules.
What we needed was a set of tags that did
not have any default rules or default
formatting so that we could sort of just add via CSS.
The span tag is an inline tag and it's a way for us to grab a bit of text span, and span,
and style it, but there was no default formatting
for span so you can say if you just put span around something,
spanxyz/span, that did nothing.
It doesn't change.
Whatever the formatting was as it came into here,
same formatting here, etc., etc.
The only time you do something is if you add a style to that span.
The span is a way to grab text and then paint it with some different set of CSS rules.
Span is an inline tag,
which means it doesn't even break justification.
It's just an inline tag like bold or italics or or strong or emphasize.
That div tag is a tag that has a block tag and the difference tween inline
tag and a block tag is that the inline tag does not break justification,
but the div tag does break justification.
Now, you might think well that the p tag and div tag are very similar.
The big differences is the div tag has
no default styling and the p tag has default styling mostly space.
It has little padding that makes it so the paragraphs don't stick out.
If you put two divs together and you go div, div, div,
div, div and you put no padding in or no spacing in,
they're going to touch each other
because they're going to be really close together and like oh,
the paragraph tag has built in formatting but the div tag
has no built in formatting and so you can kind of see this.
I put sort of one pixel,
and this is a common thing to do in CSS,
I put one pixel borders around each one of these things so you can sort of see the end of
one div in the beginning of the other div and the answer is there is no space in between.
Whereas, a paragraph tag.
Look. See this paragraph tag?
We didn't do anything but the paragraph tag just kind of added
that stuff right there and so you see the paragraphs start and stop,
but there's a little bit of blank space that comes after the paragraph tags.
Paragraphs have a default styling and divs do not have a default styling.
Also, you can nest div tags.
You can nest div tags and you're not really supposed to nest paragraph tags.
I'm sure most browsers wouldn't care too much, but basically,
the div tag is designed to be nestable.
You'll notice that by adding this one pixel border I do change the spacing,
but you can see even in the horizontal,
there is zero space in between these things or just like right next to each other.
Again, all these is emphasizing is that the div and
the span start with no formatting except the div does break.
The div breaks horizontal layout.
It breaks as a justification,
but span does not break justification. It just keeps on going.
It doesn't break justification,
but other than that, there's no padding,
there's no color, there's no nothing.
The next thing you talk about is classes and IDs.
The idea is that we never want to repeat ourselves.
We have created this part of CSS is the creation of this class attribute.
The class attribute, itself, does nothing.
It just marks a set of distinguished tags,
so you say class equals monospace or class equals shout loud,
or ID equals third.
The difference between class and ID is
you can use a class on more than one tag in a document.
We'll see later, ID is another one of these CSS attributes that we can use,
but you can only have one ID per document.
One tag within an ID attribute of third,
ID attribute the second,
ID attribute the first,
but we can't have two of them have first.
The IDs have got to be unique across the whole document,
but classes do not have to be unique.
Also, just here, this little bit of class right here.
You can have more than one class this is not a class
called shout loud this is a class of shout and loud.
It means apply the rules for shout class and loud class to this particular tag.
If we take a look at this,
when we say body that's a normal tag.
Pound sign first, that means ID.
Pound sign says go find the thing with ID first,
right here, and paint that with monospace. We'll see this in a second.
Second, we're going to make everything in the second, which is here.
We're going to paint that all green.
That's how I think of these and I go find all of the things with
the monospace class and then have a left margin 20 pixels and a right margin 20 pixels,
and you go find all of them,
left right, and so shout.
It's going to transform into uppercase.
Louds going to transform it to red.
You could have shout by itself.
Shout and loud are sort of independently
applied so this is going to be both uppercase and loud.
Then, you can even have cascading that says that within a tag that has the idea third,
paragraph tags, you're gonna have a background color of red.
Let's go find where that one's at.
ID tag at third, right here.
ID take a third so that is,
I guess we're not seeing a /div there,
but then a paragraph tag.
This paragraph is to be painted with a background color of yellow.
You can see this as like grab do,
grab do, grab do and we're just able to do that.
Not that any of this makes any sense, it's just an example.
Let's take a look at how that really looks.
Within the ID of third, did the third,
all the paragraph tags are have a yellow background and
so that was like I spray painted this yellow background on that away you go.
Like the the monospace,
guys, look at the monospace.
The monospace applied to these two paragraphs and they sort of shoved in
both on this side and this side because I get a margin
left and a margin right to shove those both in.
The div of second,
which is a whole bunch of stuff from here to here.
The div of second all of that,
it's actually all this.
Basically, we spray painted all from here to here green,
but then we overrode that by a more local CSS rule.
This one is closer than this one.
Because we're in second, we're supposed to be green.
But because of shout and loud, we're supposed to be red.
This is red, so red one here.
If you didn't have this,
this would be green, but you have this thing that's closer.
The closer it is to the tag,
the more power that it has and that's how it overwrites.
Up next, we're going to talk about colors and images and fonts.
Again, there's so much to learn but these are sort of the basics that I want you to know.
