[Miller]

To give an example of a profile utilizing CSS and HTML. I made a quick mock up to show how you can easily utilize CSS for your profile.

Code:

#all{text-align:center; line-height:1.1;}
/* A personal choice of mine is to set a DIV at the start of a profile and define something universally shared by all pages.

line-height decreases or increases the space between lines, allowing you to make more use of space in your profile at lower values.

text-align is self-explanatory. (left/right/center )*/

b{font-weight:normal; color:#F95;}
/* Sets the bold html element to not be bold and changes the color. */

i{font-style:normal; color:#59F;}
/* Sets the italic html element to not be italic and changes the color. */

#title, #border{color:#FF0;}
/* Adding a comma between Element definitions allow you to define multiple elements at the same time, incredibly useful if you share a color scheme across the profile. */

#title{font:italic bold 25pt 'Cardinal'; text-shadow:0 0 2 #FF0;}
/* The font attribute should always have an order of
style>weight>size>face, there is some information omited here but this is mostly what you need to know in the case of profiles.

Text-shadow allows you to make a neat little shadow or 'glow' behind the text. The first number is horizontal offset, the second is vertical offset and the third is the blur. Do not set the third value to anything absurd. */

#border{-dm-text-outline:1px #F90;}
/* The -dm-text-outline attribute allows you to add an outline around text. The first value is for the size of the outline. (Please do not set it to anything absurd.) while the second is the hexcolor. */

#maintext{font:italic 9pt 'Cambria'; margin:10px;}

/* Margin is an attribute that allows you to space your text away from the borders of a documents.
margin-left: and margin-right: are also attributes that also exist and serve a similar role for each side. */

All of this goes into the style sheet option on your profile.

As for the actual visible HTML portion of your profile. It'd look something like this:

Code:

<div id=all><div id=border>==================================</div>


<div id=title>Ren Brown</div>





<div id=border>==================================</div>

<div id=maintext>

This is an example.



The <b>brown fox</b> jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence.



The <i>brown fox</i> jumped over the <b>big iron fence</b>. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox <i>jumped</i> over the big iron fence.



The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence. The brown fox jumped over the big iron fence.





</div>
<div id=border>==================================</div>

The results? (Not meant to be pretty by any means.)



The main benefit when it comes to the usage of Style Sheets within a profile is the amount of organization and the fact that you no longer have to type the same <font color="#FFFFFF"> over and over and over and over again. It saves a ton of time and effort as definitions are shared across your entire profile.