CSS TUTORIAL
These codes can be applied to the following but are not limited to:
Bold <B>
italics <I>
superscript <sup>
subscript <sub>
strikeout <s>
Typewriter Text <tt>
  • bullet
    • <li>
    underline <U>
    strong <strong>
    font
    a:hover
    a:visited
    a:active
    a:link

    First, you need to start off with a style tag...

    <style type="text/css">B{the fun codes will go here}--></style>

    Instead of B, you can use i,u,sup,sub,li,tt,s,strong, etc.

    You need to know how to use more than one syntax in this code. This is how you break it down:

    <style type="text/css"><!--b{syntax:variant;syntax:variant;}--></style>

    Syntax? What's that? That is what is used to define what you want changed about the text. Say, if you want everything bold to be the color red, color would be the syntax. A list of these will be here soon, with their variants.

    Variants are the part of the code that states what you want a certain thing to be changed to. For example, if you wanted everything bold to be the color red, RED would be the variant (and color would be the syntax.)

    the syntax is always followed by a colon (:)
    and each syntax:variant is separated by a semi-colon (;)

    The Syntax is bolded and its variants are under it.

    text-transform
    none
    capitalize
    uppercase
    lowercase

    text-decoration
    none
    underline
    overline
    line-through
    You can have more than one text decoration as a variant.

    font-variant
    normal
    small-caps

    font-style
    normal
    italics

    font-size
    xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large
    #.#em
    #pt

    font-weight
    normal
    bold
    bolder
    lighter
    100
    200
    300
    400
    500
    600
    700
    800
    900

    font-face
    verdana
    Tahoma
    arial
    etc.

    color
    red
    green
    #122343
    etc.
    click here for a list of hex codes

    letter spacing
    #.#em
    #pt

    background-color
    red
    green
    #122343
    etc.
    click here for a list of hex codes

    A note about #.#em and #pt: Where the #'s are, you can replace them with a number, like 1,2,3,etc. The em one lets you have more control, so a little does a little. You can use 0.4em and it will be a nice code. The pt one makes a little go a long way. 4pt is a lot of space. You can also make these negative by putting a - in front of them.. as in -0.4em and -4pt.

    ---BORDERS---
    Borders are cool, because there are a lot of things you can do with them... This is probably the most difficult part of these codes. See, you can have many multiple variants of multiple syntaxes all describing a border.

    Usually you will see something like... border:#pt TYPE COLOR
    but you can also have different sizes, stypes, and colors for each side of the border.

    Border sides
    border-bottom
    border-top
    border-left
    border-right
    border

    Border Types
    outset
    dotted
    dashed
    inset
    ridge
    groove
    double
    solid
    outset thick
    dotted thick
    dashed thick
    inset thick
    ridge thick
    groove thick
    double thick
    solid thick
    to see what each of these looks like, see my previous entry

    Border Size
    #.#em
    #pt

    Border Color
    red
    green
    #122343
    etc.
    click here for a list of hex codes

    Here is an example of all of a supreme border code:
    <style>B{border-left:# TYPE COLOR;border-right:# TYPE COLOR;border-top:# TYPE COLOR;border-bttom:# TYPE COLOR; } --></style>

    And now some examples of codes with multiple variants... wherever it is bolded is where you can change something.

    supreme border code:
    <style>B{border-left:# TYPE COLOR;border-right:# TYPE COLOR;border-top:# TYPE COLOR;border-bttom:# TYPE COLOR; } --></style>

    to change the font color and family:
    <style>B{color:FONT COLOR;font-family:FONT FAMILY;}</style>

    change the color, letter spacing, and background color:
    <style>B{color:FONT COLOR;letter-spacing:#;background-color:COLOR;}</style>

    You can also use these special codes that normally don't work with or well with other codes:

    To make everything bold blurred:
    <style>b{height:4;filter:blur(strength=#)}</style>

    To make everything bold glow a certain color:
    <style>b{height:4;filter:glow(color=COLOR,strength=#)}</style>

    To make everything bold have a dropshadow:
    <style>b{height:4;filter:dropshadow(color=COLOR,offX=2,offY=2)}</style>

    To make the background of everything bold fade from one color to the next:
    <style>b{height:4;filter:progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=STARTCOLOR,endcolorstr=ENDCOLOR)}</style>

    To make everything bold have an image for a background:
    <style>b{background:url(URL);}</style>

    The Ultimate, Big Daddy Super Code

    <style>B{border-left:# TYPE COLOR;border-right:# TYPE COLOR;border-top:# TYPE COLOR;border-bttom:# TYPE COLOR;color:FONT COLOR;letter-spacing:#;word-spacing:#;backgrond-color:COLOR;font-weight:FONTWEIGHT;font-size:FONTSIZE;font-style:FONTSTYLE;font-variant:FONT VARIANT;text-decoration:;}</style>