I am super excited to get into styling our radio buttons, but it does add a bit of complexity.
Why?
Well, for a few reasons.
Firstly, we are introducing new elements to HTML and that of course, just adds a little bit more
complexity. The other reason that it adds complexity is we've introduced <fieldset> and <legend> elements. And their
default styling is, well, rather ugly.
So we have to remove that default styling in order to apply our own.
And thirdly, at the time of this video, the fieldset element does not support flexbox.
I know, weird right?
Who would have thought.
But, don't worry, we're going to be using floats.
There ... there's always a way.
If there's a will, there's a way.
And then the other thing I just want you to note when we start styling this, is that we have given this
entire <fieldset> a different class name to our other rows.
Remember, we had a form-row class?
Well, now we've got a radio-form-row class...
so it's going to be styled completely different to our text input boxes.
So let me stop babbling on, let's jump into the console quickly and let's start coding. See you now.
All right, here we go.
I've just come from outside, and you saw how beautiful that sunshine was, it really was cool.
But I want to be here.
I want to be teaching you, and I'm so glad you're with me.
And let's start styling this radio button.
As you can see on the screen behind me, it is pretty average.
The browser has applied default styling to the fieldset and legend elements, and they don't look very
pleasant.
So that's what we're going to do in this lecture.
So let's get into it...
let's jump to our IDE quickly.
OK, so we're in our styles.css sheet. All we want to do now start a new heading.
We're not dealing with input
text styling anymore, are
we?
So I want to scroll down, and I want to create a new heading called "Radio Button Styling".
It's always good to label your code, by the way. And what is the first step? Well, the first step is let's
remove the default styling of that fieldset element.
And how do we do that?
Well, if we got our HTML file, we've given our entire radio button a class of "radio-form-row", so
we can just target that...
radio-form-row. And all we want to do here, is we want to, let's get rid of the default styling for
fieldset...
and legend elements. That's all we're doing.
And in order to do that, let's just get rid of all the borders and I just want to add some margin to
the bottom.
And we've defined a variable, remember those CSS variables at the top of the file, called "--margin-bottom".
To remind you, if I scroll to the top of the file, there it is, 10 pixels.
Don't get lost.
It's all we're doing. If we save this, and we go to our browser and we refresh ... (sad trombone) Why is it not working?
Because, I put "now" instead of "row", I knew something was wrong.
If we go to our browser now and...
you can see there, all the borders have been removed (sound yay), and now we can start sprucing this up quite
a bit.
Let's go back to our file here.
OK, what should we style next?
Well, firstly, let me put the browser and the text editor side by side,so you know what's going on.
There we go.
Well, why don't we deal with the labels, the "no" and the...
"yes". If we go to our HTML,
we've given those labels a class of "radio-label".
Can you see it?
So all we need to do in our file here, is we always start with the parent element, and that has a class of
radio-form-row, and we want to target the label which we've given a class of radio-label.
And what we want to do here, is we just want to change the font-size because we want all our labels to
be consistent. And we've defined a CSS variable for that.
The second thing I want to do is just add some padding because they are just way too close together.
20, 0 and 4 should do it.
It's already starting to look good, right?
The next thing I want to do, is I want to deal with our legend element. Right now,
that legend is a block level element, which is why it's on its own line.
So we need to kind of style there to make it look better.
Using the same logic as above,
let's grab our element, our wrapper element, which has a class of radio-form-row, and let's target that
legend element.
First thing I want to do, is I want to define its width.
Don't get lost in the detail, this is what I'm doing. If we inspect this,
we know that these labels here, name and email, they have a set width, but this "Allow push notifications" is
stretching across the entire page...
I don't want that to happen.
We need to give this a set width.
So that's all I'm doing in our
code now.
So let's give it a width.
And again, we've defined a variable at the top.
OK, if we go back to your browser, it's not going to look any different.
Yes, we've given it a width, but it's still block scoped - it's still taking up an entire row.
But at least now we can see it's got a width of 200 pixels, which is the same as our others...
which is exactly what we wanted.
The next thing, though, we need to do is we need to give it some padding.
Can you notice with name...
we've got 20px padding to the right? On email...
we've got 20px of padding to the right?
But with this, we've got no padding.
So of course, let's add some padding.
Luckily for us, we've also defined a variable
called "--label-padding-right".
Save that, go to our browser and there we go. It's added some padding, how cool! Then, as you'll notice with this name
and email, we've floated that text to the right, or we've aligned it to the right.
That's exactly what I want to do now.
So let's go here, text-align...
right.
Save that, open our browser, and now its pushed it all the way to the right, but still on its own row ðŸ˜–.
What is going on?
Well, this is what I mentioned to you when I was outside ... the <fieldset>
and the <legend> elements do not support flexbox...
and that's why we have to use another CSS property called float.
Don't panic ðŸ˜¬.
It's super, super easy.
Let me show you how it works.
Let me actually just get rid of this.
There we go...
let's go to our IDE.
All we have to do is add a CSS float property, and we want to specify that this should float to the
left. And ... boom ðŸ’¥.
How awesome is this? (sound effect: mission completed)
Whew. Breath.
Take a step back.
Understand that you've actually learned quite a lot in a very short space of time.
We've done a text input box with the name.
We've done a text email box with the email, and now we've done a radio button.
Pretty, pretty cool.
And we are not yet finished with this form.
Remember, this first section is not for you to understand exactly what's going on behind the scenes...
that's in upcoming stations, it's just to get you a feel for how we can start building forms.
And it'll help you just grasp certain concepts later when we get more advanced.
Hope you're having fun.
Hope you stay motivated...
and I'll see you in the next lecture.