by Alan | 6:30 PM

Welcome to “CreateYourDream” Website Building!

You are Going to Make a Box with CSS

make a box with css

Before you go any further with your aspiration to make a box with CSS, you will have to have the ability to add additional CSS through your “Customize” function. Or, I prefer being able to add custom CSS to my post while I am writing so that I don’t have to switch tabs and open the site customization and mess with that.

I wrote a post about how to install a plugin called WP Add Custom CSS. Click here to access that post if you need assistance with the install. Then you can be on your way to make a box with CSS. If you want some background, I also wrote a similar post about how to make a box with HTML.

The two processes are different but also very similar. I encourage you to understand both ways, to make a box with CSS and/or HTML so that you increase your understanding and develop your skill set.

Make a Box with CSS – Starting with a “Class” or “ID”

Okay, you can use a class selector or an ID selector to make a box with CSS. I can show you either, but you should just know that when you choose a class, you use a period. When you choose an ID, you use a hashtag, otherwise known as a number sign.

A Great Way to Remember the Difference

Just remember the following:

If you are in school, you don’t miss CLASS (period “.”). When you get a license to drive, the state gives you an ID (number “#”). I made this one up. Aren’t you proud of me?

You should understand the fundamental difference between class and id. Class is used to select or describe a “class” of something and can be used on multiple items in the same place. You use ID to “identify” a particular and singular item. So, class can be used in exchange of ID, but ID cannot do what class can do. If you have any questions, I hope this example clears it up. If not, please ask me in the comments at the end.

Make a box with CSS using “Class”

Now, I know you have class. I can just sense it. Now, you are going to use your class as a selector to make a box with CSS. So, classy ladies and gentlemen, below is the exact set up with the proper punctuation necessary to complete this task every single time without fail. (Using the words from the top image on this page). Notice the angle brackets, the lower case “p”, the equal sign, the quotation marks and the closing tag with a slash and a lower case “p”. The actual word that makes the selector can be whatever you choose. I chose makebox because that is what we are doing. We are going to make a box with CSS.

make a box with css

This line is the only line you would have to type in text editor of your WordPress post. The Custom CSS box is where you would really add all the parameters to make a box with CSS.

Have a little fun with it!

Make a Box with CSS – Do a little guesswork

Okay, I am going to just guess what to place in my Custom CSS box to make the box you see at the top of the page. After I screw it all up (hopefully not) you and I can make some adjustments.

Here’s what I guessed:

Here’s what I got:

A prettier box
with more words
in it this time

It’s really not that bad considering I didn’t know what I would be seeing. I’ve done way worse, but this post isn’t about me. You are the one trying to figure out how to make a box with CSS.

Changes to the CSS properties

Make a Box with CSS – Clean it up, dude!

Okay, so I would decrease the font-size so the words will fit in the box. I would increase the line-height so the spaces between the lines widen. Then I would try to center the words by increasing the padding-top. The border looks too thick as well. Oh, and I forgot the box-shadow. That’s the next post I will write as well. I didn’t plan it, but I’m glad it happened that way. I would add “box-shadow:5px 5px 7px #555b60;” to the Custom CSS inside the squiggly brackets and get a shadow to fall from the box.

BRB! I’m gonna make those changes.

It took me a couple minutes, but I bet you didn’t feel a thing. Here’s what I got when I added the box-shadow, lowered the border to “5”, increased the “padding-top:120px;” lowered the font-size to 32 pixels and increased the line-height to 35 pixels. Not a whole lot of work.

A prettier box
with more words
in it this time

Let me give you a purpose for this!

Make a box with CSS – Why?

I’ll be honest, this went a little smoother than when I showed you how to make a box with HTML. CSS rocks, but you have to remember the “syntax” otherwise known as punctuation and whether to capitalize or not.

There’s a lot of advanced stuff you can do with CSS and HTML. I don’t know that stuff. For real, I just want to help beginners get to where they have a working knowledge of some ways to design their sites.

And I want people to feel comfortable joining Wealthy Affiliate, even as a starter member for free. If you have the inkling that you might want to take a risk and learn a little about how to make a business online, join me in the quest. I will get to a place where I make money with online business. I don’t want to project how much money, but I’m not stopping until I can’t move my fingers to type. By then, someone better have made a good voice recognition software program, cause I will use it.

Anyway, I hope to see you here and there!

Keep an eye out for that post on the box-shadow.

God bless!

Alan

Comments

Laurie

Ok, for the CSS and HTML illiterate like me.. This is COOL but HOW?

Jun 03.2017 | 06:52 pm

    Alan

    I would be happy to be of service. I appreciate you stopping by. Let me know if you need anything and I will try to figure it out.

    Jun 03.2017 | 07:07 pm

Carol Dutschke

I’m not sure what the box is for.

Jun 03.2017 | 07:42 pm

    Alan

    Thank you. Great point. A box can be used to make information you want people to see be more visible. You can decorate pages with them and put famous quotes inside them. For design purposes, it’s just good to know that the capability exists so that when you get a spark creativity you can use the Box to do whatever. As you learn things your own mind will come up with ideas on how to use them. And for me that is the coolest part of all of it. My mind gets to create stuff. I hope this helps and thank you for your comment.

    Jun 03.2017 | 07:48 pm

Robert Prescott

That was a great tutorial Alan on how to use CSS for making a box for your WordPress website. I can think of a few things that one would want to create their own box for. In addition to adding it as an image, I think a great way to use one would be as a Call to Action at the end of a post, provided you can add a clickable link to it. Is that possible?

Jun 04.2017 | 12:33 am

    Alan

    Robert, thanks for the comment, Sir. You can definitely add a custom link. That’s a very great idea man. CSS just decorates the boxes that exist around everything but can’t be seen until you set the parameters. Would be useful for landing page calls to action as well. There are a bunch of other parameters you can adjust as well. Thanks again!

    Jun 04.2017 | 12:48 am

Leave a Reply

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