tia's template tutorial!

A few useful terms examples and the like to help you understand the div style tags better.

I'll try to go through as many of these as possible.

If you need any more help or clarification, don't hesitate to ask! c:

=====

First off the very utmost basics-- learning about the borders, heights, widths and colors in order to create boxes that you can put things in! It's really, really simple.

How did I create this box? Easily! I wrote "width:100px;height:100px;border:1px solid black;background-color:#ff0000;"

Width and height control the size of your table. Border is what goes around it. "Border:1px" "border:10px" "border:25px" will all look different so don't be afraid to mess around and see what happens. You can also change the outline of the border with different types such as dashed and dotted. and even curve it!

How to add curved edges to your borders: border-radius:(value)px;
15px is a nice, round measurement. 100px will make a circle.

Writing outline:(value)px (type) (color); after the border code will add a second border.

Colors are super simple. All you have to do is find the appropriate hex. White is #ffffff. Hexes are generally 6 digits. Black is #000000!

Right up there ^ beside the grey buttons is a small rainbow circle-- click it and you can use it to choose whatever color you'd like and find the appropriate hex for it too!

=====

A bit of border fun

You can change how your border looks by using border-styles, grooves, ridges, and outsets. Simply replace where you would normally put solid/dotted/etc with one of these other choices and you too can have a sparkly new kind of border!

This is a border ridge. (border:5px ridge (color)

This is a border groove. (border:5px groove (color)

This is a border-style:double. Put border-width:(value) after it, then border-color(value)

This is a border ridge. (border:5px ridge (color)

This is a border outset. (border:5px outset (color)

This is a border inset. (Border:5px inset (color)

====

PADDING

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. [It basically adds x pixels of space between the words and the edges of the box it's contained in.]

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all padding at once.

Possible Values

Padding - Individual sides

In CSS, it is possible to specify different padding for different sides:

Example

Padding - Shorthand property

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.

The shorthand property for all the padding properties is "padding":

Example

The padding property can have from one to four values.

padding:25px 50px 75px;

padding:25px 50px;

padding:25px;

[/ul]
=====

MARGINS

Sometimes padding isn't the best option-- in these cases you can use margins instead. They work much the same as padding but they're useful in different ways.

this is padding:20px;

this is a margin:20px;

Padding spaces out what's around the words / borders / images while a margin, depending on where and how it's used, moves the words away from an image, or moves the box itself. It can even go outside of the set dimension of your "master" table. (In this example, that's the black box.) You can also use margins negatively (margin:-20px) to move it in different ways. The placement of your codes is really important, but a margin used in the right way is extremely useful. See the -70 margin is actually beneath the second one-- but because it's negative, it's able to appear higher than the other one. If the margin looks out of place, try adding margins to the right or left.

this is a margin:20px;

this is a margin:-70px;

=====

OVERFLOW

If you write "overflow:auto;", anything typed within that box will create a scroll box if it goes over the total height of the box.

For example, if you typed, [**div style=overflow:auto;width:200px;height:100px;text-align:justify;], if you type too much and there's more than 100px of words vertically, it'll fit it into a mini-page of its own. This right here is an example of it! Pretty neat, huh?

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <3

=====

IMAGES

So you want to put an image into your box? Easy-peasy! Just use this: [**img src="http://url"]



If the img is too big, just edit the values. [**img src="http://url" style="width=(value)px;height:(value)px;"] You can also add borders and all kinds of other effects if you wanted to.



It looks squished doesn't it? The simple way to fix that is to only edit the width-- it'll scale it down without messing up the image itself. However that may not work for you so really the best thing to do when you're going to use img src is to already know what size and width you want your img to be so you can work around it.



"**background-image:url(image url here);". It allows you to create unique headers for your character posts, or to add little other things here and there.

look i can write on this.

NOTE: [*div style="background-image:url(image url here); width: value; height:value;] allows you to tile the image.

=====

Transforming Text

There are some super cool things that you can do with your text. Line height, letter spacing, transform, and other such delights. Generally, it's pretty easy to understand. Line height changes... well, the height of your lines and letter spacing changes the space between each letter. Text-transform can turn your text into lower, or uppercase. Quite self-explanatory. You can easily change each to whatever size you want by using (value)px. For example, 10px, 20px, 30px, etc.

Line Height Examples

This is a line-height of 15px. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a line-height of 30px. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Letter Spacing Examples

Change the px to change your space between letters. Whoooa.

[/div]

10px

example

20px

example

[/ul]

Text transform examples

Type text-transform:(value), lowercase or uppercase. Obviously lowercase changes all of your text into lowercase letters and uppercase does the exact opposite. Easy peasy!

=====

Opacity

Opacity decides whether an image is solid or see-through. The more opacity, the more clear the image is. An opacity of 1.0 will make your box solid, whereas 0.1 will make it almost invisible. Everything past the div style with the opacity inside the class will be affected by it.

[/div][/div]