by Alan | 7:18 AM

Make a Box with HTML

make a box with html

So you want to know how to make a box with HTML. That’s a worthy pursuit. I learned to make a box with HTML because I wanted to place a border around some text, but I didn’t actually know that I was creating a box at the time. I just saw it as a border. Then I ran into an element known as box-shadow. You can use box-shadow to raise your box right off the page. When I found box-shadow, whatever resource I learned it from introduced me to the concept of the box-model. From that moment, any time I wanted to have a border or style around some text, I would understand that I was about to make a box with HTML.

I don’t know if it’s important to you to visualize your design, but it helped me for when I wanted to add a border or padding or set margins or use a different background color or color of the text. I can’t say that I told myself, “Time to make a box with HTML,” but I will say that I understood better what I was doing because of the visualization.

When you create a paragraph using the “p” between the angle brackets I discussed in this post, you actually make a box with HTML and place a bit of text in it. But there is more that you can do to style a box in HTML.

    Here are some of the elements you can use to make a box with HTML:

  • color:
  • background-color:
  • font-family:
  • font-size:
  • font-weight:
  • padding:
  • border:
  • box-shadow:

Notice the punctuation after each element of the box. A colon is used to separate the element from the value that will follow. In this inline style (style=”color:#000000;”), you see the element “color:” with the value “#000000;” The attribute:value; relationship must always be used.

I discussed this before in HTML in WordPress, 3 Things I Know You Need. Punctuation is very important for what you want to accomplish.

Let’s make a box with HTML!

I am going to attempt to recreate the big orange image above using HTML. I doubt I will be able to make it exactly the same, but I will show you the HTML in a screen shot. I want you to be able to make a box with HTML as well, so I will try to give you as much detail as necessary.

The
Box

Did we just make a box with HTML? Yes!

Okay, so there it is. It looks pretty similar to the box at the top of the post. It’s not perfect, but it’s good enough, right?

Wrong! If you are looking at this on a desktop or laptop, it probably looks alright. If you are on mobile, you are probably wondering if I know what the heck I’m doing. We will have to figure this out together.

Below is a screenshot of the text editor with the actual HTML styling. I will explain what each variable achieved in making the box.

make a box with html

Make a box with HTML: Here’s the explanation!

text-align:center;

You want, in this case, for the text to be aligned in the center of the box. There are other instances where you wouldn’t even use a text-align like if you were typing an entire paragraph and you just wanted it to look normal.

border:8px solid #ff9900;

This represents the border around the text. You have to test the parameters as you build it. I eyed this one up to the other and got as close as I could. When you make a box with HTML from scratch, you can create whatever size border you want. I usually go with a solid border, as well, but there are other kinds. I just don’t see the point. If you don’t include a border, the box still exist, though. The other parameters below will help you to understand.

font-family: calibri;

Calibri is as good as any other font. It’s what I used when I made the top image in Photoshop.

font-size:150px;

I had to “eye-up” this parameter as well. Nothing special about the size of the font. Just go with your taste for the style of your site.

font-weight:normal;

I tried “bold” as well, but it made the letters way to thick and stubby.

color:#ff9900;

This is self-explanatory. I use this color all the time. It’s one of my brand colors in all my websites. I think it’s good to have your own brand colors.

box-shadow:5px 5px 7px #555b60;

This parameter is a little trickier than the others. It makes the shadow. I will have to devote an entire post to the box-shadow. I hope you come back for it.

line-height:120px;

Line-height creates the space between “The” and “Box.” Normally, line-height adjusts the space between lines, no matter what the content.

margin-left:380px;

Without a left margin, the box would span the entire width of the page. If you use a right margin, the box would be positioned on the left side of the page.

padding:60px;

Padding creates the space between the words and the border. You have to test different values until you get the box you make with HTML just the way you like it.

margin-top:40px;

Top margin creates space between the box and the text above.

margin-bottom:40px;

Bottom margin creates space between the box and the text below.

Other things to know when you make a box with HTML:

This box was made with HTML, but boxes are just as easily made using simple CSS. I will be creating a post about that as well as soon as time permits.

There are more parameters that you can use when you make a box with HTML or CSS. Here’s a handy reference for you to use at WP3 Schools. This reference gives information in calculating the width and height of the box. I just showed you how to use margins to limit your box. It may be a better idea to use width and height when you make a box with HTML. I know the parameters for the image of “The Box.” I will try to reproduce it using what WP3 Schools shows you at the link above.

The
Box

I had to change a couple things like the font size and line-height. And I also had to add the “width:” and the “height:” to set the outer dimensions of the box.

Regardless, seeing how difficult it is to replicate the image, I would recommend using the box-model to frame paragraphs or other content that you want to highlight.

if you are looking to be more precise, you can set the width and height like I did in this final example. Then you can know how much pixel space you are working with. In this example, I made the width and height both 350 pixels. So then I can take into account the width of my border at 8 pixels and my padding at 60 pixels x 2 for the top and bottom padding and border. This equals 136 pixels which leaves me with 214 pixels of height space to position my words and choose my font-size. Or, you could just wing it like I did and completely mess it up.

So, I hope you enjoy going through this stuff. Leave me a comment below. If you need to adjust the comment box, pull down on the bottom right corner.

So, if you are ready to learn website building and affiliate marketing, I make a vow to be here to help. It’s always going to be a learning process. And Wealthy Affiliate is my suggestion. You can learn everything you need to know to make a business online, and I want to partner with you to help you with whatever questions you may have. I’m not going anywhere.

I hope to see you there and here!

Alan

Comments

John ツ

Hi Alan,
What a great website. I have always been interested in creating strange, useful and/or funny things with html coding and I love your Box example. I am going to play with that in a moment and see how nice I can make it. Thanks for sharing.
John

Jun 03.2017 | 08:10 am

    Alan

    Thanks John. It sounds like you are just like me. We both love to create things.

    Jun 03.2017 | 08:35 am

Craig

Thanks for this tutorial. I had been trying to do this for a while on my own and just couldn’t figure it out from the W3schools stuff or the CodeAcademy stuff. I am to say the least code illiterate! Your post was really helpful. Just curious, do you have any recommendations on a good way to identify other colors and their associated codes? Is there some easy way to find ‘blue’ for example?

Jun 03.2017 | 12:58 pm

    Alan

    You can actually put the word “blue” but you get whatever generic blue the browser would render. If you search Color Picker, Google has a nice option that pops up right at the top of the page. I recommend Photoshop just because it’s good to learn to make your own images. That’s an investment though. Hey thanks for stopping by hope to see you again sometime.

    Jun 03.2017 | 01:17 pm

Leave a Reply

Your email address will not be published. Required fields are marked *