Self-destructive Layouts
@vampirefreaks.com
Text editing (with CSS)

Content:
  1. Styling ALL text on a page
  2. Styling some text on a page
  3. Font-family
  4. Font-size
  5. Color
  6. Font-weight (bold text)
  7. Font-style (italic text)
  8. Text-decoration (underlined text, etc.)
  9. Letter-spacing
  10. Text-transform (uppercase or lowercase text)
  11. Text-align

Styling ALL text on a page:

You can change the general font on an entire page by using a CSS stylesheet, like this:

Example:
<style>
 body, table{
  font-family: Arial;
  font-size: 8pt;
  color: red;
 }
</style>


You can also make more advanced changes, such as setting the font-weight, font-style and text-decoration:

Example:
<style>
 body, table{
  font-family: Arial;
  font-size: 8pt;
  color: red;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
 }
</style>

Styling some text on a page:

Styling an entire paragraph:

Example:

This entire paragraph is written in the same style. This entire paragraph is written in the same style. This entire paragraph is written in the same style. This entire paragraph is written in the same style. This entire paragraph is written in the same style. This entire paragraph is written in the same style. This entire paragraph is written in the same style. This entire paragraph is written in the same style.

<p style="font-family: Arial; font-size: 8pt; color: black; text-align: left;"> This entire paragraph is written in the same style. </p>

Styling a few words in a text:

Example:
Blah, blah, blah, blah, blah, blah, blah, blah, this text is black, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah.

<span style="font-family: Arial; font-size: 8pt; color: black; text-align: left;"> this text is black </span>

By using a "class" and a CSS stylesheet, you can edit several different parts of a text at once:

Example:
Blah, blah, blah, this text is black, blah, blah, blah, blah, blah, this text is also black, blah, blah, blah.

<style>.blacktext{ color: black; } </style>
Blah, blah, blah, <span class="blacktext"> this text is black, </span> blah, blah, blah, blah, blah, <span class="blacktext"> this text is also black, </span> blah, blah, blah.

Or you can style the text in a part of your profile that has already been assigned a class, for example your userinfo:

Example:

<style>
 .userinfo{
  font-family: Arial;
  font-size: 8pt;
  color: red;
 }
</style>

Font-family

The font-family property specifies what font the text should be rendered as. You can specify several different fonts, in prioritized order, by separating the fonts with a comma. This is especially important if you want to use a font that is not considered "websafe". [Click here] to see a list of websafe fonts.

Example:
font-family: Arial Black;
font-family: Mael, Comic Sans MS;

Font-size

The font-size property specifies what size a font should be rendered as.

Example:
font-size: 8pt;
font-size: 12pt;
font-size: 14pt;
font-size: 16pt;

Color:

The color property specifies what color a font should be rendered as. You can either use a hex code or a valid color name.

Example:
color: #000000;
color: purple;

Font-weight:

The font-weight property set the boldness of a text. "Normal" is the default value for regular text, "bold" is the default value for links.

Example:
font-weight: bold;
font-weight: normal;

Font-style:

The font-style property set whether a text should be normal, oblique or italic (although there isn't much difference between the oblique and italic style when it comes to CSS).

Example:
font-style: normal;
font-style: oblique;
font-style: italic;

Text-decoration:

The the text-decoration property sets whether a text should be underlined, overlined or struck out. "Blink" is also a possible value, however this text-decoration will not show in Internet Explorer.

Example:
text-decoration: underline;

text-decoration: overline;

text-decoration: underline overline;

text-decoration: line-through;

text-decoration: blink;

Letter-spacing

The the letter-spacing property sets the spacing between the letter in a text.

Example:
letter-spacing: -1px;
letter-spacing: 2px;
letter-spacing: 4px;
letter-spacing: 6px;

Text-transform:

The the text-transform property can be used to control the rendering of uppercase and lowecase text. "Lowercase" will render all letters as lowercase and "uppercase" will render them as UPPERCASE, no matter how you originally typed them. "Capitalize" will capitalize every single word in a text.

Example:
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;

Text-align:

The the text-align property specifies whether a text should align to the left, right or center. This will only work on "block-level" elements (elements that have a line-break before and after them), such as div's, tables and paragraphs.

Example:
text-align: left; text-align: center; text-align: right;