references for tia

SPOILER: Click to show

{Spoiler}

onyx

helvetica

script/mistral

impact

l Eucrosia UPC

Estrangelo Edessa

www.ampsoft.net/webdesign-l/WindowsMacFonts.html

[attr="class","hum"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.

[newclass=.hum]height:190px;width:290px;background-color:#f8f8f8;margin:-0px 0px 0px -0px;font-size:10px;line-height:9px;color:#000000;overflow:auto;text-align:justify;padding:5px;opacity:0;-webkit-transition: all .4s linear;-moz-transition: all .4s linear;-ms-transition: all .4s linear;-o-transition: all .4s linear;transition: all .4s linear;[/newclass][newclass=.hum::-webkit-scrollbar]width:0px;[/newclass][newclass=.hum::-webkit-scrollbar-track]background-color:#f8f8f8;[/newclass][newclass=.hum::-webkit-scrollbar-thumb]background-color:#f8f8f8;[/newclass][newclass=.hum:hover]opacity:1;-webkit-transition: all .4s linear;-moz-transition: all .4s linear;-ms-transition: all .4s linear;-o-transition: all .4s linear;transition: all .4s linear;[/newclass]

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!

=====

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.

[/div][/div]
[/div]