So we're getting there, we understand a little bit more about what this input element actually means.
And just so you know, this input element can be styled like any other HTML element.
So why don't we add some CSS to the styles.css sheet, to pretty it up a bit 🌸, to add some flair and style ✨.
And in order to do this, we're going to be using CSS selectors, flexbox, a bit of the box model.
Again, this is not, of course on CSS, but I hope you learn one or two things along the way.
So that's got our styles.css sheet, and let's start adding some cool, funky styles.
I just want to demarcate this area as well,
so later on we can find our code and sections easier.
And this is going to be the "INPUT TEXT STYLING" section.
Let me copy this, so its the same length, comment that all out. I'm just trying to structure our code here.
First thing I want to do, is I want to target that input element.
How do we do that?
Well, firstly, if we got our HTML here, we can see that we've given this whole wrapper a class of "form-row".
So what we can do, is we can obviously target this form-row,
and I want to use the flexbox system,
right, so let's say we wanted to display it as "flex",
flex-wrap, is wrap.
And I want to align-items
to the start.
So there we go,
I've just created that div, or that wrapper, as a flexbox item. And now what I want to do, is I want
to actually target that input itself.
So how can we do that 🤷🏽?
Well, firstly, we can go to its parent, and we know everything's wrapped in this form-row.
But right now, we still haven't got our input itself, have we?
So in order to do that, we can utilize a selector like this.
We want an input, and we want all the inputs that match "type" equal to "text".
And this is a new type of CSS selector called an attribute selector.
It only matches input elements that have a type attribute, of course, equal to text.
And this is so cool because it lets us specifically target text fields as opposed to radio buttons,
for example.
So there we go.
We can start styling this input element directly.
And what do we want it to look like?
Well, we can obviously change its border-radius because remember, we don't like squares.
We want it slightly rounded, and it's all these little details that really make a site stand out.
We save this, and there we go.
It looks pretty cool hey 🆒!
(sound effect: Oh, yeah)
Let's change the color.
And remember these are all the variables we defined at the very, very top of our HTML,
sorry, at the very top of our CSS file. If I scroll up here, in this ":root", we can see we've defined all
our variables. This is where we're using them.
I told you that they would be handy. Um, font-size,
let's change that.
And of course, we also defined our --input-text-size variable, there we go.
Remember, we said it was 14 pixels,
I think. If we scroll up,
yeah, 14 pixels.
So there we go, that's font-size. What else can we do?
Well, let's change the background-color.
And it's going to be very specific here. Let's just say rgb(255, 255, 255).
Um, let's give it a border
of 1px solid
rgb(186, 186, 190). You know what, I could have actually put this in a variable as well, I'm being a bit
lazy now.
There we go.
And I want to give it some padding, because it looks to bunched up right now.
There we go.
Now what I want to target, is I want to target that label, it's just a bit out of place.
So why don't we go ".form-row",
and of course, we want to target the label. For that, we can just effect
its margin-bottom.
It's got 20 pixels. And we're going to get there.
We're going to get there, don't worry.
You know what,
let me just, um, adjust the width quickly.
So let me grab the profile-header class,
and also the
profile-form, the one we're on,
and it's just redefined the width of, I don't know, 600 pixels.
That's better, and it all kind of fits, it's all looking good.
And remember, if we scroll to the top of this file here, we defined what width we want our widgets
to be?
That --widget-
width.
So let's utilize that now.
What I want to do, is I want to effect its width.
I wonder, you know what, we've actually done it here, input[type="text"],
so let's put width over here, as --widget-width.
There we go.
And in the label, we're not quite done, still not looking quite right.
So what I want to do, is I want to add some padding to the right.
And again, we defined a variable at the top
called --label-padding-right.
Look at that, it's starting to come together 😍.
I want to text-align this
to the right, how does that look?
And what I want to do, is I want to just affect its top margins to bring it down slightly.
Let's go 5 pixels.
There we go.
(sound effect: mission completed)
We have come an incredibly far way already in a short space of time.
So let me just stop ⛔ here.
We've literally done our first kind-of widget.
I'm going to start moving faster now as we go through.
And even this very simple example, we are already at 71 lines of CSS code.
So you can see how, you know, how big these files can become, very quickly.
But I hope you're having fun.
I hope you're learning a ton and we're going to get into this form a lot quicker going forward.
I know I'm starting slow, so I apologize to those of you who know this already.
But trust me, you've got to have solid foundations before we start getting more and more advanced. See you
in the next lecture 👋.