Congratulations.
You've made it all the way to the final challenge.
And in this challenge, you're going to practice controlling site-wide styling and
writing some basic selectors for our reference site.
All right.
So I have the lab instructions.txt open from the 07 underscore 07 directory.
And we're going to be working again on our HTML essential training reference site.
If we were to open it up right now.
Let's see, let me go to intro and just open this page up.
And if I were to preview this in my browser, you can see that all
the styling that we've had all the way throughout the course is suddenly missing.
So we'll need to put it back.
The very first step is to link all of the pages in our
site to our external style sheet.
So, you're going to open up each of the individual pages.
And you want to link them to style sheet styles.css.
Now, that styles sheet is located in the underscore css folder and
it's called styles.css.
So not only do you need to link it there, you want to make sure that you
resolve the link correctly from the files to the CSS file.
Going in to the underscore css directory.
Also, you want to make sure that you remember to
define the relationship between the style sheet and the HTML files, as well.
After you've done that and you've got the styling applied, we're going to go in and
modify some of the styling.
The first thing you're going to do is set the background color of the pages.
So you're going to go into the styles.css file and in that file,
you're going to locate the rule that is styling the HTML and body tag.
And it'll look exactly like that.
That's the selector you're looking for.
When you see a comma between two element selectors that's what's known as
a group selector.
It groups those two elements together and applies the styling to both of them.
For those you're going to set the background color to this
hexadecimal value.
Pound 663399 which you can see is a purple.
Now, we didn't talk about writing CSS comments in the exercises.
So I wanted to give you some practice in doing that.
So after the color definition, after the semicolon.
I want you to add this CSS comment right beside that to
define which color you're using.
Now in this case, comments and
CSS are done by forward slash star and then star forward slash to end them.
And they can be multiple lines.
So in this case, all you're doing is defining the color.
And that's just writing somebody, a such as yourself, for
example, a note to let you know what the color is.
It's not actually going to be performing any function other than just
being informative.
All right.
After that, we're going to be working with floating images.
So on the intro page, we have two images.
We have the tags.png at the top.
And then down towards the bottom, we have the W3C icon.
So we're going to control the way that text flows around those.
So the first thing you're going to do is scroll down into the CSS and
right around line 104, somewhere around in there, you'll find two selectors.
One for flowRight and one for flowLeft.
You're going to need to set the float property for both of those.
You're going to set the float property for flowRight to right and
the float property for flowLeft to left.
Now, some of you are probably saying, wait a second.
You didn't tell us how to set the float property.
You never did that.
Well, the same way that you set all the other properties,
you're going to set this property.
I'm showing you what the property looks like and I'm giving you the values for
the property, right and left in their respective selectors.
So that actually should be pretty easy for you to do.
And it sort of illustrates how consistent the syntax is in CSS.
So what that float property does for you is it controls how the elements
position themselves and how the contents are going to flow around them.
Once you assign both of those values, you're going to preview the intro page and
you're going to notice that no change has occurred.
That's because these selectors right here are what we call class selectors.
And they depend on the fact that an element has those classes applied to them.
So what you're going to need to do in order to complete the styling is
you're going to need to go back into the intro.htm.
Find those images and then apply the class flowRight to the first image and
the class flowLeft to the second image.
Note that spelling matters and capitalization matters.
So you need to make sure it matches the selectors that you have in CSS.
Preview it again and now the text should be flowing around the image.
Finally, you want to do a little bit of site-wide typography work.
Again, you're going to go back into the styles document and you're going to write
a rule that sets the pages default font size to 100% of the user's agent default.
And that request for Verdana as the font-family.
You want to set Geneva and the default sans-serif definition as fallbacks.
Try to do all of this in a single rule, if you can.
So essentially, you may have to go back to the typography exercise and
take a look at how that's done.
Because I've been very, very vague here in terms of how you're going to do this.
I want to see how much you picked up from that and
how much critical thinking that you can apply in order to do this.
So I'm not telling you which properties to set.
I'm not telling you exactly how to do it.
I'm just telling what I want you to with this one.
So again, set the page's default font size to 100% of the user agent's default.
And then use Verdana as the font-family and set Geneva and
sans-serif families as the fallback.
And I want that to apply to the whole page, not just this specific element.
And okay.
Okay.
So after you're done with all that, saved what you worked on.
Preview them and go through the style sheet.
And after you're done with all that, preview it as you go along to
make sure everything is selling the way you want it to.
But I also would encourage you that once you're done with the exercise,
go through the style sheet.
Take a look at all the selectors there and their properties.
Try to match those selectors to elements in the page and you'll get
an idea as to what's going on there behind the scenes in terms of, of styling.
As I mentioned here in the instructions, really don't get too concerned if you
don't immediately recognize which elements they're targeting or
which properties are being controlled.
The goal really is just to start the process of understanding how CSS
selectors work and how certain properties affect those elements on the page.
So there you go, that's your last challenge.
Now individually.
Those tasks probably won't take you all that long to do.
However, I want to state you need to be really,
really careful when you're writing your CSS syntax.
If you test the page in browser and
you don't get the formatting you expect, really look at your syntax.
CSS is a stickler for things being spelled correctly, for colons and
semicolons being put in the right place.
One badly formed rule will not only effect that rule, but
all of the rules that follow it.
So you could have cascading if you will of errors.
So, always double check your syntax.
And as always, feel free to check out the finished files if you get stuck.
Or once you've completed the lab,
make sure you watch the solutions movie to see if your solutions match mine.