HTML/CSS

Color Codes

Basic

[spoiler]

White
#FFFFFF

Black
Hex: #000000
Rgb: 0,0,0

Grey
#808080

Silver
#C0C0C0

Green
#008000

Lime
#00FF00

Olive
#808000

Teal
#008080

Blue
#0000FF

Navy
#000080

Purple
#800080

Fuchia
#FF00FF

Maroon
#800000

Red
#FF0000

Yellow
#FFFF00

Aqua
#00FFFF

[/spoiler]

X11

[spoiler]

Lavender
#E6E6FA

Thistle
#D8BFD8

Plum
#DDA0DD

Violet
#EE82EE

Orchid
#DA70D6

Fuchsia
#FF00FF

Magenta
#FF00FF

MediumOrchid
#BA55D3

MediumPurple
#9370DB

BlueViolet
#8A2BE2

DarkViolet
#9400D3

DarkOrchid
#9932CC

DarkMagenta
#8B008B

Purple
#800080

Indigo
#4B0082

SlateBlue
#6A5ACD

DarkSlateBlue
#483D8B

MediumSlateBlue
#7B68EE

Indian Red
#CD5C5C

Light Coral
#F08080

Salmon
#FA8072

Dark Salmon
#E9967A

Light Salmon
#FFA07A

Coral
#FF7F50

Tomato
#FF6347

OrangeRed
#FF4500

Crimson
#DC143C

FireBrick
#B22222

DarkRed
#8B0000

Pink
#FFC0CB

Light Pink
#FFB6C1

Hot Pink
#FF69B4

Deep Pink
#FF1493

Medium Violet Red
#C71585

Pale Violet Red
#DB7093

DarkOrange
#FF8C00

Orange
#FFA500

Gold
#FFD700

Light Yellow
#FFFFE0

LemonChiffon
#FFFACD

LightGoldenrodYellow
#FAFAD2

PapayaWhip
#FFEFD5

Moccasin
#FFE4B5

PeachPuff
#FFDAB9

PaleGoldenrod
#EEE8AA

Khaki
#F0E68C

DarkKhaki
#BDB76B

Green Yellow
#ADFF2F

Chartreuse
#7FFF00

Lawn Green
#7CFC00

Lime Green
#32CD32

Pale Green
#98FB98

Light Green
#90EE90

Medium Spring Green
#00FA9A

Spring Green
#00FF7F

Medium Sea Green
#3CB371

Sea Green
#2E8B57

Forest Green
#228B22

Dark Green
#006400

Yellow Green
#9ACD32

Olive Drab
#6B8E23

Olive
#808000

Dark Olive Green
#556B2F

Medium Aqua Marine
#66CDAA

Dark Sea Green
#8FBC8F

Light Sea Green
#20B2AA

Dark Cyan
#008B8B

LightCyan
#E0FFFF

PaleTurquoise
#AFEEEE

Aquamarine
#7FFFD4

Turquoise
#40E0D0

MediumTurquoise
#48D1CC

DarkTurquoise
#00CED1

CadetBlue
#5F9EA0

SteelBlue
#4682B4

LightSteelBlue
#B0C4DE

PowderBlue
#B0E0E6

LightBlue
#ADD8E6

SkyBlue
#87CEEB

LightSkyBlue
#87CEFA

DeepSkyBlue
#00BFFF

DodgerBlue
#1E90FF

CornflowerBlue
#6495ED

MediumSlateBlue
#7B68EE

RoyalBlue
#4169E1

MediumBlue
#0000CD

DarkBlue
#00008B

Navy
#000080

MidnightBlue
#191970

Cornsilk
#FFF8DC

BlanchedAlmond
#FFEBCD

Bisque
#FFE4C4

NavajoWhite
#FFDEAD

Wheat
#F5DEB3

BurlyWood
#DEB887

Tan
#D2B48C

RosyBrown
#BC8F8F

SandyBrown
#F4A460

Goldenrod
#DAA520

DarkGoldenrod
#B8860B

Peru
#CD853F

Chocolate
#D2691E

SaddleBrown
#8B4513

Sienna
#A0522D

Brown
#A52A2A

Maroon
#800000

Snow
#FFFAFA

Honeydew
#F0FFF0

MintCream
#F5FFFA

Azure
#F0FFFF

AliceBlue
#F0F8FF

GhostWhite
#F8F8FF

WhiteSmoke
#F5F5F5

Seashell
#FFF5EE

Beige
#F5F5DC

OldLace
#FDF5E6

FloralWhite
#FFFAF0

Ivory
#FFFFF0

AntiqueWhite
#FAEBD7

Linen
#FAF0E6

LavenderBlush
#FFF0F5

MistyRose
#FFE4E1

Gainsboro
#DCDCDC

LightGrey
#D3D3D3

DarkGray
#A9A9A9

Gray
#808080

DimGray
#696969

LightSlateGray
#778899

SlateGray
#708090

DarkSlateGray
#2F4F4F

Gray
#808080

[/spoiler]

Non Dithered

[spoiler]

#FFFFCC

#FFFF99

#FFFF66

#FFFF33

#FFFF00

#CCFF99

#CCFF66

#CCFF33

#CCFF00

#33FF99

#99FF99

#CCFFCC

#CCFFFF

#66FF99

#66FF66

#99FFCC

#33FFFF

#33FFCC

#00FFFF

#00FF99

#66FFFF

#99FFFF

#00FF00

#00FF66

#33FF33

#99FF66

#00FFCC

#00FFCC

#66FF00

#66FFCC

#99FF00

#66FFCC

#33FF00

#FFCCFF

#FFCCCC

#FF99FF

#FF99CC

#FF6666

#FF33FF

#FF00CC

#FF33CC

#CC6699

#FF9999

#FF66CC

#FF66FF

#FF6699

#CC6699

#FF3399

#FF00FF

#CC6666

#FF3366

#FF0099

#FF0066

#FF0033

#CC3366

#CC0066

#CC0033

#CC3333

#FF3333

#FF9966

#FFCC99

#FFCC66

#FFCC33

#FFCC00

#CCCC66

#CCCC00

#CCCC33

#CC9966

#CCCC99

#CCCCCC

#CCCCFF

#66CC99

#99CC99

#99CC66

#99CC33

#99CC00

#66CC66

#66CC33

#66CC00

#33CC66

#00CC66

#99CCFF

#66CCFF

#66CCCC

#00CCFF

#33CCFF

#33CCCC

#00CCCC

#33CC99

#00CC99

#CC99FF

#CC99CC

#CC9999

#CC66FF

#CC66CC

#CC33FF

#9966CC

#CC33CC

#9966FF

#996699

#996666

#CC00FF

#CC00FF

#CC3399

#CC00CC

#9933FF

#0066FF

#9933CC

#9900FF

#993366

#9900CC

#990099

#660099

#993399

#CC0099

#663366

#660066

#990033

#330066

#330033

#FF9933

#FF9900

#CC9933

#CC9900

#FFCC33

#FF6600

#CC6633

#CC6600

#FF3300

#FF0000

#CC3300

#009966

#669966

#339966

#009966

#339933

#009933

#669933

#669900

#339900

#009900

#33CC33

#33CC00

#336633

#33CC00

#00CC33

#00CC00

#006633

#336600

#006600

#0099CC

#009999

#9999FF

#9999CC

#6699FF

#6699CC

#3399FF

#669999

#6666FF

#0099FF

#3399CC

#339999

#99CCCC

#6666CC

#3366FF

#666699

#0066CC

#336666

#6666CC

#3366FF

#666699

#0066CC

#336666

#006699

#6600FF

#6600CC

#0033CC

#0000FF

#333399

#3300CC

#336699

#6633FF

#3366CC

#0033FF

#3333CC

#003399

#006666

#6633CC

#3333FF

#003333

#330099

#3300FF

#003366

#0000CC

#000099

#000066

#000033

#CC0000

#990000

#660000

#330000

#330000

#333333

#990000

#660000

#330000

#333333

#333300

#666666

#666633

#999999

#999966

#999999

#999966

#999933

#999900

#996633

#996600

#999999

#999966

#999933

#999900

#996633

#996600

#996600

#666600

#993333

#993300

#663333

#663300

#CC0000

#990000

#660000

#330000

#333333

#333300

#666666

#666633

#999999

#999966

#999933

#999900

#996633

#996600

#666600

#993333

#993300

#663333

#663300

[/spoiler]

Color Schemes

This one is more of a cheat sheet where you can pick out your color schemes that I have put in front of you. The codes are right inside of the boxes for your convenience. It has been mentioned to me to make a cheat sheet type of lens, so here it is for you.

[spoiler]

<p style=”border:solid 2px #000000; background: #228B22; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #98FB98; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #228B22; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #98FB98; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #008000; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: #F0FFF0; padding: 5px;”>Your Text Here </p>

<p style=”border:double 2px #000000; background: #008000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 2px #000000; background: #000080; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 2px #000000; background: #800000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 2px #000000; background: #008000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 2px #000000; background: #000080; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 2px #000000; background: #800000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #008000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #000080; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #800000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #008000; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #000080; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #800000; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #008000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #000080; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 6px #000000; background: #800000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #FF8C00; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #FF9933; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #FFA500; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #BDB76B; background: #F5DEB3; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #F5DEB3; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #BDB76B; background: #D2B48C; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #FF9933; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #FFA500; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #FF8C00; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #000000; background: #FF9933; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #000000; background: #FFA500; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #000033; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border: solid 2px #000000;padding: 5px; background: #E6E6FA”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #000080; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #B0C4DE; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000080; background: #B0C4DE; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #666699; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #000033; padding: 5px;color: #ffffff;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 5px #800000; background: #800000; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 5px #800000; background: #ffffff; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #000080; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #000000; background: #B0C4DE; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #000000; background: #000033; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #000000; background: #666699; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #CC66FF; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #339999; padding: 5px;color: #ffffff”> Your Text Here </p>

<p style=”border:solid 2px #000000; background: #F0E68C; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #DB7093; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #000000; background: #FFCCCC; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #990000;; background: #FFCC99; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #000000;; background: #FFCC99; padding: 5px”>Your Text Here </p>

Peach
<p style=”border: solid 2px #990000;; background: #FFCC99; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #000000;; background: #FFCC99; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #CC66FF; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #D8BFD8; background: #4B0082; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border: solid 2px #990000;; background: #FFCC99; padding: 5px”>Your Text Here </p>

<p style=”border:dotted 2px #800000; background: #F0E68C; padding: 5px”>Your Text Here </p>

<p style=”border:dotted 2px #C71585; background: #DB7093; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #000000;; background: #FFCC99; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #000000; background: #FFCCCC; padding: 5px”>Your Text Here </p>

<p style=”border:dotted 2px #C71585; background: #DB7093; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #000000; background: #DB7093; padding: 5px”>Your Text Here </p>

<p style=”background: #F0E68C; padding: 15px; Color: #000000; float: left; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; border: solid 2px #000000″>Your Text Here </p>

<p style=”background: #F0E68C; padding: 15px; Color: #000000; float: left; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; border: solid 2px #FF4500″>Your Text Here </p>

<p style=”border:dotted 2px #808080; background: #000000; padding: 5px;color: #ffffff”>Your Text Here </p>

Neutral
<p style=”border:solid 2px #CC6600; background: #CCCC99; padding: 5px”>Your Text Here </p>

Neutral
<p style=”border:solid 2px #000000; background: #CCCC99; padding: 5px”>Your Text Here </p>

<p style=”border:dotted 2px #000000; background: #663300; padding: 5px”>Your Text Here </p>

<p style=”border:dotted 2px #FFA500; background: #663300; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #0000FF; background: #000000; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #FF00FF; background: #000000; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #00FFFF; background: #000000; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #FFFF00; background: #000000; padding: 5px;color: #ffffff”>

<p style=”border:double 5px #808080; background: #000000; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #00FF00; background: #000000; padding: 5px;color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #FFA500; background: #663300; padding: 5px”>Your Text Here </p>

<p style=”border:double 5px #000000; background: #663300; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #000000;; background: #999999; padding: 5px; color: #ffffff”>Your Text Here </p>

<p style=”border: solid 2px #000000; background: #666666; padding: 5px; color: #ffffff”>Your Text Here </p>

<p style=”border: solid 2px #C0C0C0; background: #666666; padding: 5px; color: #ffffff”>Your Text Here </p>

<p style=”border:double 5px #0000FF; background: #000000; padding: 5px;color: #ffffff; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 5px #FF00FF; background: #000000; padding: 5px;color: #ffffff; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; “>Your Text Here </p>

<p style=”border:double 5px #00FFFF; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: #000000; padding: 5px;color: #ffffff;”>Your Text Here </p>

<p style=”border:double 5px #FFFF00; background: #000000; padding: 5px;color: #ffffff; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>

<p style=”border:double 6px #8B4513; background: #EEE8AA; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #330033; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #4682B4; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #006400; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #008B8B; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #8B4513; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #008000; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #008080; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #32CD32; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #2F4F4F; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #800000; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #000080; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #FF0000; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #483D8B; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #8B0000; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #C71585; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #FF4500; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:double 6px #BDB76B; background: #DCDCDC; padding: 5px;-moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;”>Your Text Here </p>

<p style=”border:solid 2px #808080; background: #000000; padding: 5px;color: #ffffff”> Your Text Here </p>

<p style=”border:solid 2px #C0C0C0; background: #000000; padding: 5px;color: #ffffff”> Your Text Here </p>

<p style=”border:solid 2px #00FF00; background: #000000; padding: 5px;color: #ffffff”> Your Text Here </p>

<p style=”border:solid 2px #0000FF; background: #000000; padding: 5px;color: #ffffff”> Your Text Here </p>

<p style=”border:solid 2px #000080; background: #000000; padding: 5px;color: #ffffff”> Your Text Here </p>

<p style=”border:solid 2px #000000; background: #663300; padding: 5px”>Your Text Here </p>

<p style=”border:solid 2px #FFA500; background: #663300; padding: 5px”>Your Text Here </p>

<p style=”border: solid 2px #C0C0C0; background: #666666; padding: 5px; color: #ffffff”>Your Text Here </p>

<p style=”border: solid 2px #000000; background: #666666; padding: 5px; color: #ffffff”>Your Text Here </p>

<p style=”border: solid 2px #000000;; background: #999999; padding: 5px; color: #ffffff”>Your Text Here </p>

Neutral
<p style=”border:solid 2px #CC6600; background: #CCCC99; padding: 5px”>Your Text Here </p>

Neutral
<p style=”border:solid 2px #000000; background: #CCCC99; padding: 5px”>Your Text Here </p>

[/spoiler]

 

Borders and More

The Borders

When it comes to HTML and CSS, sometimes we want to have borders around our text to spice up your pages. There are a variety of different types of borders. You have regular ones and then rounded ones. Please remember not everything works in all browsers.Internet explorer is a prime example of a browser that seems to always cause problems. Solid, dashed, dotted, solid and double are the only ones that work on all browsers as far as I know.

The Borders

Solid: <p style=”border: solid 2px #000000″>

Dotted: <p style=”border: dotted 2px #000000″>

Dashed: <p style=”border: dashed 2px #000000″>

Double: <p style=”border: double 4px #000000″>

Groove: <p style=”border: groove 4px #000000″>

Inset: <p style=”border: inset 4px #000000″>

Outset: <p style=”border: outset 4px #000000″>

Ridge: <p style=”border: ridge 2px #000000″>

 

Did You Know….

You do not have to use the same border options throughout the whole box.

Here are the other names for borders you can use:
Border-right
Border-left
Border-top
Border-bottom

How About Rounded Borders?

Creating rounded borders is simular to making regular borders, but now you have the option to round them. Here is the code to get your started. All border options are the same so you can modify it accordingly.

<p style=”border:solid 2px #DAA520; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: #FFE4B5; padding: 5px”>

Some Browser Information

Sorry this does not work in internet explorer, but images will fix this problem.

You may be asking me what each of these mean. The start of the code is like you normally do, but then you start adding the information in so that you have rounded corners. A radius is what makes it curve whichever way you want it. Take the -moz-border-radius: 15px; section of the code. You can actually add another number to get a variation of the same code like 2px.

This is what you get: -moz-border-radius: 2px 15px;. Remember you have to do this for each separate browser.

You may be asking why there are multiple radius’. Here is the reason. They cover different web browsers as different ones read them in different ways. No one piece of software is designed exactly the same way. Does Windows act the same way as linux or mac’s OS? No it does not. The same goes for web browsers. They are designed by different people so there are different ways it handles the same idea.

-moz is easy to understand for most people. This one is used for mozilla which is also known as firefox.

-khtml which is usually used on Konqueror which is a browser that is typically used on Linux OS.

-webkit is typically used on google and safari.

Don’t Forget About The Variations

lets take a look at the section that says: -moz-border-radius: 15px;

Here you can do other things and creating other variations it where you can set different radius’ for each corner.

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Do you see a pattern here? I added to the mozilla browser the location to edit. Don’t forget to do the same thing with the other browsers too.

Font Information

I Was thinking about fonts and how its important when it comes to any type of webpage or lens. When it comes to the letters, that in my book is a font. They all have different types and yes they do have names for them. That is what I am going to cover here and much more.

What Are The Choices?

    With different operating systems, there are different fonts that are available. When a site picks a particular font that is not available on your computer, it will replace itself with a default so that you can view the font.

Windows

  • Arial
  • Comic San MS
  • Courier New
  • Impact
  • Times New Roman
  • Symbol
  • Verdana

Macintosh

  • Chicago
  • Courier
  • Geneva
  • Monaco
  • New York
  • Palitino
  • Helvetica

Unix

  • Charter
  • Courier
  • Fixed
  • Lucida
  • San Serif
  • Clean
  • Helvetica
Lets Jump Into HTML and CSS!!
Now that I have touched on fonts, it is now time to actually go into the whole HTML and CSS aspect of it. Its really more CSS than HTML though.

Lets Talk About Font Face

We talked about the font types, but how to add it in. If you plan on using the system default; you don’t have to put it in unless you really want to. so, for Times New Romans, it would be: <p style=”font-family:times new roman;”>

And How Did I get the Big Black Letter?

Now you are probably wondering how in the word that I managed to get that big black letter on the introduction paragraph. This is how I did it.<b style=”font-size: 100px; float: left; color: black; line-height: 70px; padding-top: 2px; font-family: times new roman;”>Your letter here </b> Font-size cover the size of the font. Line-height is based off of how high the line will be. We added padding for only the top. Then we added the font type which I explained before. Feel free to experiment with the numbers to see what happens. You can use this code if you want to group multiple letter together. Depending on what you are trying to do, you may have to omit everything but the font-size part. Just experiment to see what works for you.

Some Other Great Codes

Font-weight: You can use this to set the weight of the font if you don’t want it bold or normal. Just add bold or normal depending on which way you are going with it.

Font-type: This is where you can add the type to your font like italics.

Text-transform: You can use uppercase, lower with this one.

Text-decoration: You can use line-through, blink, overline, and underline with this one.

Some Other things To Note

I know you have seen other fonts floating all over the internet. If you end up using those types for your sites or lenses, you have to remember that your user won’t see that font unless your user has that font installed on their computer. What they typically would see is their default font instead. I know that they may look nice, but not everyone sees the words on the page the same. The only way that a font looks the same no matter which fonts are installed is by graphics. I don’t think you will do that just to have that effect. Just remember what may work on your computer, may not work on another person’s computer.