At this point I’m pretty happy with what we’ve
come up with. This is very close to the design.
So now it’s time to capture all of the style
changes that we’ve made into our file. So
far we’ve made these changes in the browser
but as soon as we refresh these changes will
I’m going to jump back to our text editor.
Now earlier on in this series what we did
to add styles was use the style property.
So we’d do style, equals and then quotes and
we’d put our styles right in there, and we
can do that now, let’s give that a shot.
I’m going to jump back to the browser and
what I’ll do here is highlight all of the
styles. So notice I’m starting from where
this bracket begins and ending this selection
before the ending bracket, and then I can
right-click and copy and then I’ll jump back
to the editor and I’ll paste right inside
this style section, and I’ll save this.
Now we can jump back to the browser and refresh,
and you see that all of our changes persist
because we have it in the style tag inside
of our code right here. Now the style property
is very useful but in general it’s not the
way that we want to apply styles in our HTML,
for a couple of reasons.
The first is the one that should be kind of
obvious here, which is that as we get longer
styles it becomes harder and harder to tell
what our HTML structure is. We could remove
all of the extra lines in order to make this
all one line but then it would be even harder
to read, and if you imagine HTML elements
nested in other HTML elements this is going
to start to get a bit unwieldy.
But that’s not the biggest reason why we don’t
use the style tag. The biggest problem is
when we want to reuse styles. So let’s say
we have three heading two tags and we can
simulate that by copying this H2 tag and pasting
it in here a couple times, so now we have
three of them. I’ll save this and we’ll go
to the browser and refresh. So you’ll see
qualities three times.
Okay, all is good so far, right? Well let’s
say now we want to change the letter spacing
in all three of these. Because we’re just
a little bit short of what we want and we’d
rather extend it out a little bit, what will
we need to do?
Well we have to go back into our code and
we’re going to need to change it in three
different places: so letter spacing here,
letter spacing here and letter spacing here.
Now that doesn’t seem like a huge deal because
we only have three headings and they’re all
right next to each other.
But when we’re done with this template the
H2 tags are going to be distributed throughout
a whole bunch of other HTML code, and it’s
going to be a surprising amount of work trying
to find all of the headings that use this
style in order to modify it.
So ultimately we’ll end up using something
called a selector in order to tell the browser
which elements get certain styles, instead
of putting the styles in-line with the element.
Let’s do that. So if you remember from before
when we were explaining why we use the HTML
head-body structure inside of our document
part of it was that our head is useful for
other things besides just the title, and one
of them is for putting styles in it.
So what we’ll start with is a starting style
tag, and we’ll just go ahead and end that
as well, so we don’t forget, and then within
the style tag we’re going to use a selector.
I’ll go ahead and type out the selector now
and then explain what it means.
Okay, so what we have here is H2 which you
should be familiar with by now, it’s our heading
two tag, and so we’re saying with this selector
that we want to apply any styles that are
inside of these curly brackets to H2 tags.
We could put any tag here if we wanted and
we can do a lot more with selectors which
you’ll see shortly in this series.
So now, instead of having our styles here,
let’s cut out these styles and we’ll paste
it inside this selector. Notice how everything
gets indented properly – this is another benefit
of using an IDE, instead of a plain text editor.
And now that we have this we can remove the
style tag from all of our H2s. Okay, let’s
save it and jump back to the browser and refresh,
and you’ll notice that nothing changed here.
Down here, instead of all of the styles appearing
in element dot style, we’re seeing it inside
of this selector, and we can demonstrate very
quickly how powerful it is to be using a selector
So let’s say we wanted to change the color
to blue. So I’m going to highlight the value
and type in blue, and you can see that the
styles change across all of our headers at
So hopefully you can see the power of switching
from using the style property to using the
style tag and specifying selectors to apply
styles too. Now like I said we can do a lot
more with selectors and we’ll need to in just
a few steps in order to get what we need.
But for now this is pretty good.