Welcome back.
I hope you had fun working on your last challenge, which was our CSS challenge.
You know, writing CSS for
me has always been my favorite part of designing websites.
So, I really hope you enjoy working with styles as much as I do.
Let's take a look at your completed challenge, and
compare your files with the files from the finished files folder.
So I have the lab instructions file from 07_07 open just so
we can sort of go through each of them and see how they were solved.
The first step, was to link to the external style sheets site wide.
And to do that, I'll open up the intro.htm and you can
see right there is our link tag that's linking to the external style sheet.
Now the one difference in the challenge,
versus what we did in the course exercise, was it's in a sub-directory.
So you'll notice that we have
_css/styles.css because we had to resolve the path to the styles properly.
So, if yours didn't immediately resolve, make sure that that path matches mine.
Now the other thing that I want, needed you to do was explain the relationship of
this resource to the HTML file, and we do that using the rel attribute and
set its value to style sheet.
Now I know in the exercise earlier in the chapter, I put the rel first and
the href second.
Here I have them switched, the href's first, the rel's second.
Honestly, it doesn't matter which way you do it.
So if yours differs from mine, that is not a big deal, does not matter.
The only thing that does matter is you want to make sure that that's the same,
all the way throughout the site on every single page,
you want to have that link element linking to the external CSS styles sheet.
Now the next step was to set the background color of our pages
to that 663399, and then comment out to the side, the color name is,
Beccapurple for that one.
So what I wanted to do was go in styles.css and
that rule is at the very, very top of the page.
Now, for those of you who used background-color, that’s fine,
there’s nothing wrong with that.
I use the more generic background shorthand property notation, but
if you did background-color instead, that's fine.
Again, notice the syntax of the properties.
We have the property here, we have the colon that does the assignment, and
then we have the value that we want to pass along to that.
When that's over, we have the semicolon.
Now, I also mentioned that if you felt like doing this for
a little bit of extra credit, you could add the comment out to the side.
This is what's known as a CSS comment, and you can write notes to yourself or
other team members.
You can explain to people what's being done.
In this case here, I'm merely defining the name of the color which is Beccapurple.
All right, going back to our instructions.
The next thing we were going to do is float our images,
which is in the styles.css.
So what I'm going to do is scroll all the way down towards the bottom,
because that's where I believe I'm going to find these.
Yep, indeed, there they are.
And there is flowRight and flowLeft.
Now, I mentioned that you were going to do the float property.
And here we're going to float the flowRight one to the right, obviously, and
float the flowLeft one to the left.
Now, I made kind of a big deal about this in the challenge because,
we hadn't covered this property earlier in the chapter, we didn't cover it at all.
But again, as long as you know what the property name is, and
the values that you can set, the syntax remains the same.
So float was the property.
Then we used a colon to separate them, and in this case right was the value,
in this case left was the value, and then we have a semicolon.
Of course, writing this class, a selector was only part of it.
We had to actually apply the class in the HTML itself.
So going back into the intro.htm, if I scroll down to find that first image,
I can see that I have the class of flowRight applied to it.
It's very important that it's spelled correctly, spacing is correct, and
even capitalization matters.
So in this case, we're using camel case naming.
So, if you type that in and it didn't automatically apply,
make sure that the spelling is correct and that the syntax is exactly right.
And if I scroll down, I can find my bottom image, and
I can see that that has a class of flowLeft.
What that results in,
is within the browser you can see the text is now wrapping around this image,
it's aligned to the right and text is wrapping around it with flowRight,
flowLeft leaves it on the left and wraps the text around it on that side.
And the final task was to set some site wide typography.
So what we want to do was write a generic rule that sets the entire sites
default font size to 100%, and then uses Verdana as the font family as requested.
We also wanted to do fallbacks for Geneva and the default Sans Serif Family.
So if I look in the styles.css, here is how I accomplished that.
I'm going to go all the way up to the top of my Styles,
I'm going to find my body selector, and you can see there, I used a font rule.
I set the size to 100% and then I used Verdana, Geneva and
Sans Serif as my fallbacks, separating them by commas.
Now, if you did this a slightly different way, for example.
If you did font size, 100% and then underneath that font family Verdana,
Geneva, Sans Serif, that's fine, no problem.
If you applied it to something other than the body eh,
it might be a little bit of a problem.
By applying it to the body, we're applying it to that parent and
then any other child element, which would be all of our visual content.
So, if you're wanting to set something globally, the body tag or
the body element is a really good choice for that.
So make sure yours matches mine, as far as that goes,
even if the syntax doesn't match all 100%.
Now, if your results didn't match up with mine across the board,
don't get really frustrated.
Remember, CSS is a huge subject.
I mean, we have literally dozens of courses on CSS
in the lynda.com online training library.
The purpose of this chapter is simply to introduce you to CSS and
how it works with HTML.
So being able to write CSS is a critical skill for
any web designer, so you want to make sure that you dedicate time to
learning it as you seek to become more proficient at web design.