CSS...

...how does that code stuff turn into that box thing?

After years of slaving away to CSS, I've picked up some knowledge about the code that goes into making pretty biographies.
Not much, barely anything, but a little but none the less.
Here, I've compacted some of what I know into a guide to make a damn sexy divider, or box thing.
Enjoy? Hope this helps!

The STARS (*) in the code are NOT to be used in a final product, they are to keep the code from actually working in examples so I can tell you what the code looks like.

Basics that might be good to know.

First off, if you're gonna start testing coding, on your new blog page make sure 'BBCode' is selected under 'Input Format', otherwise a lot of your code won't work.

• <*br /*> = (with the space). Makes your text go down a line, like when you press enter. Between text or anything, it
works
like
this. Useful quite a lot of the time when coding.

• <*small*> = makes text small. Pretty for bios, really. Don't forget you have to put a <*/small*> when you want the text to go back to normal.

• <*style*> = Literally the style/apperance of whatever you're making. If you wanted to make half the comments black, then you can do that with style (X'D) while addressing the odd comments.

<*style*>.comment.odd{background:#000000}<*/style*>

Go look, half of them are black now, I hope.

The box is alivveee.

Alright, let's get to the proper stuff now. We'll build up this box to do exactly what we want it to do to go on our sexy biography. I'll make a small, brown box come to life by using this code ...

<*div style="width: 100px; height: 100px; background: #594F3B; text-align:left"*>

all cats are grey

<*/div*>

Good Lord that box is freaking ugly. But it's still a box. So what piece of code contributed to what?

FIRST, let's look at the base/foundations.

<*div style="......"*>

This is where we tell the code we want to make a divider, and we specify what will go in it between the "'s.

"thing I'm referring to goes here: what the thing will do goes here;"

The ';' divides your instructions for the box, like a comma for tags on YouTube.

NOW we'll see what the components do.

Width & Height = Exactly what is says on the tin. The measurements are in 'px' (pixels), which is the same for pictures. This picture is 949px wide and 483px high.

width: 500px; height: 40px

Background = Basically what colour you want your anything to be. The colour code is six digits long and made up of letters and numbers. I use colour-picker websites to get my colour codes. As far as I know you always have to put a hashtag before them in the code for them to work.

background: #FF0000

Text-align = Whether the text you put in the box will be on the left, middle or right. The terms you can put here are LEFT, CENTER and RIGHT.

text-align: right

Now make a beautiful, sexy box.

Okay, since we understand how things work, I'll make a much prettier box now.

<*small*><*center*><*div style="width: 400px; height: 230px; background: #46468F; text-align:left; padding: 10px ; border: 2px solid #8A8AED; overflow: hidden;"*><*div style="width:390px;height:190px;padding:20px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali.... (etc) <*br /*>

<*/div*>
<*/div*><*/center*><*/small*>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

So this one is surely much better than the other. But there are actually two boxes here- and that's what give it that pretty invisible scroll bar that so many sexy bios have!

All these new toys to play with...

Padding = See how in our first brown box the text was at the border? Using the 'padding' instruction gives a nice, neat space between the border and the writing. The amount of padding is measured in px. The more px, the more space between those two.

padding: 10px

Border = The outline a divider has. Very simple, aside from one thing - when adressing a border you say - FIRST the 'px' amount (thickness) SECOND whether it's SOLID or DOTTED and THIRD the colour.

border: 4px dotted #ffffff

Overflow = This guy has a funny and hard to make out name, but basically it means the scroll bar. I don't know all the terms possible for this option but I do know NONE, AUTO and HIDDEN. None means none, hidden means not seen and auto is just a normal scroll bar.

overflow: auto

Okay but how did you make that invisible scroll bar?

Basically, it was like this...

(BOX 1 - overflow is hidden)
(BOX 2 - overflow is auto, background is none and width/height works with BOX 1 to hide the scroll bar)

text

(/BOX 1)(/BOX 2)

... now you know how to make a box pretty for your biography. You can make cool things like this!

Quis autem vel eum iure reprehenderit qui in.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

[*color=orange*]<*small*><*center*>
<*div style="width: 300px; height: 230px; background: #9D83D4; text-align:center; padding: 10px ; border: 1px solid #DECFAB; overflow: hidden;"*><*center*>[*img*]http://31.media.tumblr.com/1c0f103b4ff91fefa298cdc229af09ea/tumblr_mexh45xhXK1rm6jd7o1_r2_250.png[*/img*]
Quis autem vel eum iure reprehenderit qui in.

<*div style="width: 600px; height: 230px; background: #9D83D4; text-align:left; padding: 10px ; border: 1px solid #DECFAB; overflow: hidden;"*><*div style="width:590px;height:190px;padding:20px;overflow:auto;"*>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<*br /*>

<*/div*>
<*/div*><*/center*><*/small*>[*/color*]

Now go and do great things with boxes, friend.
All codes here are free to use, but a thanks should always be in place because this took quite a while to make.

Thanks for reading, and I hope this was of some use to you! ♥

Update 1;

opacity: 0.5

Opacity = mirage boxes! ;D Edit the value (0.0 - 1.0) to make your box more or less see-through.