Tip:
Highlight text to annotate it
X
In this video I'm going to show you how to apply styles. I'm going to go back to week
three, or lab03 and I'm going to select my two files there. And I'm going to copy them
and I'm going to paste them into lab07. So at this point, what we have is very appropriate
and well laid out HTML page. And we're going to want to create a CSS page. So I'm going
to do a new file of type CSS and I' going to save it into week 8, or lab08 and call
it 07styles.css. I'm going to hit save. Now, Dreamweaver makes this brilliantly easy to
link them together, it allows you to attach style sheets and just select it. And you want
to make sure to select link and ok. That doesn't change anything because it's empty but you
can see in the head section it's put in the link, href, the styles.css, relationship to
the style sheet and it's type is text/css. So you can just type in that code if you're
working in Aptana. But I did another video for creating them in Aptana. What I want to
do is show you how we can take charge of this using styles. And we're going to do it one
step at the time. We're going to put in a body tag, and we're re-defining the body element.
There is automatic styles that occur and we're re-defining them. We're going to put in a
background color and Dreamweaver makes that also very easy because it gives you a color
picker. And you can always go in and pick something custom. I'll try that again. And
when you do that it will take over the whole thing. We're going to break it up a little
bit and we're going to get into the container. And this is an id so it need a hash mark.
Because that's a div tag and so we're re-defining the id for that. We're going to set that background
color. To something much lighter, just a little off white there. OK, and then I'm going to
start playing with things one at a time and just sort of playing around. If we change
the font, it will apply to the whole page and typically I'm going to use a font family.
And I like to use a sans serif. Make sure you put your semi colon in or it won't apply.
OK, and then I can start making some additional changes in here. I'm going to re-define the
h1 tag by changing that font. And here I'm going to use the serif. This is really obvious.
So we can see where the h1s are. These two are h1, the rest are h2 or 3. We can also
change the color here and color always applies to the font color, not the background color.
We'll make them, let's say dark green. There we go. We have an article in here. So we're
going to re-define the article and we can identify what's in the article by just changing
the font. Let's do just a color. So you can see all of this, it just changed. That's all
inside the article. I can actually be more specific that that. I can make it article
h2, so just these h2 tags are that shade of green. That article also has an id, let's
see where it is, article. No we didn't give it an id. We're going to set id equals hounded.
Go back over to styles and we'll put in an id for hounded. Go back to split. Now, I want
you to see something. The article and hounded are both applying to the same thing and we'll
do this here. Color, I'm going to comment this one out for a second, I'm going to get
rid of this for just a second. I want to show you how this works, so get everything back
to green. I'm going to set the color here. And you're going to see, the one that is more
specific will win. It doesn't matter what order they're in, if one is truly more specific
than the other. If one is not truly more specific, order matters. And in this case it doesn't.
Now, it would be. The question is: which is more specific? Having an id or going down
to the h2 level. And you can see that going to h2 is more specific, even though this is
an id. So I'd like to sort of do this live to show you what wins. I'm going to also set
a width on the container. Pretty standard width 960 pixels. It doesn't show here but
if I preview this is Firefox, you see it's here and it's over to the left-hand side.
It also automatically put the margins up here. Now let's play with this a little bit. Let's
do margin 15 pixels, that's going to be top and bottom, and then auto. If I do that it centers it. The auto portion centers it.
Now I don't like how close the text is in here. Let's play with that in the article.
I'm going to make the padding 25 pixels. That's just the h2, let me take that and drop that
there. And that puts everything in with padding. Let's do the container padding at 10 pixels.
OK, and then I have several sections in here. Let's show you where the sections are. We
can do that by putting a border and I want a border style thick. That's not what I want.
Border style solid and then I need a border width thick. There we go. I think that they
need some space between them so I'm going to drop in a margin of 10 pixels. OK, now
I want to play with some of the formatting here. And often I don't remember exactly the
code that I want to use so I'm going to go to CSS reference - w3schools. This is one
of my favorite CSS references. Because also I'm going to want to look at things because
it's hard to remember. One of my favorite quotes, Albert Einstein was once asked what's
your phone number. And he didn't know it, he held up the phone and said if I know where
to find it, I don't have to memorize it. You're not going to memorize every tag, once you
use it all the time you will, put if you don't use them all the time you need to know where
to go find them. And I like the w3schools pages. So I'm going to copy in, and what this
is going to do, it's going to allow us to change the links settings. I never remember
exactly the right words for these so you have your link, it's an unvisited link, and I just
change these whatever colors they have set. We're going to take a little bit more control
here. So I'm going to make the standard link green, I'm going to make the visited link
orange, That's not going to show up in here until I test it. I'll leave the other two
as they are. Now I should, when I'm doing this, I like to make this all formatted in
a standard way. So I'll usually go through even when copying the code from another page.
And adjust it the way I like to format things because it's important to have a consistency.
It just makes it a better looking page. It doesn't affect the way it appears to other
people but it makes it much easier to up-keep and maintain, when you use consistent formatting
throughout. And I like this formatting because it lines up these curly brackets and missing
a curly bracket or a semicolon are two the most common errors. Doesn't do anything to
the appearance. Let's take a quick look in Firefox. And you'll see we have mouse-overs and now a visited link. OK, the other thing
I'll show you, I want to get rid of these dots right here. So again styles, we can go,
and that's a list style, and so we'll see that, I wanted to do the list, list style,
so we're going to want to do the list style type. Lots of choices here. What I really
want to do is just make it go away. So that's for the unordered list, so ul, and we're going
to re-define that. List style type none. There we go. And so I've made some very basic basic
changes in here. And I'm not going to say it's the most attractive page but it does
show you that you can change things. And I want you to notice one more thing. When you
have an h1 here, we can also go in and define just the one in the header. So we're going
to do header h1. Font size 36px. And then the other thing I would typically like to
do at the top of the page is a text align center. Now obviously I do know some of these
by heart. When you're looking for your CSS references, you're going to go to w3schools
site. Look for the CSS different characteristics. And now in here in the sections I'm really
not happy with the padding. Remember it's, I'm going to show you how that works. Let's
take a quick look at this. I'm going to do Inspect Element and this is our box model
so we have the content, the padding, the border, the margin. So I have 0 padding here. And
since I want to have padding or spacing between my content and my border. So here I have my
content, here is my boarder. No spacing between it. I want padding to give me spacing in the
sections. So let's go back up to section, let's do padding, 5 pixels, and it gives me
little spacing. 15 pixels gives me a lot of padding. So I want you to go through and play
with different settings. I want you to copy your HTML page from unit 3 and go through
and apply different things to each area. And go down to the level of re-defining the different
elements that you use. Play with the paragraph, play with things like block quote. Usually
I like these to be, we'll say that they are font style italic. And so you see that becomes
italicized. And this is where you should do it. Not in the HTML because this isn't read
by browsers for the blind, it's just visual styling. And styling should be separate from
HTML. So I want you to go through and re-style your assignment from lab number 3. When you're
done make sure that you link to it back in your index page.