In our last exercise we discussed why it was a bad idea to
style HTML elements directly using inline styles.
It's a lot more efficient to have styles that can affect an entire page or
an entire site all at once.
So to introduce that concept we're going to take a look at using the style
element and move our styles into the head of our document.
To do this, we're going to work with the style.htm which is
found in the 07_03 directory.
And again, you can see we're sort of picking up where we left off.
We had a heading two on the page.
And currently its using inline styling to make itself red and
change its font weight to normal.
So I want to move that up so that any h2's that might be on this page are effected by
that and I'm not having to do this inline styling for every single one of them.
Again, we're going to do this in the head of the document,
remember the head is where those sort of invisible things that
help make the page work go and we're going to do a style tag.
So we're going to go ahead and open up a style tag and
then directly underneath that we want to close the style tag.
I definitely recommend going ahead and doing the opening and
closing tags at the very beginning of this, because it's really easy to
start writing your styles and then forgetting to close that style tag.
So that's pretty important.
So, the next thing that we need to do is to start writing CSS.
So, we're done writing HTML at this point, and
inside the style tags, we're going to be writing using the CSS syntax.
So here's where we have to learn a little bit about HTML syntax.
So, if we wanted to target an element on the page with CSS,
we use what's known as a selector.
Selectors basically tell the browser or
user agent this is the element, or elements, that I want to style.
In the case of the heading 2, all we have to do, is type in h2.
So, we don't need a tag around it, we don't need any angle brackets.
All you do is type in the element that you're wanting to style.
This is what's known as an element selector, and
it's probably the most basic selector type that you'll find, or encounter in CSS.
After this we're going to have a collection of properties, and
this could be an individual property that we want to control or
it could be multiple properties.
So, in order to group them together, we use curly braces.
So I'm going to use the curly bracket that you can find just to the right of
the P key.
You can see I'm opening one up.
Now with CSS syntax it doesn't care if we write this all in one line, but
in order to make it more readable for other users or the author it's a common
practice to hit Return a couple of time and then close the curly bracket.
You can see that brackets my code editor realizes what I'm doing here and
goes ahead and formats that for me which is really nice.
So essentially we have an opening curly brace and
we have a closing curly brace and that's going to enclose all of
the properties that we want for this particular rule.
So the selector and the properties all together are considered a CSS rule.
So now we know we want to make the color red and
we want to make the font weight normal.
We can actually take a look down at the inline style and use its syntax.
So I can type in color:red; so again you can see
it's exactly the same syntax we used down below for our properties and our values.
Then I'm going to hit Return to go down to the next line and on the next
line I'm going to type in font-weight and I'm going to set that to normal.
So just the same way that we did it before.
I have no idea why brackets decides to do that weird spacing, but whatever.
Now I'm just saying this, and then what I'm going to do is I'm going to get rid of
the m line style down here inside the HTML element.
I don't want that.
So I'll save that.
Preview that in the browser and I can see that I'm still getting that same styling.
I'm still getting a red, I'm still getting that sort of normal style so
it's not bold.
As perfect it's working exactly the way I want it to.
Now, this is a little bit more flexible and
a little bit more powerful because if I were to create a new h2.
So I'm just going to copy this existing one.
Paste it down here.
And then on the bottom one I'm going to say something like,
those reenforcing concept, right?
Global styles apply to all instances of the element.
So the style that we wrote is considered to be a global style meaning.
It's going to apply to every single h2 on the page.
And if I switch over to my browser, I can see that that is indeed the case because
the second h2 that we applied to the page goes ahead and
receives that styling as well.
So this is a very generic selector,
it's what we'll call a global selector, it's applying to everybody.
With CSS you can be a little bit more targeted if you want to.
For example, if I take the first h2 right here and
I apply a class of alert to that and save this,
then I can come back up to the selector and I can just say .alert.
So this is what's known as a class selector.
It has a period in front of it and then the value of the class attribute.
So it goes down into your HTML and it says okay, I'm looking for a class.
So that period.
Indicates that it's looking for that class attribute.
And then it says I'm looking for
one that has a value of alert, which would match this one.
You'll notice that there's no space between the period and the text.
It's just all one thing.
So now if I save this and go back into the browser,
you can see that the style's now only applying to the first h2.
Now this is interesting because you can use classes as often as you want.
So for the h1, if I wanted to, I could give it a class of alert as well, and
it would receive the exact same styling.
Even though they're different elements, an h1 and h2.
However if I want, I can make the selector even more specific.
So I could come up to the selector and I could choose, h2.alert.
So no spacing in between them, and that's even being more specific.
It's saying find an h2, that has the class, of alert applied to it.
So it would scan the whole page, it would look for an h2,
that has a class of alert applied to it and
if I save that and test it, again, you can see it's targeting only that page.
So having the ability to control an entire page of styling in one location,
like we have here in the style tag, is pretty powerful.
A little later on we're going to explain how you can control an entire site
with one set of styles.
But before we can do that,
let's go over the basic styling properties that we can control.
And we're going to start in our next exercise by exploring basic typography.