00:06This video will demonstrate how to create columns in HTML and CSS.
00:12Sometimes it happens that you have a program with two objects that, by default, are programmed
00:16It is given in a single column, so that this is seen in two horizontally oriented columns.
00:21Let's remember the following: for this we will define what the box model is, and CSS programming.
00:26It is considered a box, the box model is divided into layers, so we have the first layer that
00:32The first layer is the content; the second layer is the padding, which separates the content layer.
00:42And from the border, the third layer is the border, which defines an edge of the element's outline,
00:59And finally, we have the margin layer, which separates the existing element from
01:04Other elements, once the theory is well defined, we will move on to the practical example; for this, from
01:10In a folder called "column", we create an HTML file; inside this, we type HTML, and we obtain...
01:17the programming, already in the title we typed, how to put columns in HTML,
01:31In the body we type a dick, inside this we type class equal to container,
01:36As we already mentioned, this is the content of the box model, which will modify everything.
01:47We type another dick and within this we write class equal to column 1, from the content we pass
01:52to another layer called column 1, is the logic in CSS,
02:02Within this layer, we write an H2 heading, called time 1, then we write
02:14an input, named time 1 type or time type or time, and we close the dick, we create another dick,
02:24that all this is in the container dick, in the second dick we write column 2,
02:29This is the logic in CSS; within this layer, we type.
02:40We wrote an H2 heading, called time 2,
02:47Next, we write an input, named time, type, or time, and close the dick.
03:00Now we link the HTML file with the CSS file, called style.css. If you are observant, you will see...
03:08style, allows writing style of 7, which allows linking the file, already in the CSS file, we write
03:15Asterisk, we open curly braces, we start from scratch. It is recommended to set the margin and padding to zero.
03:26Because `margin`, set to zero, removes the external margins. `padding`, set to zero, removes the internal margins.
03:33Also known as the space between the edge of the box and its contents, at startup. It is recommended
03:41Set the box size, and also the cleaning. Now let's go to the initial container.
03:50We open braces within this, write display flex, and observe how from a single column we obtain 2.
04:06Now we move to column 1, inside this we write padding 10 pixels,
04:14and a margin of 10, 10, 10 pixels. What the margin does is provide the space for
04:28this
04:28object or element to the other 10 up 10 down, to the 10 right. Now we move to column 2, within this
04:43We write padding of 10 pixels, and a margin of 10, 10, 10 pixels. What the margin does is
04:49give
04:49the space of this object or element to the other 10 up 10 down, to 10. And finally we center with
04:58Justify content center. And we get the expected result, now I will present a video, this is the
05:06Analogy of CSS programming, always from the outside in, you have everything if the video was helpful
05:11If you find this useful, don't forget to subscribe.
Comentarios