Welcome dear Depp to this new class, where we are going to learn a little more about CSS, I am very excited, because we are seeing interesting things that are going to help us. We have already talked about what a class is like how to put a class, how to put styles in CSS, how they are the types of selectors. But the time has come where we are going to talk, and we are going to see how to put more styles. So I have my Visual Studio code here, and I have the browser here. There is nothing because I want us.
To start I create a folder called CSS. And here I am going to create a new folder that well we are going to leave it that way better. We are going to leave it that way. And we are going to put an exclamation mark tap. And it creates a document for me, the basic structure of HTML.
We are going to put a h a where it will learn. And here it is still. They don't give me Lopez open lights' server city. He felt sorry for being green. Now, if he gives me, it was RO if I put it according to admiration there, it's. Ready I have my CSS I have my HTML, and now I'm going to anchor, the CSS in remember that in past videos, it teaches it with the link point is the FTC and called the cessation is ready up to here.
Everything is correct. We are going. Well, it is simple nothing to write home about. Now what we are going to do is start structuring I want us to do a very simple dynamic and I want us to let's imitate let's, try to imitate like a credit card.
We are going to make our section. And here in this, we are going to. Put a class called what do I know box because it makes our container, or we can container. No problem. We can put container. And it is happy inside let's, put a dip I save.
We are not going to see anything because we have not entered any data. We are going to put a dip where we have a h 5, where we say that it is a visa. Furthermore, we are going to make a visa after that. More has a credit card has a name goes to put a h 3 a. But before the name I think there is the number we are going to put it in number. And here. It is and then there it already has the name, which is Daniel sure, the credit card.
And we are going to app give him a smart that has the expiration date. We are going to give 24 12, that's, right? That's, fine, that's, fine.
But Daniels. You are ugly. What are we going to learn today? We are going to learn about the country about Marvin. We are going to learn about borders. Well, let's start with borders.
I have 2 a class. We are going to put another class to this where we are going to put text or info as you. Want there is no problem. We are going to call here container.
And we are going to start talking about borders. There are borders and rays borders. Then we are going to talk about the first border receives several parameters that we can put we are going to put a 3 pixels solid. And then a color. We are going to put in blue for the moment. So that we can see until there, you already know how to put a color to a border. There is no issue.
If you do not want to put it if we put solid for. Default has what is black so let's, leave it in blue I like it better in blur, and we're going to change it to make it look a little better after that we're going to talk about border radios. What is this radius border is to give a rounding to our borders and I know if you pay attention so far, it seems like this is very old, everything square, everything straight. So we are not going to put maybe 10 pixels.
This is already at the discretion. You can see that I put 50 pixels. Look, how 10 pixels are put it. Seems to me that it's correct it's, perfect, ready? Daniel is already on.
He has on orders, and it's very easy to make borders it's, extremely simple. Now that it's more important to learn we're going to talk about box Cato. It can be let's. Look at what this is to give our box a shadow to our container.
And there can be inside and outside, but in general it's attitudes and styles it's always outwards. So these residual parameters like what are these to move it towards the right this? And we are going. To put what I have here and let's, put it in a black color, and you can see they are not used I, put it a little smaller. And here it is ac. You can see that this is giving you there been this can modify the blues I can make it darker, or if I put more I make it lighter the less.
It is here I make it more opaque. But if I heard it more I, put it look at me, I shade that shadow that it gives me I, put it as a flower style, a little lighter. So for me, I like it to be like 15 in 15, the color seems good. To me, we can get the good Visual Studio colors that we can edit the color, and we can give it a RGB. And here it is, it doesn't look very good on the screen. Suddenly you can't, see it well, but already on my screen, it looks excellent.
So with all confidence, you can imitate that. Now, since we have seen edges, we are going to talk about martin and paint. It is important that you know, the difference between Martin and paint because this is going to help us. So before that I want to introduce you to a new. Sponsor that we have here been a little video, ready? I.
Hope you have seen this little or video, 30 downloads in your application where we are doing interesting things. And if you have a start-up and a small business, 30 is your best ally, ready? Let's continue.
We are going to talk about the difference between a plan for Deng and a margin ready considering this. We are going to give margin top if me and Marvin top 50 pixels. It happens. Look we're going to give it a little more 150 pixels, you'll, see what.
Happens here, it goes down very well. The top margin is a top margin. But what happened not even if I have it a top father of the same 150 pixels of this will stay here. Let's see that no not under the box under the inside. And this is the key. And the most important thing we must take into account when we talk about margin.
And when we talk about punk in margin gives me an outer space and the parent that gives me an inner space, I hope you take it into account I'm going to remove the for in a moment. We're going to leave the margin at 50 ready, but I've seen that many people say, ah, now, I want to give it a margin to the left Marvin. We are going to give it 50 pixels later, no I want to give it a margin to the right raid margin 50 pixels. And we already have three lines of code where he talks about marketing. Well, pay attention here because a supreme tip significant. There is no need to put all that, although if you need it, you have to do it.
But if we shorten the word just mark it? Well, if I only see it. In 50 look that it stayed the same because 50m I feel that 50 is applied everywhere up to the right down left.
But then if I put 50 if I doubled that by 4, but just like that, Daniel, because here he reads Marvin starts like a clock starts from the top to the right places. The 150 look at the top, if he has it and the others are the same. It means that that is top right.
Bottom left, of course, up to there, super simple. But if I want to give the same space above and below and the two on the sides, a spacing. There is a better way to do it with n. These two, the first parameter is for up and down, and the second parameter for the sides. Look here we are going to put 20 on the sides. Look here.
And here there are 20 here there are 50, so I. Hope you have taken it well into account and that something very simple, but that is going to help us right now. We have three lines of code. But now we only have one, it will be that complains works the same.
If then it duplicated style and pink, it works the same. It works. Extremely the same maybe from top to bottom, I don't want. It is not zero, and it gives me a space inside to and that's. It me to a spacing of 20 pixels on the sides, ready? I. Hope you've taken into account this tip that I know will help you, so we're going to continue with what we're following we already have.
We're going to give it a space above and below 10 pixels, 10 pixels. And now if we have a small card, we are going to change its color. I want us to change its color, I, don't like this blue. We are. Going to leave it a little more gray. And here we are already started I. Am I going to have a way of what we are doing.
So in this class, you have already learned to use Martin paint, and you have learned to handle borders, I hope you liked this class. See you in the next one where we are going to continue learning about how to put an image on a background image, and we are going to see more interesting things. But for the moment look that with a few lines of code, we were able to present something very nice. Where it will serve us when our personal portfolio or a project that we have in mind.
So no being more I, invite you to subscribe and see you in a next class.