Colored Text with Sizes
Ten text colors pre-written for you, with five named font-sizes included. By including a declaration of no background color, the code will validate correctly through the W3C CSS Validator:
How it looks:
x-small black
small black
medium black
large black
x-large black
x-small red
small red
medium red
large red
x-large red
x-small blue
small blue
medium blue
large blue
x-large blue
x-small green
small green
medium green
large green
x-large green
x-small purple
small purple
medium purple
large purple
x-large purple
x-small white
small white
medium white
large white
x-large white
x-small yellow
small yellow
medium yellow
large yellow
x-large yellow
x-small orange
small orange
medium orange
large orange
x-large orange
x-small gray
small gray
medium gray
large gray
x-large gray
x-small brown
small brown
medium brown
large brown
x-large brown
The CSS used:
.xsmallblack{
font-size:x-small; color:#000000; background:none;}
.smallblack{
font-size:small; color:#000000; background:none;}
.mediumblack{
font-size:medium; color:#000000; background:none;}
.largeblack{
font-size:large; color:#000000; background:none;}
.xlargeblack{
font-size:x-large; color:#000000; background:none;}
.xsmallred{
font-size:x-small; color:#ff0000; background:none;}
.smallred{
font-size:small; color:#ff0000; background:none;}
.mediumred{
font-size:medium; color:#ff0000; background:none;}
.largered{
font-size:large; color:#ff0000; background:none;}
.xlargered{
font-size:x-large; color:#ff0000; background:none;}
.xsmallblue{
font-size:x-small; color:#0000ff; background:none;}
.smallblue{
font-size:small; color:#0000ff; background:none;}
.mediumblue{
font-size:medium; color:#0000ff; background:none;}
.largeblue{
font-size:large; color:#0000ff; background:none;}
.xlargeblue{
font-size:x-large; color:#0000ff; background:none;}
.xsmallgreen{
font-size:x-small; color:#008000; background:none;}
.smallgreen{
font-size:small; color:#008000; background:none;}
.mediumgreen{
font-size:medium; color:#008000; background:none;}
.largegreen{
font-size:large; color:#008000; background:none;}
.xlargegreen{
font-size:x-large; color:#008000; background:none;}
.xsmallpurple{
font-size:x-small; color:#800080; background:none;}
.smallpurple{
font-size:small; color:#800080; background:none;}
.mediumpurple{
font-size:medium; color:#800080; background:none;}
.largepurple{
font-size:large; color:#800080; background:none;}
.xlargepurple{
font-size:x-large; color:#800080; background:none;}
.xsmallyellow{
font-size:x-small; color:#ffff00; background:none;}
.smallyellow{
font-size:small; color:#ffff00; background:none;}
.mediumyellow{
font-size:medium; color:#ffff00; background:none;}
.largeyellow{
font-size:large; color:#ffff00; background:none;}
.xlargeyellow{
font-size:x-large; color:#ffff00; background:none;}
.xsmallorange{
font-size:x-small; color:#ffa500; background:none;}
.smallorange{
font-size:small; color:#ffa500; background:none;}
.mediumorange{
font-size:medium; color:#ffa500; background:none;}
.largeorange{
font-size:large; color:#ffa500; background:none;}
.xlargeorange{
font-size:x-large; color:#ffa500; background:none;}
.xsmallgray{
font-size:x-small; color:#808080; background:none;}
.smallgray{
font-size:small; color:#808080; background:none;}
.mediumgray{
font-size:medium; color:#808080; background:none;}
.largegray{
font-size:large; color:#808080; background:none;}
.xlargegray{
font-size:x-large; color:#808080; background:none;}
.xsmallwhite{
font-size:x-small; color:#ffffff; background:none;}
.smallwhite{
font-size:small; color:#ffffff; background:none;}
.mediumwhite{
font-size:medium; color:#ffffff; background:none;}
.largewhite{
font-size:large; color:#ffffff; background:none;}
.xlargewhite{
font-size:x-large; color:#ffffff; background:none;}
.xsmallbrown{
font-size:x-small; color:#a52a2a; background:none;}
.smallbrown{
font-size:small; color:#a52a2a; background:none;}
.mediumbrown{
font-size:medium; color:#a52a2a; background:none;}
.largebrown{
font-size:large; color:#a52a2a; background:none;}
.xlargebrown{
font-size:x-large; color:#a52a2a; background:none;}
Capture this CSS as a seperate file: text_size_color.css
Please refer to What Is CSS? to see how to use this code.
And # Colors if you want to choose your own Hex Values.