I will share the knowledge I have learned about CSS, this may be the method that I think is suitable for beginners if you want to learn about CSS. I think CSS is a well-organized set of “BOXES”, That’s It.
If your willingness to learn is below 80%, I suggest you leave this article, because it takes enough seriousness.
Day 1 we will learn about something basic about CSS, namely “Box – Modeling”.
box modeling css
Box-Modeling structure in CSS
Take a look at the picture above, there is a position of MARGIN – BORDER – PADDING – CONTENT.
Item: The term I define, Item consists of Padding and Content,
Margins: Out of the box/Item, such as the void out of the box/Item,
Border: Out of box/Item, but like sticking with Padding and Content (Item’s edge),
Padding: Inside the box/Item, like a vacuum inside the box/Item,
Content: In the box/Item, this is just the contents, such as TEXT, IMAGE/IMAGE, VIDEO, or whatever you enter.
You can see it turns out that a text object, image, or video that you enter in the HTML code is coated with several PROPERTIES as I have explained.
Enough for theory, let’s get practice .
follow this steps, to make a box from a very scratch.
1) create a folder named “hari1” , inside it create an empty file called “index.html” ,
2) open the index.html file using “Notepad”, we will create a box-model using this HTML file.
3) create a basic outline in the “index.html” file as below and a css file with the name style.css.
Document
4) Now that we’ve created the basic outline, let’s create a “container” for “Item” /box-model
Document
5) Try running the file in a browser. Then nothing will be seen.
6) Now let’s create properties on the boxModel such as height, width, and color, write them in the style.css file.
.boxModel{
/* create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */
}
7) after that try to run it, it looks like below
box model 1
boxModel already visible
as we learned earlier that an “Item” has Margin, Border, Padding, and Content. The red color here covers the part of the “Item”(Padding + Content) only.
the question,
Why isn’t the square sticking to the top and left corner of the screen? and like there’s an empty space there?
The answer is easy, there is a margin.
but whose margin? “boxModel”?
Of course not, because we didn’t set the “boxModel” margin value before, meaning the “Body” margin is set by default from the browser settings.
8) Let’s prove that Margin really exists, how do we remove the margin by setting its value to 0.
body{
/* create selector body / margins:0; / set margin value to 0/ } .boxModel{ / create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */
}
try running it again, then it looks like this.
box model 2
lost margin
and that margin is really there, it’s just not visible.
9) Now let’s set the margins on the boxModel.
body{
/* create selector body / margins:0; / set margin value to 0/ } .boxModel{ margins:50px; / set margin value */
/* create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */
}
then run again, then the margins on the boxModel will be visible.
box model 3
margin boxModel set to 50px
10) Next, let’s make the Border reveal its shape.
body{
/* create selector body / margins:0; / set margin value to 0/ } .boxModel{ border: 5px solid black; / set the border properties value, border has 3 parameters(bold, style, color)*/
margins:50px; /* set margin value */
/* create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */
}
please run again, then it will look like this.
box model 4
the border shows its shape
11) Now let’s differentiate between Padding and Content. By giving the boxModel text and setting the padding value.
In conclusion,
Margin, Border, Padding, and Content are one unit of a box-model that you create using CSS, so don’t forget any of its properties, or you’ll get into trouble when creating a template or anything related to CSS.