JaffnaCampus.com » CSS References http://jaffnacampus.com Gateway to your IT potential Tue, 27 Sep 2011 13:57:48 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 CSS Reference – A to Z http://jaffnacampus.com/css/css-references/css-reference-a-to-z/ http://jaffnacampus.com/css/css-references/css-reference-a-to-z/#comments Mon, 08 Feb 2010 10:30:06 +0000 admin http://jaffnacampus.com/?p=206 The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property Description CSS
background Sets all the background properties in one declaration 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1
background-color Sets the background color of an element 1
background-image Sets the background image for an element 1
background-position Sets the starting position of a background image 1
background-repeat Sets how a background image will be repeated 1
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 2
border-bottom-style Sets the style of the bottom border 2
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-collapse Specifies whether or not table borders should be collapsed 2
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 2
border-left-style Sets the style of the left border 2
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 2
border-right-style Sets the style of the right border 2
border-right-width Sets the width of the right border 1
border-spacing Specifies the distance between the borders of adjacent cells 2
border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 2
border-top-style Sets the style of the top border 2
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
bottom Sets the bottom margin edge for a positioned box 2
caption-side Specifies the placement of a table caption 2
clear Specifies which sides of an element where other floating elements are not allowed 1
clip Clips an absolutely positioned element 2
color Sets the color of text 1
content Used with the :before and :after pseudo-elements, to insert generated content 2
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
cursor Specifies the type of cursor to be displayed 2
direction Specifies the text direction/writing direction 2
display Specifies the type of box an element should generate 1
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
float Specifies whether or not a box should float 1
font Sets all the font properties in one declaration 1
font-family Specifies the font family for text 1
font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
font-variant Specifies whether or not a text should be displayed in a small-caps font 1
font-weight Specifies the weight of a font 1
height Sets the height of an element 1
left Sets the left margin edge for a positioned box 2
letter-spacing Increase or decrease the space between characters in a text 1
line-height Sets the line height 1
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies if the list-item markers should appear inside or outside the content flow 1
list-style-type Specifies the type of list-item marker 1
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element 2
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2
overflow Specifies what happens if content overflows an element’s box 2
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
position Specifies the type of positioning for an element 2
quotes Sets the type of quotation marks for embedded quotations 2
right Sets the right margin edge for a positioned box 2
table-layout Sets the layout algorithm to be used for a table 2
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
top Sets the top margin edge for a positioned box 2
unicode-bidi   2
vertical-align Sets the vertical alignment of an element 1
visibility Specifies whether or not an element is visible 2
white-space Specifies how white-space inside an element is handled 1
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2
width Sets the width of an element 1
word-spacing Increases or decreases the space between words in a text 1
z-index Sets the stack order of an element 2

CSS Pseudo-classes/elements

Pseudo name Description CSS
:active Adds a style to an element that is activated 1
:after Adds content after an element 2
:before Adds content before an element 2
:first-child Adds a style to an element that is the first child of another element 2
:first-letter Adds a style to the first character of a text 1
:first-line Adds a style to the first line of a text 1
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link 1
]]> http://jaffnacampus.com/css/css-references/css-reference-a-to-z/feed/ 0 CSS Color Names http://jaffnacampus.com/css/css-references/css-color-names/ http://jaffnacampus.com/css/css-references/css-color-names/#comments Mon, 08 Feb 2010 10:27:30 +0000 admin http://jaffnacampus.com/css/css-references/css-color-names/ CSS Color Names

The table below provides a list of the color names that are supported by all major browsers.

Click on a color name (or a hex value) to view the color as the background-color along with different text colors:

Color Name HEX Color
AliceBlue  #F0F8FF  
AntiqueWhite  #FAEBD7  
Aqua  #00FFFF  
Aquamarine  #7FFFD4  
Azure  #F0FFFF  
Beige  #F5F5DC  
Bisque  #FFE4C4  
Black  #000000  
BlanchedAlmond  #FFEBCD  
Blue  #0000FF  
BlueViolet  #8A2BE2  
Brown  #A52A2A  
BurlyWood  #DEB887  
CadetBlue  #5F9EA0  
Chartreuse  #7FFF00  
Chocolate  #D2691E  
Coral  #FF7F50  
CornflowerBlue  #6495ED  
Cornsilk  #FFF8DC  
Crimson  #DC143C  
Cyan  #00FFFF  
DarkBlue  #00008B  
DarkCyan  #008B8B  
DarkGoldenRod  #B8860B  
DarkGray  #A9A9A9  
DarkGreen  #006400  
DarkKhaki  #BDB76B  
DarkMagenta  #8B008B  
DarkOliveGreen  #556B2F  
Darkorange  #FF8C00  
DarkOrchid  #9932CC  
DarkRed  #8B0000  
DarkSalmon  #E9967A  
DarkSeaGreen  #8FBC8F  
DarkSlateBlue  #483D8B  
DarkSlateGray  #2F4F4F  
DarkTurquoise  #00CED1  
DarkViolet  #9400D3  
DeepPink  #FF1493  
DeepSkyBlue  #00BFFF  
DimGray  #696969  
DodgerBlue  #1E90FF  
FireBrick  #B22222  
FloralWhite  #FFFAF0  
ForestGreen  #228B22  
Fuchsia  #FF00FF  
Gainsboro  #DCDCDC  
GhostWhite  #F8F8FF  
Gold  #FFD700  
GoldenRod  #DAA520  
Gray  #808080  
Green  #008000  
GreenYellow  #ADFF2F  
HoneyDew  #F0FFF0  
HotPink  #FF69B4  
IndianRed   #CD5C5C  
Indigo   #4B0082  
Ivory  #FFFFF0  
Khaki  #F0E68C  
Lavender  #E6E6FA  
LavenderBlush  #FFF0F5  
LawnGreen  #7CFC00  
LemonChiffon  #FFFACD  
LightBlue  #ADD8E6  
LightCoral  #F08080  
LightCyan  #E0FFFF  
LightGoldenRodYellow  #FAFAD2  
LightGrey  #D3D3D3  
LightGreen  #90EE90  
LightPink  #FFB6C1  
LightSalmon  #FFA07A  
LightSeaGreen  #20B2AA  
LightSkyBlue  #87CEFA  
LightSlateGray  #778899  
LightSteelBlue  #B0C4DE  
LightYellow  #FFFFE0  
Lime  #00FF00  
LimeGreen  #32CD32  
Linen  #FAF0E6  
Magenta  #FF00FF  
Maroon  #800000  
MediumAquaMarine  #66CDAA  
MediumBlue  #0000CD  
MediumOrchid  #BA55D3  
MediumPurple  #9370D8  
MediumSeaGreen  #3CB371  
MediumSlateBlue  #7B68EE  
MediumSpringGreen  #00FA9A  
MediumTurquoise  #48D1CC  
MediumVioletRed  #C71585  
MidnightBlue  #191970  
MintCream  #F5FFFA  
MistyRose  #FFE4E1  
Moccasin  #FFE4B5  
NavajoWhite  #FFDEAD  
Navy  #000080  
OldLace  #FDF5E6  
Olive  #808000  
OliveDrab  #6B8E23  
Orange  #FFA500  
OrangeRed  #FF4500  
Orchid  #DA70D6  
PaleGoldenRod  #EEE8AA  
PaleGreen  #98FB98  
PaleTurquoise  #AFEEEE  
PaleVioletRed  #D87093  
PapayaWhip  #FFEFD5  
PeachPuff  #FFDAB9  
Peru  #CD853F  
Pink  #FFC0CB  
Plum  #DDA0DD  
PowderBlue  #B0E0E6  
Purple  #800080  
Red  #FF0000  
RosyBrown  #BC8F8F  
RoyalBlue  #4169E1  
SaddleBrown  #8B4513  
Salmon  #FA8072  
SandyBrown  #F4A460  
SeaGreen  #2E8B57  
SeaShell  #FFF5EE  
Sienna  #A0522D  
Silver  #C0C0C0  
SkyBlue  #87CEEB  
SlateBlue  #6A5ACD  
SlateGray  #708090  
Snow  #FFFAFA  
SpringGreen  #00FF7F  
SteelBlue  #4682B4  
Tan  #D2B48C  
Teal  #008080  
Thistle  #D8BFD8  
Tomato  #FF6347  
Turquoise  #40E0D0  
Violet  #EE82EE  
Wheat  #F5DEB3  
White  #FFFFFF  
WhiteSmoke  #F5F5F5  
Yellow  #FFFF00  
YellowGreen  #9ACD32  

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

]]> http://jaffnacampus.com/css/css-references/css-color-names/feed/ 0 CSS Color Values http://jaffnacampus.com/css/css-references/css-color-values/ http://jaffnacampus.com/css/css-references/css-color-values/#comments Mon, 08 Feb 2010 10:25:28 +0000 admin http://jaffnacampus.com/css/css-references/css-color-values/ CSS Color Values

The table below provides a list of the color values that are supported by all major browsers.

Click on a hex value (or a color name) to view the color as the background-color along with different text colors:

Color Name HEX Color Shades Mix
Black  #000000   Shades Mix
Navy  #000080   Shades Mix
DarkBlue  #00008B   Shades Mix
MediumBlue  #0000CD   Shades Mix
Blue  #0000FF   Shades Mix
DarkGreen  #006400   Shades Mix
Green  #008000   Shades Mix
Teal  #008080   Shades Mix
DarkCyan  #008B8B   Shades Mix
DeepSkyBlue  #00BFFF   Shades Mix
DarkTurquoise  #00CED1   Shades Mix
MediumSpringGreen  #00FA9A   Shades Mix
Lime  #00FF00   Shades Mix
SpringGreen  #00FF7F   Shades Mix
Aqua  #00FFFF   Shades Mix
Cyan  #00FFFF   Shades Mix
MidnightBlue  #191970   Shades Mix
DodgerBlue  #1E90FF   Shades Mix
LightSeaGreen  #20B2AA   Shades Mix
ForestGreen  #228B22   Shades Mix
SeaGreen  #2E8B57   Shades Mix
DarkSlateGray  #2F4F4F   Shades Mix
LimeGreen  #32CD32   Shades Mix
MediumSeaGreen  #3CB371   Shades Mix
Turquoise  #40E0D0   Shades Mix
RoyalBlue  #4169E1   Shades Mix
SteelBlue  #4682B4   Shades Mix
DarkSlateBlue  #483D8B   Shades Mix
MediumTurquoise  #48D1CC   Shades Mix
Indigo   #4B0082   Shades Mix
DarkOliveGreen  #556B2F   Shades Mix
CadetBlue  #5F9EA0   Shades Mix
CornflowerBlue  #6495ED   Shades Mix
MediumAquaMarine  #66CDAA   Shades Mix
DimGray  #696969   Shades Mix
SlateBlue  #6A5ACD   Shades Mix
OliveDrab  #6B8E23   Shades Mix
SlateGray  #708090   Shades Mix
LightSlateGray  #778899   Shades Mix
MediumSlateBlue  #7B68EE   Shades Mix
LawnGreen  #7CFC00   Shades Mix
Chartreuse  #7FFF00   Shades Mix
Aquamarine  #7FFFD4   Shades Mix
Maroon  #800000   Shades Mix
Purple  #800080   Shades Mix
Olive  #808000   Shades Mix
Gray  #808080   Shades Mix
SkyBlue  #87CEEB   Shades Mix
LightSkyBlue  #87CEFA   Shades Mix
BlueViolet  #8A2BE2   Shades Mix
DarkRed  #8B0000   Shades Mix
DarkMagenta  #8B008B   Shades Mix
SaddleBrown  #8B4513   Shades Mix
DarkSeaGreen  #8FBC8F   Shades Mix
LightGreen  #90EE90   Shades Mix
MediumPurple  #9370D8   Shades Mix
DarkViolet  #9400D3   Shades Mix
PaleGreen  #98FB98   Shades Mix
DarkOrchid  #9932CC   Shades Mix
YellowGreen  #9ACD32   Shades Mix
Sienna  #A0522D   Shades Mix
Brown  #A52A2A   Shades Mix
DarkGray  #A9A9A9   Shades Mix
LightBlue  #ADD8E6   Shades Mix
GreenYellow  #ADFF2F   Shades Mix
PaleTurquoise  #AFEEEE   Shades Mix
LightSteelBlue  #B0C4DE   Shades Mix
PowderBlue  #B0E0E6   Shades Mix
FireBrick  #B22222   Shades Mix
DarkGoldenRod  #B8860B   Shades Mix
MediumOrchid  #BA55D3   Shades Mix
RosyBrown  #BC8F8F   Shades Mix
DarkKhaki  #BDB76B   Shades Mix
Silver  #C0C0C0   Shades Mix
MediumVioletRed  #C71585   Shades Mix
IndianRed   #CD5C5C   Shades Mix
Peru  #CD853F   Shades Mix
Chocolate  #D2691E   Shades Mix
Tan  #D2B48C   Shades Mix
LightGrey  #D3D3D3   Shades Mix
PaleVioletRed  #D87093   Shades Mix
Thistle  #D8BFD8   Shades Mix
Orchid  #DA70D6   Shades Mix
GoldenRod  #DAA520   Shades Mix
Crimson  #DC143C   Shades Mix
Gainsboro  #DCDCDC   Shades Mix
Plum  #DDA0DD   Shades Mix
BurlyWood  #DEB887   Shades Mix
LightCyan  #E0FFFF   Shades Mix
Lavender  #E6E6FA   Shades Mix
DarkSalmon  #E9967A   Shades Mix
Violet  #EE82EE   Shades Mix
PaleGoldenRod  #EEE8AA   Shades Mix
LightCoral  #F08080   Shades Mix
Khaki  #F0E68C   Shades Mix
AliceBlue  #F0F8FF   Shades Mix
HoneyDew  #F0FFF0   Shades Mix
Azure  #F0FFFF   Shades Mix
SandyBrown  #F4A460   Shades Mix
Wheat  #F5DEB3   Shades Mix
Beige  #F5F5DC   Shades Mix
WhiteSmoke  #F5F5F5   Shades Mix
MintCream  #F5FFFA   Shades Mix
GhostWhite  #F8F8FF   Shades Mix
Salmon  #FA8072   Shades Mix
AntiqueWhite  #FAEBD7   Shades Mix
Linen  #FAF0E6   Shades Mix
LightGoldenRodYellow  #FAFAD2   Shades Mix
OldLace  #FDF5E6   Shades Mix
Red  #FF0000   Shades Mix
Fuchsia  #FF00FF   Shades Mix
Magenta  #FF00FF   Shades Mix
DeepPink  #FF1493   Shades Mix
OrangeRed  #FF4500   Shades Mix
Tomato  #FF6347   Shades Mix
HotPink  #FF69B4   Shades Mix
Coral  #FF7F50   Shades Mix
Darkorange  #FF8C00   Shades Mix
LightSalmon  #FFA07A   Shades Mix
Orange  #FFA500   Shades Mix
LightPink  #FFB6C1   Shades Mix
Pink  #FFC0CB   Shades Mix
Gold  #FFD700   Shades Mix
PeachPuff  #FFDAB9   Shades Mix
NavajoWhite  #FFDEAD   Shades Mix
Moccasin  #FFE4B5   Shades Mix
Bisque  #FFE4C4   Shades Mix
MistyRose  #FFE4E1   Shades Mix
BlanchedAlmond  #FFEBCD   Shades Mix
PapayaWhip  #FFEFD5   Shades Mix
LavenderBlush  #FFF0F5   Shades Mix
SeaShell  #FFF5EE   Shades Mix
Cornsilk  #FFF8DC   Shades Mix
LemonChiffon  #FFFACD   Shades Mix
FloralWhite  #FFFAF0   Shades Mix
Snow  #FFFAFA   Shades Mix
Yellow  #FFFF00   Shades Mix
LightYellow  #FFFFE0   Shades Mix
Ivory  #FFFFF0   Shades Mix
White  #FFFFFF   Shades Mix

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

]]> http://jaffnacampus.com/css/css-references/css-color-values/feed/ 0 CSS Colors http://jaffnacampus.com/css/css-references/css-colors/ http://jaffnacampus.com/css/css-references/css-colors/#comments Mon, 08 Feb 2010 10:22:47 +0000 admin http://jaffnacampus.com/?p=202 Colors are displayed combining RED, GREEN, and BLUE light.

Color Values

CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).

Hex values are written as 3 double digit numbers, starting with a # sign.

Color Examples

Color Color HEX Color RGB
  #000000 rgb(0,0,0)
  #FF0000 rgb(255,0,0)
  #00FF00 rgb(0,255,0)
  #0000FF rgb(0,0,255)
  #FFFF00 rgb(255,255,0)
  #00FFFF rgb(0,255,255)
  #FF00FF rgb(255,0,255)
  #C0C0C0 rgb(192,192,192)
  #FFFFFF rgb(255,255,255)

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).

Most modern monitors are capable of displaying at least 16384 different colors.

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.

To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb values below.

Red Light HEX RGB
  #000000  rgb(0,0,0) 
  #080000  rgb(8,0,0) 
  #100000  rgb(16,0,0) 
  #180000  rgb(24,0,0) 
  #200000  rgb(32,0,0) 
  #280000  rgb(40,0,0) 
  #300000  rgb(48,0,0) 
  #380000  rgb(56,0,0) 
  #400000  rgb(64,0,0) 
  #480000  rgb(72,0,0) 
  #500000  rgb(80,0,0) 
  #580000  rgb(88,0,0) 
  #600000  rgb(96,0,0) 
  #680000  rgb(104,0,0) 
  #700000  rgb(112,0,0) 
  #780000  rgb(120,0,0) 
  #800000  rgb(128,0,0) 
  #880000  rgb(136,0,0) 
  #900000  rgb(144,0,0) 
  #980000  rgb(152,0,0) 
  #A00000  rgb(160,0,0) 
  #A80000  rgb(168,0,0) 
  #B00000  rgb(176,0,0) 
  #B80000  rgb(184,0,0) 
  #C00000  rgb(192,0,0) 
  #C80000  rgb(200,0,0) 
  #D00000  rgb(208,0,0) 
  #D80000  rgb(216,0,0) 
  #E00000  rgb(224,0,0) 
  #E80000  rgb(232,0,0) 
  #F00000  rgb(240,0,0) 
  #F80000  rgb(248,0,0) 
  #FF0000  rgb(255,0,0) 

Shades of Gray

Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you:

Gray Shades HEX RGB
  #000000  rgb(0,0,0) 
  #080808  rgb(8,8,8) 
  #101010  rgb(16,16,16) 
  #181818  rgb(24,24,24) 
  #202020  rgb(32,32,32) 
  #282828  rgb(40,40,40) 
  #303030  rgb(48,48,48) 
  #383838  rgb(56,56,56) 
  #404040  rgb(64,64,64) 
  #484848  rgb(72,72,72) 
  #505050  rgb(80,80,80) 
  #585858  rgb(88,88,88) 
  #606060  rgb(96,96,96) 
  #686868  rgb(104,104,104) 
  #707070  rgb(112,112,112) 
  #787878  rgb(120,120,120) 
  #808080  rgb(128,128,128) 
  #888888  rgb(136,136,136) 
  #909090  rgb(144,144,144) 
  #989898  rgb(152,152,152) 
  #A0A0A0  rgb(160,160,160) 
  #A8A8A8  rgb(168,168,168) 
  #B0B0B0  rgb(176,176,176) 
  #B8B8B8  rgb(184,184,184) 
  #C0C0C0  rgb(192,192,192) 
  #C8C8C8  rgb(200,200,200) 
  #D0D0D0  rgb(208,208,208) 
  #D8D8D8  rgb(216,216,216) 
  #E0E0E0  rgb(224,224,224) 
  #E8E8E8  rgb(232,232,232) 
  #F0F0F0  rgb(240,240,240) 
  #F8F8F8  rgb(248,248,248) 
  #FFFFFF  rgb(255,255,255) 

Cross-Browser Color Names

A collection of nearly 150 color names are supported by all major browsers.

Web Standard Color Names

The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want to use other colors, you should specify their HEX value.

Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.

This is not important now, since most computers can display millions of different colors, but the choice is left to you.

The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
]]> http://jaffnacampus.com/css/css-references/css-colors/feed/ 0 CSS Units http://jaffnacampus.com/css/css-references/css-units/ http://jaffnacampus.com/css/css-references/css-units/#comments Mon, 08 Feb 2010 10:20:06 +0000 admin http://jaffnacampus.com/?p=200 Measurement Values
Unit Description
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)

Color Values

Value Description
color_name A color name (e.g. red)
rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb A HEX number (e.g. #ff0000)
]]> http://jaffnacampus.com/css/css-references/css-units/feed/ 0 CSS Web Safe Font Combinations http://jaffnacampus.com/css/css-references/css-web-safe-font-combinations/ http://jaffnacampus.com/css/css-references/css-web-safe-font-combinations/#comments Mon, 08 Feb 2010 10:18:50 +0000 admin http://jaffnacampus.com/?p=198 Commonly Used Font Combinations

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

Example

p{font-family:"Times New Roman", Times, serif}

Below are some commonly used font combinations, organized by generic family.

Serif Fonts

font-family Example text
Georgia, serif

This is a heading

This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph
"Times New Roman", Times, serif

This is a heading

This is a paragraph

Sans-Serif Fonts

font-family Example text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph
Arial Black, Gadget, sans-serif

This is a heading

This is a paragraph
"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph
Impact, Charcoal, sans-serif

This is a heading

This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph
Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph
"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph
Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

font-family Example text
"Courier New", Courier, monospace

This is a heading

This is a paragraph
"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph
]]> http://jaffnacampus.com/css/css-references/css-web-safe-font-combinations/feed/ 0 CSS Aural Reference http://jaffnacampus.com/css/css-references/css-aural-reference/ http://jaffnacampus.com/css/css-references/css-aural-reference/#comments Mon, 08 Feb 2010 10:17:10 +0000 admin http://jaffnacampus.com/?p=196 Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:

  • by blind people
  • to help users learning to read
  • to help users who have reading problems
  • for home entertainment
  • in the car
  • by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

h1,h2,h3,h4
{
voice-family:male;
richness:80;
cue-before:url("beep.au")
}

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

CSS Aural Reference

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property Description Values CSS
azimuth Sets where the sound should come from angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards		 2
cue Sets the cue properties in one declaration cue-before
cue-after		 2
cue-after Specifies a sound to be played after speaking an element’s content none
url		 2
cue-before Specifies a sound to be played before speaking an element’s content none
url		 2
elevation Sets where the sound should come from angle
below
level
above
higher
lower 		 2
pause Sets the pause properties in one declaration pause-before
pause-after		 2
pause-after Specifies a pause after speaking an element’s content time
%		 2
pause-before Specifies a pause before speaking an element’s content time
%		 2
pitch Specifies the speaking voice frequency
x-low
low
medium
high
x-high 		 2
pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?) number 2
play-during Specifies a sound to be played while speaking an element’s content auto
none
url
mix
repeat		 2
richness Specifies the richness of the speaking voice. (Rich voice or thin voice?) number 2
speak Specifies whether content will render aurally normal
none
spell-out		 2
speak-header Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell always
once		 2
speak-numeral Specifies how to speak numbers digits
continuous		 2
speak-punctuation Specifies how to speak punctuation characters none
code		 2
speech-rate Specifies the speed of the speaking number
x-slow
slow
medium
fast
x-fast
faster
slower 		 2
stress Specifies the "stress" in the speaking voice number 2
voice-family Specifies the voice family of the speaking specific-voice
generic-voice		 2
volume Specifies the volume of the speaking number
%
silent
x-soft
soft
medium
loud
x-loud 		 2
]]> http://jaffnacampus.com/css/css-references/css-aural-reference/feed/ 0 CSS Reference http://jaffnacampus.com/css/css-references/css-reference/ http://jaffnacampus.com/css/css-references/css-reference/#comments Mon, 08 Feb 2010 10:14:54 +0000 admin http://jaffnacampus.com/?p=194 CSS Property Groups
  • Background
  • Border and outline
  • Dimension
  • Font
  • Generated content
  • List
  • Margin
  • Padding
  • Positioning
  • Print
  • Table
  • Text
  • Pseudo-classes/elements

The links in the "Property" column point to syntax, examples, browser support, etc.

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Background Properties

Property Description CSS
background Sets all the background properties in one declaration 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1
background-color Sets the background color of an element 1
background-image Sets the background image for an element 1
background-position Sets the starting position of a background image 1
background-repeat Sets how a background image will be repeated 1

Border and Outline Properties

Property Description CSS
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 2
border-bottom-style Sets the style of the bottom border 2
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 2
border-left-style Sets the style of the left border 2
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 2
border-right-style Sets the style of the right border 2
border-right-width Sets the width of the right border 1
border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 2
border-top-style Sets the style of the top border 2
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2

Dimension Properties

Property Description CSS
height Sets the height of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
width Sets the width of an element 1

Font Properties

Property Description CSS
font Sets all the font properties in one declaration 1
font-family Specifies the font family for text 1
font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
font-variant Specifies whether or not a text should be displayed in a small-caps font 1
font-weight Specifies the weight of a font 1

Generated Content Properties

Property Description CSS
content Used with the :before and :after pseudo-elements, to insert generated content 2
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
quotes Sets the type of quotation marks for embedded quotations 2

List Properties

Property Description CSS
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies if the list-item markers should appear inside or outside the content flow 1
list-style-type Specifies the type of list-item marker 1

Margin Properties

Property Description CSS
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1

Padding Properties

Property Description CSS
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1

Positioning Properties

Property Description CSS
bottom Sets the bottom margin edge for a positioned box 2
clear Specifies which sides of an element where other floating elements are not allowed 1
clip Clips an absolutely positioned element 2
cursor Specifies the type of cursor to be displayed 2
display Specifies the type of box an element should generate 1
float Specifies whether or not a box should float 1
left Sets the left margin edge for a positioned box 2
overflow Specifies what happens if content overflows an element’s box 2
position Specifies the type of positioning for an element 2
right Sets the right margin edge for a positioned box 2
top Sets the top margin edge for a positioned box 2
visibility Specifies whether or not an element is visible 2
z-index Sets the stack order of an element 2

Print Properties

Property Description CSS
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element 2
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2

Table Properties

Property Description CSS
border-collapse Specifies whether or not table borders should be collapsed 2
border-spacing Specifies the distance between the borders of adjacent cells 2
caption-side Specifies the placement of a table caption 2
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
table-layout Sets the layout algorithm to be used for a table 2

Text Properties

Property Description CSS
color Sets the color of text 1
direction Specifies the text direction/writing direction 2
letter-spacing Increases or decreases the space between characters in a text 1
line-height Sets the line height 1
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
unicode-bidi   2
vertical-align Sets the vertical alignment of an element 1
white-space Specifies how white-space inside an element is handled 1
word-spacing Increases or decreases the space between words in a text 1

CSS Pseudo-classes/elements

Property Description CSS
:active Adds a style to an element that is activated 1
:after Adds content after an element 2
:before Adds content before an element 2
:first-child Adds a style to an element that is the first child of another element 2
:first-letter Adds a style to the first character of a text 1
:first-line Adds a style to the first line of a text 1
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link 1
]]> http://jaffnacampus.com/css/css-references/css-reference/feed/ 0