Welcome to “CreateYourDream” Website Building!
You are Going to 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.
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.
Keep an eye out for that post on the box-shadow.