Popular tags :
-- : -- : --

blog post Report Post with Style

Posted on Feb 1, 2010 - 6:30 by Bruce
  • Edited By Bruce on Feb 3, 2010 - 15:36
Uvumi allows you to mark up your bios and blogs using many (but not all) standard HTML tags. The basics are covered in my tutorial: Post Markup on Uvumi.

This tutorial goes into greater depth on how to use HTML tags, and how to add style properties to those tags. Probably the most useful tags that you might want to add style to are <h1>, <p>, and <span>.

What is style?

A style is a property you can add inside an HTML tag - one Uvumi, probably the <p>, <span>, or <h1> tags. The general form to add one style property looks like this: <html-tag style="property:value">

For example, if you want the color of some text to look red, the style attribute would look like this: style="color:red"

The style property is "color". The value of the color is "red". Notice there is a colon in between color and red, not an equal sign, and there are no extra quote marks. (There are many ways to specify color - a Google search for "html color codes" will give you plenty of help.)

Now, you just insert this into an HTML tag, such as the < span > tag. The span tag is commonly used to apply some style to a block of text. Remember to close the tag when you are through or you will have more red text than you bargained for!

For example, <span style="color:red">This text is red!</span> gives you: This text is red!

You can also apply more than one property in the style attribute. Place a semicolon after your first property and value, and add another. So, we can make large, bold, green text with a yellow background using this tag:

<span style="font-size:large;font-weight:bold;color:blue;background-color:yellow">Large, bold, blue</span> gives:
Large, bold, blue

Style properties you can use

The following list of allowed properties was furnished by Uvumi. Thanks!
Note: Values listed are not necessarily comprehensive - but commonly used ones.

Text Properties

text-decoration: Adds decoration to text
Values: none, underline, overline, line-through, blink
text-align: Aligns the text in an element
Values: left, right, center, justify
color: Color of text in an element
Values: color name (e.g., red, blue), #XXXXXX (rgb hex), others
font-size: font size of text.
Values: nn% - percent of default (recommended for Uvumi); also size such as small, medium, large; or points (00pt)
font-weight: weight of font
Values: normal, bold, bolder, lighter, 100, 200, ..., 900
font-style: font style
Values: normal, italic, oblique
Values: usual colors

Padding and Border Properties

border: width, style, color of all 4 borders
border-top, border-bottom, border-left, border-right: of one border side
Values: width - size, usually in px (e.g., 4px); style - none, dotted, dashed, solid, double, groove, ridge, inset, outset; color: usual for color
padding: Sets all padding properties in one declaration (top, right, bottom, left)
padding-top, padding-left, padding-bottom, padding-right: Sets padding on specific side
Values: pixels (e.g., 25px)

Positioning Properties

float: Specifies how a < p > or < span > should float. A floated element will move as far to the left or right as it can.
Values: left, right
clear: Clears previous float properties to get back to default display
Values: both

Two Column Layout

This is column 1. Enter each
line on a separate line in
the edit window. Width is
determined by what you type.

This is the second column. We've
added a background, and made the
font bold and blue.

The corresponding code:

<h1 style="border-bottom:2pt solid #FFFF00;">Two Column Layout</h1>

<p style="float:left;font-size:125%;color:#101010;background-color:#44cc44;padding-left:25px;padding-right:25px;">This is column 1. Enter each
line on a separate line in
the edit window. Width is
determined by what you type.</p><p style="float:right;background-color:#8888ff;padding:10pt;border:2pt solid #000088;font-weight:bold;color:#0000FF;">This is the second column. We've
added a background, and made the
font bold and blue.
<br style="clear:both;" />

Do you have more good examples? Post a comment, or send me a private e-mail, and I'll add them!

Older Post: Song Links Newer Post: Featured Song Template for your Bio

Comments (2)

Add a comment.

Register a new account.
Forgot your password?

Sharing box

Share this page:    

Copy/pasteable HTML: