properties
There's a wide range of things that can go inside the "style" tag. You can add some of these to other bits of code such as links or images. Here's a short glossary of the things I use the most; it is by no means a complete list nor is it completely accurate. Check
this site for a more complete list.
color- changes the color of the text within a div.
CONTENT
[div style="color:red;"] CONTENT [/div]font-family- changes the font of the text within a div.
- for a list of fonts that work on proboards, see below post.
CONTENT
[div style="font-family: arial;"] CONTENT [/div]font-size- changes the size of the font within a div.
- you can use px, em, pt, or percent.
CONTENT
[div style="font-size: 10px;"] CONTENT [/div]background- adds a color or image to the background of a div.
- takes web-safe color names and hexidecimal codes.
CONTENT
CONTENT
[div style="background: blue;"] CONTENT [/div][div style="background:url('IMAGE URL HERE');"] CONTENT [/div]border- adds a border to a div or image.
- requires pixel width, style, and color.
- check
here for a list of styles.
CONTENT
[div style="border: 1px dotted #ffffff;"] CONTENT [/div]variations:border-top: adds a border to only the top of the element.
border-left: etc.
border-right: etc.
border-bottom: etc.
border-radius- rounds the corners of an image or div by a number of pixels.
- note that if you are using it on a div, you should add a background color so it'll show up.
CONTENT
[div style="border-radius: 10px;"] CONTENT [/div][img src="http://static.tumblr.com/900b7641b114e7be0996315cb0206b7a/ruogwj5/w1zn3kir4/tumblr_static_barack_obama.png" style="border-radius: 100px;"]variations:border-top-right: changes only the top-right corner.
border-top-left: etc.
border-bottom-right: etc.
border-bottom-left: etc.
there's also a shorthand version of the above that does the same thing:border-radius: (top left) (top right) (bottom right) (bottom left);
border-radius: 50px 50px 0px 0px;
this example will round the top two corners but leave the bottom two the same.text-decoration- adds a line over the text.
- underline: puts a line under the text.
- overline: puts a line over the text.
- line-through: puts a line through the text.
- none: removes lines. useful if you want to remove underlines from links.
CONTENT
LINK NAME [div style="text-decoration: underline;"] CONTENT [/div][a href="URL HERE" style="text-decoration: none;"] LINK NAME [//a]letter-spacing- spaces letters by a certain pixel amount.
- can use positive or negative numbers.
CONTENT
[div style="letter-spacing: 2px;"] CONTENT [/div]font-weight- changes the thickness of your text.
- use this to make something bold/unbold.
- comes in four values: lighter, normal, bold, bolder.
CONTENT
[div style="font-weight: bolder;"] CONTENT [/div]width / height- sets a width or height for a div.
- can use percent and pixels.
CONTENT
[div style="width: 500px; height: 20px;"] CONTENT [/div]float- similar to wrap.
- floats an image or div to either the right or left of an element.
CONTENT
[div style="float: left;"] CONTENT [/div][img src="URL" style="float: right;"]text-shadow- adds a shadow underneath text.
- distance from the left first, distance from the top after
CONTENT
[div style="text-shadow:2px 2px black;"]CONTENT[/div]text-transform- changes text capitalization.
- comes in lowercase, uppercase, and capitalize.
- this overrides any capitalization inside the div that you put manually.
content
[div style="text-transform: uppercase;"]content[/div]margin & paddingmargin and padding is essential to positioning your div and the stuff inside it. think of your div as a box.
MARGIN is comparable to adding cushions
OUTSIDE the box.
PADDING is comparable to adding cushions
INSIDE the box.
both margin and padding can be separated into different sides.
margin-top: adds space above the div.
also: margin-right, margin-left, margin-bottom
padding-top: adds space at the top of the div.
also: padding-right, padding-left, padding-bottom
CONTENT
[div style="margin-left: 40px; padding-top: 50px;"] CONTENT [/div]
