How to Create a Box in HTML
To beautify or beautify the appearance of a website of course you need HTML elements that can make this happen. One of the useful elements to beautify or make a website page neat is the box. You can take advantage of these elements to add tidiness to your website.
How to Create a Box in HTML
There are several variations of creating a box or boxes in HTML. And of course it’s quite easy. You only need to use CSS scripts. Immediately, see the explanation of how to create a box or boxes in the following HTML.
1. Creating a Simple Box
Creating a box in HTML is actually quite simple, you only need a CSS script. And in CSS you only need 3 main properties, namely, width, height, and background. Width to set the width of the box, height to set the height of the box, and background to set the background color of the box. Immediately, see the example CSS script below.
Based on the script above, it means that there will be 2 boxes with class selectors named box1 and box2. Then, each is set with a different width, height, and background color. Then, after writing the CSS script above, the next step is to enter the tag
Ini adalah box 1Ini adalah box 2Inside each div is given a class that corresponds to the previous CSS script. And the display of the results of the script above is as shown below. Good luck!
2. Creating a Box with a Border
In HTML you can not only create a simple box like the first method above, but you can also modify it to be more attractive, one of which is by adding a border to the box. The method is quite easy, you just need to add property borders inside the selector class you created. For example like the script below.
Well, in the class selector you can add a border property, then follow the border style you want, such as solid, dotted, dashed, double, groove, and so on. Then, specify the thickness of the border and the desired border color. Then, don’t forget to create a class inside the tag
Ini adalah box 1Ini adalah box 2And here are the results of the script above. Good luck!
3. Create a Box with a Border Radius
Besides you can add a border with various border styles on the box, you can also create a radius on your box. The radius here serves to make the corners of the box bend.
Usually the box has a sharp corner, but by adding a border radius the corner of the box becomes curved. The method is quite easy, you just need to add property border-radius on CSS scripts. Immediately, the following is an example of the script.
You can see in the example script above, there is a border-radius property with a number value using px units. This number determines how deep the curve in the corner of your box is, the larger the number, the deeper the curve in the corner of your box.
The following is the result of the display of some of the scripts above. Good luck!
4. Create a Responsive Box
If you want to make a responsive box or when the screen is enlarged or reduced the size remains the same, the previous method or the method above is not the answer. Because the methods above are only for making boxes without being concerned with responsive forms.
To make a responsive box there are additional properties that you must include in your CSS script. Immediately, the following is an example of the CSS script.
Well, here there is a difference in unit numbers. The first, second, and third ways use px units, but to make responsive the units used are % and here do not use the height property. The height property is replaced by using padding-bottom. However, the property is not included in the Square class selector, but uses :after. As seen in the script above.
Then, you can modify other properties as you wish. The content class selector is used to set the text in the box. Here is the script on the tag .
Ini box responsiveAnd below is the result of the script above. Now please try to enlarge and reduce your screen, whether the box follows that size or not. If you follow the screen size then you are successful, but if not, please try to look at the sample script above. Good luck!
So this article discusses how to make a box in HTML very easily. There are various variations that you can use. Please choose according to your needs. Hopefully this article can be helpful and useful for you. Thank you
The rain lover and coffee connoisseur who likes to sit in daydream while dreaming of his dreams that will come true.
Post a Comment for "How to Create a Box in HTML"