Hello and welcome to this lecture in this lecture we are going to create the styling for our quiz using
C S S.
So this is the hasty e-mail for the quiz.
So we're going to use some of the I.D. and classes defined for these safety MLK documents to style the
quiz.
So let me switch to my CSM.
So this is the blanks here says we don't need that.
That was just a label so that time know what file this is.
So this is where I will be creating the styling for the quiz.
The way it's going to work.
So that this lecture doesn't take too much time.
I will rewrite the code add the code and then explain it.
So you're good enough to watch me type all the time.
I have added some code here.
Line 1 basically I'm using the import.
Basically what this is I am going to use the font font called Rocket font family called Rocket and I'm
getting that from Google.
All right.
So that's where I'm saying here get this font from Google so you have to import it before you can use
it.
So that's what I've done in line one line two is the selector that I'm going to be styling so basically
saying the H1 which is the heading these are the styling I am applying to it the font family I'll be
using the rocket from Google.
And I've also got a substitute font called serif.
So if the rocket is not available it will default to the second option.
Always good to specify more than one font when you are declaring a font family property line four is
a text line property where I want the text to be centered land five is a color set and fuse a hex value
there.
Line 6 is basically the size of the font or the text for that.
Page 1 selector.
I have added another chunk of code from line eight to line twenty one line eight.
It's a new l selector which means on ordered list.
So the styling I'm giving it is that I don't want any style that is no bullets nothing.
That's what that means list style property.
I've said that to none.
So there'll be no numbering or no bullets for that on order list items line 11 to 15 is the actual l
I list which is the this you use the airline to list the item.
All right.
So the airline selector specified a font family of rocket and serif font size of 2 m.
You can use M or you can use pixels to color.
I've said that to a hex value line 16 to 20 is the input selector where that type is a radio.
So when you select the questions you need to select which of the radio buttons.
So I've set that to set the properties on this one the border.
I've set it to 0 pixels the width 20 pixels the height again I've used MS here so you can use pixels
if you like but you can if you it depends on which ones you are comfortable with m of pixels you can
use either.
I have had some more styling here from line 23 to 35 so I'll start with line 23 to 25 years so that
the amusing the p selector here the piece selectors were all styling and the styling of applied to his
phone family is going to use rocket and serif will be the substitute front line 26 is a comment that's
how you specify a comment in CSF so that line of code will be ignored because it is a comment line.
Twenty seven is a class.
So this is a class called quiz container.
So the the list and the styling from 28 to 34 given it and background color using the hex value the
border radials property of set to eight pixels border radios is what gives the air like a rounded corner
the width I've sent I've set to seventy five percent so it would be seven typed seventy five percent
of the parent container so whatever container the the queen continues in it will take 75 percent of
the width of that container that's what that means.
Again you could use pixels if you are more comfortable with pixels.
Line 31 is a margin of safety to auto which means it will automatically sent the Queen's container.
OK.
Auto means we will center it on the page.
That's what it means.
Margin from the top that means from the top.
I wanted to move down a hundred and ninety pixels.
The padding margin is the space outside while padding is the space inside the element.
So I've set them to 190 pixels have five pixels respectively.
The position I've set the position to relative
I have had dead so more properties and their values line 38 added a class cord next button so the styling
I have used for the next both in class starkly line 39 which is a border radius.
I've said that 2 6 pixels with one hundred and fifty pixels height 40 pixels text a line I've said it
to center.
I want to put into the center background color offset and use a hex value again.
You can use the color name if you know the color name by head values OK as well.
Here.
Line 44 is just a comment.
So that code will be ignored.
Line 45 is a color which refers to the color of the actual text.
46 is the font family.
Again I'm using rocket and serif 47 font weight.
It refers to half thick well how thick the font would be so I've said that to bold position.
I've said it to a relative margin to auto padding from the top 20 pixels.
OK I can get rid of 44 I was using that for two tests.
If you think so I can get rid of that I don't need that.
Now I have added on another class which is which is called Question Does from line 51 to 6 to 1 so I've
already gone through some of these properties with previous styling on this file so I'm not gonna go
too deep because I'll just be repeating myself.
So a lot of the styling we have used before.
So it's just the same theme height weight and so on.
So I'm not gonna run through that because I've done that with the other class I have added on other
classes chord with message and these are the styling I've given that class.
Again I'm not going to run through it because the same thing like I've done before with the other classes
so basic.
The only difference here here I've not used a hex value.
I've used the actual color name
I have added a couple more classes lines 72 to 75 is the choice list class.
So that's obviously where you make your selection for the quiz answers.
So again similar thing.
The only difference here the font family is slightly different.
I've used courier and serif color.
I've said to blue violet again 77 to 86.
There's another class called result and the values properties of values of specified are self explanatory
is a similar to what we've called through before.
In this I in this lecture for this fall.
Okay.
So again I.
Ideally we'd hide everything we've mentioned before but if there's any part of this lecture you're not
familiar with or if you're not sure by any of this time.
Please feel free to let me know I'll be more than happy to explain further.
So we just save this document and then we can review our page and see what the document looks like after
the styling have been applied.
So this is what the page looks like a moment but when we are doing our javascript series we're going
to use javascript to make it more interactive.
So that's it for this lecture.
Thanks for watching.
Bye for now.