All right so it's time for another exercise here.
So this exercise is going to cover everything that we've talked about as far as SS selectors.
So we're not going to actually build any sort of complete cohesive Web site that's coming next.
We're going to make a little blog in the next exercise.
This one is more of a traditional exercise with a bunch of problems very short problems.
Basically I'm giving you a bunch of HMO it looks like this.
It doesn't really mean anything.
In fact all the text here is from a Web site called hipster ipsum.
It's it's just like a dorm ipsum except it's using hipster words like farm to table and locavore and
Portland and Williamsburg.
So it's just a bunch of words.
So the point is it doesn't matter what's here what does matter though is this file.
The CSSA file that I also gave you and it's empty.
Aside from a bunch of comments and these comments give you instructions for what you need to do.
So up top is the most important line style the age HTML elements according to the following instructions
do not alter the existing HVM else to do this right.
Only CSI s.
So that means don't touch this file.
This is here just as starter code for you.
This is the HVM.
You're going to do everything in C SS So you cannot go in here and add new ideas or add new classes
or add new elements.
Just keep it exactly how it is.
So the way that it works there are different problems.
So the first one gives the body element a background of this color.
We would just write the code into select the body and then give it a color like this.
So I'll give you that one for free.
I'm sure most of you could have done that.
Same goes for all of these so make all h ones make all age to do something make all ally elements one
note.
Some of these will ask you to use a property that we haven't actually covered yet and that's deliberate
.
I just want you to have some experience for some properties that we haven't explicitly talked about
in videos yet.
So in that case here's one.
Make all the paragraphs that are nested inside of divs 25 pixel fun and then in parentheses I give you
the code that you need so font size 25 x.
So there's a few more of those.
Here's one and here's one more make all checked checkboxes have a left margin of 50 pixels so you need
to use margin left 50 pixels and it's OK that you don't know exactly what it does that's coming in the
next few videos.
So one other note here.
These get a little bit harder as they go along.
So up top they start with just an element selector and then we talk about classes and ideas and then
we start to talk about some of those other selectors that we mentioned in the last video.
So make all of the paragraphs that are nested inside of divs make only inputs with type text.
Have a great background and then things like give the second paragraph inside the third div 5 pixel
white border.
So the good news is that all of the selectors that you need to use here can be found in the 30s CSSA
selectors.
You must memorize article and you can easily find them on line and we've covered most of them.
There are a few though that we didn't cover in the last video and those are under the bonus challenges
section.
So that includes things like making all checked checkboxes have a left margin so there's a way to select
the checked checkboxes.
Or here's another one.
Make the first letter of the element with special green and 100 pixel font size.
So there's a way to select just the first letter.
Make the H-1 elements color change to blue when hovered over and make a tag elements that have been
visited grey.
So remember a tag is a link and you've probably seen this before.
You can change or sites will change the color of a link that you've been to compared to a link that
you haven't been to before.
So there's a way of writing that would see assess.
So as always in the next video we're going to go over a solution.
Can it go bit by bit but I recommend you give this a shot go as far as you can try all of these bonuses
.
One thing I didn't mention here this one is slightly different.
Make the label elements all uppercase without changing the h t m l so the selector here is actually
simple we're just selecting all label elements but the property is a little challenging.
There is a way using C Ss to make something all uppercase without actually changing the text in the
HTML.
You can do it through C Ss just like you would change the color or the border.
You can change a property that will make it uppercase or lowercase.
All right so see in the next video