{"id":43,"date":"2012-08-19T20:14:16","date_gmt":"2012-08-19T20:14:16","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=43"},"modified":"2019-04-09T15:40:32","modified_gmt":"2019-04-09T15:40:32","slug":"03-applying-css","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/03-applying-css\/","title":{"rendered":"03 Applying CSS"},"content":{"rendered":"<p><br id=\"TofContents\"\/><\/p>\n<ul id=\"contents\">\n<li><strong>Contents<\/strong>\n<\/li>\n<li><a href=\"#color\">Color<\/a>\n<\/li>\n<li><a href=\"#font-style\">Font Properties<\/a>\n<\/li>\n<li><a href=\"#text_lout\">Text Layout Properties<\/a>\n<\/li>\n<li><a href=\"#box\">Box Properties<\/a>\n<\/li>\n<li><a href=\"#border\">Border Properties<\/a>\n<\/li>\n<li><a href=\"#h-rule\">Thematic Break<\/a>\n<\/li>\n<li><a href=\"#margin\">Margin &#038; Padding<\/a>\n<\/li>\n<li><a href=\"#lists\">List Properties<\/a>\n<\/li>\n<li><a href=\"#tables\">Tables<\/a>\n<\/li>\n<li><a href=\"#pseudo-class\">Pseudo Classes<\/a>\n<\/li>\n<li><a href=\"#pseudo-classn\">Pseudo Classes: not<\/a>\n<\/li>\n<li><a href=\"#pseudo-e\">Pseudo Elements<\/a>\n<\/li>\n<li><a href=\"#cursor\">Cursor<\/a>\n<\/li>\n<\/ul>\n<p>There are many CSS properties. You do not have to memorize them all. You will remember the ones you use most often, and the other ones you can always look <a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/css3-cheat-sheet.pdf\" target=\"_blank\">up<\/a>.  I&#8217;ve separated many of the properties into a number of interactive demos so that you can try them out. Spend some time in this sandbox, change the values of the properties or add new properties. This is where you can play and learn while it is still fun.<br \/>\n<br id=\"color\"\/><\/p>\n<h2 class=\"l-head\">Color<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Color is always RGB. That is how computers work. These are additive colors, you can call them by name or RGB value, both by percentages, decimal number or hexadecimal shorthand (Hexadecimal is base 16, or 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f ), which is the most common form, introduced by a <code>#<\/code> hash mark, and allows each value (red, green and blue) to be represented by two Hexadecimal values, like #000000 is black or #ff0000 is red, #00ff00 is green and #0000ff is blue. Can you guess what the value of white is? If you guessed #000000, you are correct!\n<\/p>\n<p>Here are the names of the colors, with their Hexadecimal and decimal numbers as an example: <\/p>\n<div class=live-demo style=\"overflow: auto; height: 200px;\">\n<table class=colortable>\n<tbody>\n<tr>\n<th>Color\n<\/th>\n<th>\n<\/th>\n<th>Color&nbsp;name\n<\/th>\n<th>Hex&nbsp;rgb\n<\/th>\n<th>Decimal <\/p>\n<tr>\n<td class=c style=\"background:aliceblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f0f8ff\">&nbsp;\n<\/td>\n<td><dfn id=aliceblue>aliceblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f0f8ff\n<\/td>\n<td class=c style=\"background:silver\">240,248,255 <\/p>\n<tr>\n<td class=c style=\"background:antiquewhite\">&nbsp;\n<\/td>\n<td class=c style=\"background:#faebd7\">&nbsp;\n<\/td>\n<td><dfn id=antiquewhite>antiquewhite<\/dfn>\n <\/td>\n<td class=c style=\"background:silver\">#faebd7\n<\/td>\n<td class=c style=\"background:silver\">250,235,215 <\/p>\n<tr>\n<td class=c style=\"background:aqua\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00ffff\">&nbsp;\n<\/td>\n<td><dfn id=aqua0>aqua<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00ffff\n<\/td>\n<td class=c style=\"background:silver\">0,255,255 <\/p>\n<tr>\n<td class=c style=\"background:aquamarine\">&nbsp;\n<\/td>\n<td class=c style=\"background:#7fffd4\">&nbsp;\n<\/td>\n<td><dfn id=aquamarine>aquamarine<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#7fffd4\n<\/td>\n<td class=c style=\"background:silver\">127,255,212 <\/p>\n<tr>\n<td class=c style=\"background:azure\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f0ffff\">&nbsp;\n<\/td>\n<td><dfn id=azure>azure<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f0ffff\n<\/td>\n<td class=c style=\"background:silver\">240,255,255 <\/p>\n<tr>\n<td class=c style=\"background:beige\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f5f5dc\">&nbsp;\n<\/td>\n<td><dfn id=beige>beige<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f5f5dc\n<\/td>\n<td class=c style=\"background:silver\">245,245,220 <\/p>\n<tr>\n<td class=c style=\"background:bisque\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffe4c4\">&nbsp;\n<\/td>\n<td><dfn id=bisque>bisque<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffe4c4\n<\/td>\n<td class=c style=\"background:silver\">255,228,196 <\/p>\n<tr>\n<td class=c style=\"background:black\">&nbsp;\n<\/td>\n<td class=c style=\"background:#000000\">&nbsp;\n<\/td>\n<td><dfn id=black0>black<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#000000\n<\/td>\n<td class=c style=\"background:silver\">0,0,0 <\/p>\n<tr>\n<td class=c style=\"background:blanchedalmond\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffebcd\">&nbsp;\n<\/td>\n<td><dfn id=blanchedalmond>blanchedalmond<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffebcd\n<\/td>\n<td class=c style=\"background:silver\">255,235,205 <\/p>\n<tr>\n<td class=c style=\"background:blue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#0000ff\">&nbsp;\n<\/td>\n<td><dfn id=blue0>blue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#0000ff\n<\/td>\n<td class=c style=\"background:silver\">0,0,255 <\/p>\n<tr>\n<td class=c style=\"background:blueviolet\">&nbsp;\n<\/td>\n<td class=c style=\"background:#8a2be2\">&nbsp;\n<\/td>\n<td><dfn id=blueviolet>blueviolet<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#8a2be2\n<\/td>\n<td class=c style=\"background:silver\">138,43,226 <\/p>\n<tr>\n<td class=c style=\"background:brown\">&nbsp;\n<\/td>\n<td class=c style=\"background:#a52a2a\">&nbsp;\n<\/td>\n<td><dfn id=brown>brown<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#a52a2a\n<\/td>\n<td class=c style=\"background:silver\">165,42,42 <\/p>\n<tr>\n<td class=c style=\"background:burlywood\">&nbsp;\n<\/td>\n<td class=c style=\"background:#deb887\">&nbsp;\n<\/td>\n<td><dfn id=burlywood>burlywood<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#deb887\n<\/td>\n<td class=c style=\"background:silver\">222,184,135 <\/p>\n<tr>\n<td class=c style=\"background:cadetblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#5f9ea0\">&nbsp;\n<\/td>\n<td><dfn id=cadetblue>cadetblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#5f9ea0\n<\/td>\n<td class=c style=\"background:silver\">95,158,160 <\/p>\n<tr>\n<td class=c style=\"background:chartreuse\">&nbsp;\n<\/td>\n<td class=c style=\"background:#7fff00\">&nbsp;\n<\/td>\n<td><dfn id=chartreuse>chartreuse<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#7fff00\n<\/td>\n<td class=c style=\"background:silver\">127,255,0 <\/p>\n<tr>\n<td class=c style=\"background:chocolate\">&nbsp;\n<\/td>\n<td class=c style=\"background:#d2691e\">&nbsp;\n<\/td>\n<td><dfn id=chocolate>chocolate<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#d2691e\n<\/td>\n<td class=c style=\"background:silver\">210,105,30 <\/p>\n<tr>\n<td class=c style=\"background:coral\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff7f50\">&nbsp;\n<\/td>\n<td><dfn id=coral>coral<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff7f50\n<\/td>\n<td class=c style=\"background:silver\">255,127,80 <\/p>\n<tr>\n<td class=c style=\"background:cornflowerblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#6495ed\">&nbsp;\n<\/td>\n<td><dfn id=cornflowerblue>cornflowerblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#6495ed\n<\/td>\n<td class=c style=\"background:silver\">100,149,237 <\/p>\n<tr>\n<td class=c style=\"background:cornsilk\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fff8dc\">&nbsp;\n<\/td>\n<td><dfn id=cornsilk>cornsilk<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fff8dc\n<\/td>\n<td class=c style=\"background:silver\">255,248,220 <\/p>\n<tr>\n<td class=c style=\"background:crimson\">&nbsp;\n<\/td>\n<td class=c style=\"background:#dc143c\">&nbsp;\n<\/td>\n<td><dfn id=crimson>crimson<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#dc143c\n<\/td>\n<td class=c style=\"background:silver\">220,20,60 <\/p>\n<tr>\n<td class=c style=\"background:cyan\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00ffff\">&nbsp;\n<\/td>\n<td><dfn id=cyan>cyan<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00ffff\n<\/td>\n<td class=c style=\"background:silver\">0,255,255 <\/p>\n<tr>\n<td class=c style=\"background:darkblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00008b\">&nbsp;\n<\/td>\n<td><dfn id=darkblue>darkblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00008b\n<\/td>\n<td class=c style=\"background:silver\">0,0,139 <\/p>\n<tr>\n<td class=c style=\"background:darkcyan\">&nbsp;\n<\/td>\n<td class=c style=\"background:#008b8b\">&nbsp;\n<\/td>\n<td><dfn id=darkcyan>darkcyan<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#008b8b\n<\/td>\n<td class=c style=\"background:silver\">0,139,139 <\/p>\n<tr>\n<td class=c style=\"background:darkgoldenrod\">&nbsp;\n<\/td>\n<td class=c style=\"background:#b8860b\">&nbsp;\n<\/td>\n<td><dfn id=darkgoldenrod>darkgoldenrod<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#b8860b\n<\/td>\n<td class=c style=\"background:silver\">184,134,11 <\/p>\n<tr>\n<td class=c style=\"background:darkgray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#a9a9a9\">&nbsp;\n<\/td>\n<td><dfn id=darkgray>darkgray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#a9a9a9\n<\/td>\n<td class=c style=\"background:silver\">169,169,169 <\/p>\n<tr>\n<td class=c style=\"background:darkgreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#006400\">&nbsp;\n<\/td>\n<td><dfn id=darkgreen>darkgreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#006400\n<\/td>\n<td class=c style=\"background:silver\">0,100,0 <\/p>\n<tr>\n<td class=c style=\"background:darkgrey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#a9a9a9\">&nbsp;\n<\/td>\n<td><dfn id=darkgrey>darkgrey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#a9a9a9\n<\/td>\n<td class=c style=\"background:silver\">169,169,169 <\/p>\n<tr>\n<td class=c style=\"background:darkkhaki\">&nbsp;\n<\/td>\n<td class=c style=\"background:#bdb76b\">&nbsp;\n<\/td>\n<td><dfn id=darkkhaki>darkkhaki<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#bdb76b\n<\/td>\n<td class=c style=\"background:silver\">189,183,107 <\/p>\n<tr>\n<td class=c style=\"background:darkmagenta\">&nbsp;\n<\/td>\n<td class=c style=\"background:#8b008b\">&nbsp;\n<\/td>\n<td><dfn id=darkmagenta>darkmagenta<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#8b008b\n<\/td>\n<td class=c style=\"background:silver\">139,0,139 <\/p>\n<tr>\n<td class=c style=\"background:darkolivegreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#556b2f\">&nbsp;\n<\/td>\n<td><dfn id=darkolivegreen>darkolivegreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#556b2f\n<\/td>\n<td class=c style=\"background:silver\">85,107,47 <\/p>\n<tr>\n<td class=c style=\"background:darkorange\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff8c00\">&nbsp;\n<\/td>\n<td><dfn id=darkorange>darkorange<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff8c00\n<\/td>\n<td class=c style=\"background:silver\">255,140,0 <\/p>\n<tr>\n<td class=c style=\"background:darkorchid\">&nbsp;\n<\/td>\n<td class=c style=\"background:#9932cc\">&nbsp;\n<\/td>\n<td><dfn id=darkorchid>darkorchid<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#9932cc\n<\/td>\n<td class=c style=\"background:silver\">153,50,204 <\/p>\n<tr>\n<td class=c style=\"background:darkred\">&nbsp;\n<\/td>\n<td class=c style=\"background:#8b0000\">&nbsp;\n<\/td>\n<td><dfn id=darkred>darkred<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#8b0000\n<\/td>\n<td class=c style=\"background:silver\">139,0,0 <\/p>\n<tr>\n<td class=c style=\"background:darksalmon\">&nbsp;\n<\/td>\n<td class=c style=\"background:#e9967a\">&nbsp;\n<\/td>\n<td><dfn id=darksalmon>darksalmon<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#e9967a\n<\/td>\n<td class=c style=\"background:silver\">233,150,122 <\/p>\n<tr>\n<td class=c style=\"background:darkseagreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#8fbc8f\">&nbsp;\n<\/td>\n<td><dfn id=darkseagreen>darkseagreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#8fbc8f\n<\/td>\n<td class=c style=\"background:silver\">143,188,143 <\/p>\n<tr>\n<td class=c style=\"background:darkslateblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#483d8b\">&nbsp;\n<\/td>\n<td><dfn id=darkslateblue>darkslateblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#483d8b\n<\/td>\n<td class=c style=\"background:silver\">72,61,139 <\/p>\n<tr>\n<td class=c style=\"background:darkslategray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#2f4f4f\">&nbsp;\n<\/td>\n<td><dfn id=darkslategray>darkslategray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#2f4f4f\n<\/td>\n<td class=c style=\"background:silver\">47,79,79 <\/p>\n<tr>\n<td class=c style=\"background:darkslategrey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#2f4f4f\">&nbsp;\n<\/td>\n<td><dfn id=darkslategrey>darkslategrey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#2f4f4f\n<\/td>\n<td class=c style=\"background:silver\">47,79,79 <\/p>\n<tr>\n<td class=c style=\"background:darkturquoise\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00ced1\">&nbsp;\n<\/td>\n<td><dfn id=darkturquoise>darkturquoise<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00ced1\n<\/td>\n<td class=c style=\"background:silver\">0,206,209 <\/p>\n<tr>\n<td class=c style=\"background:darkviolet\">&nbsp;\n<\/td>\n<td class=c style=\"background:#9400d3\">&nbsp;\n<\/td>\n<td><dfn id=darkviolet>darkviolet<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#9400d3\n<\/td>\n<td class=c style=\"background:silver\">148,0,211 <\/p>\n<tr>\n<td class=c style=\"background:deeppink\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff1493\">&nbsp;\n<\/td>\n<td><dfn id=deeppink>deeppink<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff1493\n<\/td>\n<td class=c style=\"background:silver\">255,20,147 <\/p>\n<tr>\n<td class=c style=\"background:deepskyblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00bfff\">&nbsp;\n<\/td>\n<td><dfn id=deepskyblue>deepskyblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00bfff\n<\/td>\n<td class=c style=\"background:silver\">0,191,255 <\/p>\n<tr>\n<td class=c style=\"background:dimgray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#696969\">&nbsp;\n<\/td>\n<td><dfn id=dimgray>dimgray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#696969\n<\/td>\n<td class=c style=\"background:silver\">105,105,105 <\/p>\n<tr>\n<td class=c style=\"background:dimgrey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#696969\">&nbsp;\n<\/td>\n<td><dfn id=dimgrey>dimgrey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#696969\n<\/td>\n<td class=c style=\"background:silver\">105,105,105 <\/p>\n<tr>\n<td class=c style=\"background:dodgerblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#1e90ff\">&nbsp;\n<\/td>\n<td><dfn id=dodgerblue>dodgerblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#1e90ff\n<\/td>\n<td class=c style=\"background:silver\">30,144,255 <\/p>\n<tr>\n<td class=c style=\"background:firebrick\">&nbsp;\n<\/td>\n<td class=c style=\"background:#b22222\">&nbsp;\n<\/td>\n<td><dfn id=firebrick>firebrick<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#b22222\n<\/td>\n<td class=c style=\"background:silver\">178,34,34 <\/p>\n<tr>\n<td class=c style=\"background:floralwhite\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fffaf0\">&nbsp;\n<\/td>\n<td><dfn id=floralwhite>floralwhite<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fffaf0\n<\/td>\n<td class=c style=\"background:silver\">255,250,240 <\/p>\n<tr>\n<td class=c style=\"background:forestgreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#228b22\">&nbsp;\n<\/td>\n<td><dfn id=forestgreen>forestgreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#228b22\n<\/td>\n<td class=c style=\"background:silver\">34,139,34 <\/p>\n<tr>\n<td class=c style=\"background:fuchsia\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff00ff\">&nbsp;\n<\/td>\n<td><dfn id=fuchsia0>fuchsia<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff00ff\n<\/td>\n<td class=c style=\"background:silver\">255,0,255 <\/p>\n<tr>\n<td class=c style=\"background:gainsboro\">&nbsp;\n<\/td>\n<td class=c style=\"background:#dcdcdc\">&nbsp;\n<\/td>\n<td><dfn id=gainsboro>gainsboro<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#dcdcdc\n<\/td>\n<td class=c style=\"background:silver\">220,220,220 <\/p>\n<tr>\n<td class=c style=\"background:ghostwhite\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f8f8ff\">&nbsp;\n<\/td>\n<td><dfn id=ghostwhite>ghostwhite<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f8f8ff\n<\/td>\n<td class=c style=\"background:silver\">248,248,255 <\/p>\n<tr>\n<td class=c style=\"background:gold\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffd700\">&nbsp;\n<\/td>\n<td><dfn id=gold>gold<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffd700\n<\/td>\n<td class=c style=\"background:silver\">255,215,0 <\/p>\n<tr>\n<td class=c style=\"background:goldenrod\">&nbsp;\n<\/td>\n<td class=c style=\"background:#daa520\">&nbsp;\n<\/td>\n<td><dfn id=goldenrod>goldenrod<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#daa520\n<\/td>\n<td class=c style=\"background:silver\">218,165,32 <\/p>\n<tr>\n<td class=c style=\"background:gray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#808080\">&nbsp;\n<\/td>\n<td><dfn id=gray0>gray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#808080\n<\/td>\n<td class=c style=\"background:silver\">128,128,128 <\/p>\n<tr>\n<td class=c style=\"background:green\">&nbsp;\n<\/td>\n<td class=c style=\"background:#008000\">&nbsp;\n<\/td>\n<td><dfn id=green0>green<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#008000\n<\/td>\n<td class=c style=\"background:silver\">0,128,0 <\/p>\n<tr>\n<td class=c style=\"background:greenyellow\">&nbsp;\n<\/td>\n<td class=c style=\"background:#adff2f\">&nbsp;\n<\/td>\n<td><dfn id=greenyellow>greenyellow<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#adff2f\n<\/td>\n<td class=c style=\"background:silver\">173,255,47 <\/p>\n<tr>\n<td class=c style=\"background:grey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#808080\">&nbsp;\n<\/td>\n<td><dfn id=grey>grey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#808080\n<\/td>\n<td class=c style=\"background:silver\">128,128,128 <\/p>\n<tr>\n<td class=c style=\"background:honeydew\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f0fff0\">&nbsp;\n<\/td>\n<td><dfn id=honeydew>honeydew<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f0fff0\n<\/td>\n<td class=c style=\"background:silver\">240,255,240 <\/p>\n<tr>\n<td class=c style=\"background:hotpink\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff69b4\">&nbsp;\n<\/td>\n<td><dfn id=hotpink>hotpink<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff69b4\n<\/td>\n<td class=c style=\"background:silver\">255,105,180 <\/p>\n<tr>\n<td class=c style=\"background:indianred\">&nbsp;\n<\/td>\n<td class=c style=\"background:#cd5c5c\">&nbsp;\n<\/td>\n<td><dfn id=indianred>indianred<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#cd5c5c\n<\/td>\n<td class=c style=\"background:silver\">205,92,92 <\/p>\n<tr>\n<td class=c style=\"background:indigo\">&nbsp;\n<\/td>\n<td class=c style=\"background:#4b0082\">&nbsp;\n<\/td>\n<td><dfn id=indigo>indigo<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#4b0082\n<\/td>\n<td class=c style=\"background:silver\">75,0,130 <\/p>\n<tr>\n<td class=c style=\"background:ivory\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fffff0\">&nbsp;\n<\/td>\n<td><dfn id=ivory>ivory<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fffff0\n<\/td>\n<td class=c style=\"background:silver\">255,255,240 <\/p>\n<tr>\n<td class=c style=\"background:khaki\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f0e68c\">&nbsp;\n<\/td>\n<td><dfn id=khaki>khaki<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f0e68c\n<\/td>\n<td class=c style=\"background:silver\">240,230,140 <\/p>\n<tr>\n<td class=c style=\"background:lavender\">&nbsp;\n<\/td>\n<td class=c style=\"background:#e6e6fa\">&nbsp;\n<\/td>\n<td><dfn id=lavender>lavender<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#e6e6fa\n<\/td>\n<td class=c style=\"background:silver\">230,230,250 <\/p>\n<tr>\n<td class=c style=\"background:lavenderblush\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fff0f5\">&nbsp;\n<\/td>\n<td><dfn id=lavenderblush>lavenderblush<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fff0f5\n<\/td>\n<td class=c style=\"background:silver\">255,240,245 <\/p>\n<tr>\n<td class=c style=\"background:lawngreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#7cfc00\">&nbsp;\n<\/td>\n<td><dfn id=lawngreen>lawngreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#7cfc00\n<\/td>\n<td class=c style=\"background:silver\">124,252,0 <\/p>\n<tr>\n<td class=c style=\"background:lemonchiffon\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fffacd\">&nbsp;\n<\/td>\n<td><dfn id=lemonchiffon>lemonchiffon<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fffacd\n<\/td>\n<td class=c style=\"background:silver\">255,250,205 <\/p>\n<tr>\n<td class=c style=\"background:lightblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#add8e6\">&nbsp;\n<\/td>\n<td><dfn id=lightblue>lightblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#add8e6\n<\/td>\n<td class=c style=\"background:silver\">173,216,230 <\/p>\n<tr>\n<td class=c style=\"background:lightcoral\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f08080\">&nbsp;\n<\/td>\n<td><dfn id=lightcoral>lightcoral<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f08080\n<\/td>\n<td class=c style=\"background:silver\">240,128,128 <\/p>\n<tr>\n<td class=c style=\"background:lightcyan\">&nbsp;\n<\/td>\n<td class=c style=\"background:#e0ffff\">&nbsp;\n<\/td>\n<td><dfn id=lightcyan>lightcyan<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#e0ffff\n<\/td>\n<td class=c style=\"background:silver\">224,255,255 <\/p>\n<tr>\n<td class=c style=\"background:lightgoldenrodyellow\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fafad2\">&nbsp;\n<\/td>\n<td><dfn id=lightgoldenrodyellow>lightgoldenrodyellow<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fafad2\n<\/td>\n<td class=c style=\"background:silver\">250,250,210 <\/p>\n<tr>\n<td class=c style=\"background:lightgray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#d3d3d3\">&nbsp;\n<\/td>\n<td><dfn id=lightgray>lightgray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#d3d3d3\n<\/td>\n<td class=c style=\"background:silver\">211,211,211 <\/p>\n<tr>\n<td class=c style=\"background:lightgreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#90ee90\">&nbsp;\n<\/td>\n<td><dfn id=lightgreen>lightgreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#90ee90\n<\/td>\n<td class=c style=\"background:silver\">144,238,144 <\/p>\n<tr>\n<td class=c style=\"background:lightgrey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#d3d3d3\">&nbsp;\n<\/td>\n<td><dfn id=lightgrey>lightgrey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#d3d3d3\n<\/td>\n<td class=c style=\"background:silver\">211,211,211 <\/p>\n<tr>\n<td class=c style=\"background:lightpink\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffb6c1\">&nbsp;\n<\/td>\n<td><dfn id=lightpink>lightpink<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffb6c1\n<\/td>\n<td class=c style=\"background:silver\">255,182,193 <\/p>\n<tr>\n<td class=c style=\"background:lightsalmon\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffa07a\">&nbsp;\n<\/td>\n<td><dfn id=lightsalmon>lightsalmon<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffa07a\n<\/td>\n<td class=c style=\"background:silver\">255,160,122 <\/p>\n<tr>\n<td class=c style=\"background:lightseagreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#20b2aa\">&nbsp;\n<\/td>\n<td><dfn id=lightseagreen>lightseagreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#20b2aa\n<\/td>\n<td class=c style=\"background:silver\">32,178,170 <\/p>\n<tr>\n<td class=c style=\"background:lightskyblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#87cefa\">&nbsp;\n<\/td>\n<td><dfn id=lightskyblue>lightskyblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#87cefa\n<\/td>\n<td class=c style=\"background:silver\">135,206,250 <\/p>\n<tr>\n<td class=c style=\"background:lightslategray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#778899\">&nbsp;\n<\/td>\n<td><dfn id=lightslategray>lightslategray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#778899\n<\/td>\n<td class=c style=\"background:silver\">119,136,153 <\/p>\n<tr>\n<td class=c style=\"background:lightslategrey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#778899\">&nbsp;\n<\/td>\n<td><dfn id=lightslategrey>lightslategrey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#778899\n<\/td>\n<td class=c style=\"background:silver\">119,136,153 <\/p>\n<tr>\n<td class=c style=\"background:lightsteelblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#b0c4de\">&nbsp;\n<\/td>\n<td><dfn id=lightsteelblue>lightsteelblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#b0c4de\n<\/td>\n<td class=c style=\"background:silver\">176,196,222 <\/p>\n<tr>\n<td class=c style=\"background:lightyellow\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffffe0\">&nbsp;\n<\/td>\n<td><dfn id=lightyellow>lightyellow<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffffe0\n<\/td>\n<td class=c style=\"background:silver\">255,255,224 <\/p>\n<tr>\n<td class=c style=\"background:lime\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00ff00\">&nbsp;\n<\/td>\n<td><dfn id=lime0>lime<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00ff00\n<\/td>\n<td class=c style=\"background:silver\">0,255,0 <\/p>\n<tr>\n<td class=c style=\"background:limegreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#32cd32\">&nbsp;\n<\/td>\n<td><dfn id=limegreen>limegreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#32cd32\n<\/td>\n<td class=c style=\"background:silver\">50,205,50 <\/p>\n<tr>\n<td class=c style=\"background:linen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#faf0e6\">&nbsp;\n<\/td>\n<td><dfn id=linen>linen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#faf0e6\n<\/td>\n<td class=c style=\"background:silver\">250,240,230 <\/p>\n<tr>\n<td class=c style=\"background:magenta\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff00ff\">&nbsp;\n<\/td>\n<td><dfn id=magenta>magenta<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff00ff\n<\/td>\n<td class=c style=\"background:silver\">255,0,255 <\/p>\n<tr>\n<td class=c style=\"background:maroon\">&nbsp;\n<\/td>\n<td class=c style=\"background:#800000\">&nbsp;\n<\/td>\n<td><dfn id=maroon0>maroon<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#800000\n<\/td>\n<td class=c style=\"background:silver\">128,0,0 <\/p>\n<tr>\n<td class=c style=\"background:mediumaquamarine\">&nbsp;\n<\/td>\n<td class=c style=\"background:#66cdaa\">&nbsp;\n<\/td>\n<td><dfn id=mediumaquamarine>mediumaquamarine<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#66cdaa\n<\/td>\n<td class=c style=\"background:silver\">102,205,170 <\/p>\n<tr>\n<td class=c style=\"background:mediumblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#0000cd\">&nbsp;\n<\/td>\n<td><dfn id=mediumblue>mediumblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#0000cd\n<\/td>\n<td class=c style=\"background:silver\">0,0,205 <\/p>\n<tr>\n<td class=c style=\"background:mediumorchid\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ba55d3\">&nbsp;\n<\/td>\n<td><dfn id=mediumorchid>mediumorchid<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ba55d3\n<\/td>\n<td class=c style=\"background:silver\">186,85,211 <\/p>\n<tr>\n<td class=c style=\"background:mediumpurple\">&nbsp;\n<\/td>\n<td class=c style=\"background:#9370db\">&nbsp;\n<\/td>\n<td><dfn id=mediumpurple>mediumpurple<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#9370db\n<\/td>\n<td class=c style=\"background:silver\">147,112,219 <\/p>\n<tr>\n<td class=c style=\"background:mediumseagreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#3cb371\">&nbsp;\n<\/td>\n<td><dfn id=mediumseagreen>mediumseagreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#3cb371\n<\/td>\n<td class=c style=\"background:silver\">60,179,113 <\/p>\n<tr>\n<td class=c style=\"background:mediumslateblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#7b68ee\">&nbsp;\n<\/td>\n<td><dfn id=mediumslateblue>mediumslateblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#7b68ee\n<\/td>\n<td class=c style=\"background:silver\">123,104,238 <\/p>\n<tr>\n<td class=c style=\"background:mediumspringgreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00fa9a\">&nbsp;\n<\/td>\n<td><dfn id=mediumspringgreen>mediumspringgreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00fa9a\n<\/td>\n<td class=c style=\"background:silver\">0,250,154 <\/p>\n<tr>\n<td class=c style=\"background:mediumturquoise\">&nbsp;\n<\/td>\n<td class=c style=\"background:#48d1cc\">&nbsp;\n<\/td>\n<td><dfn id=mediumturquoise>mediumturquoise<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#48d1cc\n<\/td>\n<td class=c style=\"background:silver\">72,209,204 <\/p>\n<tr>\n<td class=c style=\"background:mediumvioletred\">&nbsp;\n<\/td>\n<td class=c style=\"background:#c71585\">&nbsp;\n<\/td>\n<td><dfn id=mediumvioletred>mediumvioletred<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#c71585\n<\/td>\n<td class=c style=\"background:silver\">199,21,133 <\/p>\n<tr>\n<td class=c style=\"background:midnightblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#191970\">&nbsp;\n<\/td>\n<td><dfn id=midnightblue>midnightblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#191970\n<\/td>\n<td class=c style=\"background:silver\">25,25,112 <\/p>\n<tr>\n<td class=c style=\"background:mintcream\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f5fffa\">&nbsp;\n<\/td>\n<td><dfn id=mintcream>mintcream<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f5fffa\n<\/td>\n<td class=c style=\"background:silver\">245,255,250 <\/p>\n<tr>\n<td class=c style=\"background:mistyrose\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffe4e1\">&nbsp;\n<\/td>\n<td><dfn id=mistyrose>mistyrose<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffe4e1\n<\/td>\n<td class=c style=\"background:silver\">255,228,225 <\/p>\n<tr>\n<td class=c style=\"background:moccasin\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffe4b5\">&nbsp;\n<\/td>\n<td><dfn id=moccasin>moccasin<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffe4b5\n<\/td>\n<td class=c style=\"background:silver\">255,228,181 <\/p>\n<tr>\n<td class=c style=\"background:navajowhite\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffdead\">&nbsp;\n<\/td>\n<td><dfn id=navajowhite>navajowhite<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffdead\n<\/td>\n<td class=c style=\"background:silver\">255,222,173 <\/p>\n<tr>\n<td class=c style=\"background:navy\">&nbsp;\n<\/td>\n<td class=c style=\"background:#000080\">&nbsp;\n<\/td>\n<td><dfn id=navy0>navy<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#000080\n<\/td>\n<td class=c style=\"background:silver\">0,0,128 <\/p>\n<tr>\n<td class=c style=\"background:oldlace\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fdf5e6\">&nbsp;\n<\/td>\n<td><dfn id=oldlace>oldlace<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fdf5e6\n<\/td>\n<td class=c style=\"background:silver\">253,245,230 <\/p>\n<tr>\n<td class=c style=\"background:olive\">&nbsp;\n<\/td>\n<td class=c style=\"background:#808000\">&nbsp;\n<\/td>\n<td><dfn id=olive0>olive<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#808000\n<\/td>\n<td class=c style=\"background:silver\">128,128,0 <\/p>\n<tr>\n<td class=c style=\"background:olivedrab\">&nbsp;\n<\/td>\n<td class=c style=\"background:#6b8e23\">&nbsp;\n<\/td>\n<td><dfn id=olivedrab>olivedrab<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#6b8e23\n<\/td>\n<td class=c style=\"background:silver\">107,142,35 <\/p>\n<tr>\n<td class=c style=\"background:orange\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffa500\">&nbsp;\n<\/td>\n<td><dfn id=orange>orange<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffa500\n<\/td>\n<td class=c style=\"background:silver\">255,165,0 <\/p>\n<tr>\n<td class=c style=\"background:orangered\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff4500\">&nbsp;\n<\/td>\n<td><dfn id=orangered>orangered<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff4500\n<\/td>\n<td class=c style=\"background:silver\">255,69,0 <\/p>\n<tr>\n<td class=c style=\"background:orchid\">&nbsp;\n<\/td>\n<td class=c style=\"background:#da70d6\">&nbsp;\n<\/td>\n<td><dfn id=orchid>orchid<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#da70d6\n<\/td>\n<td class=c style=\"background:silver\">218,112,214 <\/p>\n<tr>\n<td class=c style=\"background:palegoldenrod\">&nbsp;\n<\/td>\n<td class=c style=\"background:#eee8aa\">&nbsp;\n<\/td>\n<td><dfn id=palegoldenrod>palegoldenrod<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#eee8aa\n<\/td>\n<td class=c style=\"background:silver\">238,232,170 <\/p>\n<tr>\n<td class=c style=\"background:palegreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#98fb98\">&nbsp;\n<\/td>\n<td><dfn id=palegreen>palegreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#98fb98\n<\/td>\n<td class=c style=\"background:silver\">152,251,152 <\/p>\n<tr>\n<td class=c style=\"background:paleturquoise\">&nbsp;\n<\/td>\n<td class=c style=\"background:#afeeee\">&nbsp;\n<\/td>\n<td><dfn id=paleturquoise>paleturquoise<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#afeeee\n<\/td>\n<td class=c style=\"background:silver\">175,238,238 <\/p>\n<tr>\n<td class=c style=\"background:palevioletred\">&nbsp;\n<\/td>\n<td class=c style=\"background:#db7093\">&nbsp;\n<\/td>\n<td><dfn id=palevioletred>palevioletred<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#db7093\n<\/td>\n<td class=c style=\"background:silver\">219,112,147 <\/p>\n<tr>\n<td class=c style=\"background:papayawhip\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffefd5\">&nbsp;\n<\/td>\n<td><dfn id=papayawhip>papayawhip<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffefd5\n<\/td>\n<td class=c style=\"background:silver\">255,239,213 <\/p>\n<tr>\n<td class=c style=\"background:peachpuff\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffdab9\">&nbsp;\n<\/td>\n<td><dfn id=peachpuff>peachpuff<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffdab9\n<\/td>\n<td class=c style=\"background:silver\">255,218,185 <\/p>\n<tr>\n<td class=c style=\"background:peru\">&nbsp;\n<\/td>\n<td class=c style=\"background:#cd853f\">&nbsp;\n<\/td>\n<td><dfn id=peru>peru<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#cd853f\n<\/td>\n<td class=c style=\"background:silver\">205,133,63 <\/p>\n<tr>\n<td class=c style=\"background:pink\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffc0cb\">&nbsp;\n<\/td>\n<td><dfn id=pink>pink<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffc0cb\n<\/td>\n<td class=c style=\"background:silver\">255,192,203 <\/p>\n<tr>\n<td class=c style=\"background:plum\">&nbsp;\n<\/td>\n<td class=c style=\"background:#dda0dd\">&nbsp;\n<\/td>\n<td><dfn id=plum>plum<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#dda0dd\n<\/td>\n<td class=c style=\"background:silver\">221,160,221 <\/p>\n<tr>\n<td class=c style=\"background:powderblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#b0e0e6\">&nbsp;\n<\/td>\n<td><dfn id=powderblue>powderblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#b0e0e6\n<\/td>\n<td class=c style=\"background:silver\">176,224,230 <\/p>\n<tr>\n<td class=c style=\"background:purple\">&nbsp;\n<\/td>\n<td class=c style=\"background:#800080\">&nbsp;\n<\/td>\n<td><dfn id=purple0>purple<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#800080\n<\/td>\n<td class=c style=\"background:silver\">128,0,128 <\/p>\n<tr>\n<td class=c style=\"background:red\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff0000\">&nbsp;\n<\/td>\n<td><dfn id=red0>red<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff0000\n<\/td>\n<td class=c style=\"background:silver\">255,0,0 <\/p>\n<tr>\n<td class=c style=\"background:rosybrown\">&nbsp;\n<\/td>\n<td class=c style=\"background:#bc8f8f\">&nbsp;\n<\/td>\n<td><dfn id=rosybrown>rosybrown<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#bc8f8f\n<\/td>\n<td class=c style=\"background:silver\">188,143,143 <\/p>\n<tr>\n<td class=c style=\"background:royalblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#4169e1\">&nbsp;\n<\/td>\n<td><dfn id=royalblue>royalblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#4169e1\n<\/td>\n<td class=c style=\"background:silver\">65,105,225 <\/p>\n<tr>\n<td class=c style=\"background:saddlebrown\">&nbsp;\n<\/td>\n<td class=c style=\"background:#8b4513\">&nbsp;\n<\/td>\n<td><dfn id=saddlebrown>saddlebrown<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#8b4513\n<\/td>\n<td class=c style=\"background:silver\">139,69,19 <\/p>\n<tr>\n<td class=c style=\"background:salmon\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fa8072\">&nbsp;\n<\/td>\n<td><dfn id=salmon>salmon<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fa8072\n<\/td>\n<td class=c style=\"background:silver\">250,128,114 <\/p>\n<tr>\n<td class=c style=\"background:sandybrown\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f4a460\">&nbsp;\n<\/td>\n<td><dfn id=sandybrown>sandybrown<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f4a460\n<\/td>\n<td class=c style=\"background:silver\">244,164,96 <\/p>\n<tr>\n<td class=c style=\"background:seagreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#2e8b57\">&nbsp;\n<\/td>\n<td><dfn id=seagreen>seagreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#2e8b57\n<\/td>\n<td class=c style=\"background:silver\">46,139,87 <\/p>\n<tr>\n<td class=c style=\"background:seashell\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fff5ee\">&nbsp;\n<\/td>\n<td><dfn id=seashell>seashell<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fff5ee\n<\/td>\n<td class=c style=\"background:silver\">255,245,238 <\/p>\n<tr>\n<td class=c style=\"background:sienna\">&nbsp;\n<\/td>\n<td class=c style=\"background:#a0522d\">&nbsp;\n<\/td>\n<td><dfn id=sienna>sienna<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#a0522d\n<\/td>\n<td class=c style=\"background:silver\">160,82,45 <\/p>\n<tr>\n<td class=c style=\"background:silver\">&nbsp;\n<\/td>\n<td class=c style=\"background:#c0c0c0\">&nbsp;\n<\/td>\n<td><dfn id=silver0>silver<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#c0c0c0\n<\/td>\n<td class=c style=\"background:silver\">192,192,192 <\/p>\n<tr>\n<td class=c style=\"background:skyblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#87ceeb\">&nbsp;\n<\/td>\n<td><dfn id=skyblue>skyblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#87ceeb\n<\/td>\n<td class=c style=\"background:silver\">135,206,235 <\/p>\n<tr>\n<td class=c style=\"background:slateblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#6a5acd\">&nbsp;\n<\/td>\n<td><dfn id=slateblue>slateblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#6a5acd\n<\/td>\n<td class=c style=\"background:silver\">106,90,205 <\/p>\n<tr>\n<td class=c style=\"background:slategray\">&nbsp;\n<\/td>\n<td class=c style=\"background:#708090\">&nbsp;\n<\/td>\n<td><dfn id=slategray>slategray<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#708090\n<\/td>\n<td class=c style=\"background:silver\">112,128,144 <\/p>\n<tr>\n<td class=c style=\"background:slategrey\">&nbsp;\n<\/td>\n<td class=c style=\"background:#708090\">&nbsp;\n<\/td>\n<td><dfn id=slategrey>slategrey<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#708090\n<\/td>\n<td class=c style=\"background:silver\">112,128,144 <\/p>\n<tr>\n<td class=c style=\"background:snow\">&nbsp;\n<\/td>\n<td class=c style=\"background:#fffafa\">&nbsp;\n<\/td>\n<td><dfn id=snow>snow<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#fffafa\n<\/td>\n<td class=c style=\"background:silver\">255,250,250 <\/p>\n<tr>\n<td class=c style=\"background:springgreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#00ff7f\">&nbsp;\n<\/td>\n<td><dfn id=springgreen>springgreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#00ff7f\n<\/td>\n<td class=c style=\"background:silver\">0,255,127 <\/p>\n<tr>\n<td class=c style=\"background:steelblue\">&nbsp;\n<\/td>\n<td class=c style=\"background:#4682b4\">&nbsp;\n<\/td>\n<td><dfn id=steelblue>steelblue<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#4682b4\n<\/td>\n<td class=c style=\"background:silver\">70,130,180 <\/p>\n<tr>\n<td class=c style=\"background:tan\">&nbsp;\n<\/td>\n<td class=c style=\"background:#d2b48c\">&nbsp;\n<\/td>\n<td><dfn id=tan>tan<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#d2b48c\n<\/td>\n<td class=c style=\"background:silver\">210,180,140 <\/p>\n<tr>\n<td class=c style=\"background:teal\">&nbsp;\n<\/td>\n<td class=c style=\"background:#008080\">&nbsp;\n<\/td>\n<td><dfn id=teal0>teal<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#008080\n<\/td>\n<td class=c style=\"background:silver\">0,128,128 <\/p>\n<tr>\n<td class=c style=\"background:thistle\">&nbsp;\n<\/td>\n<td class=c style=\"background:#d8bfd8\">&nbsp;\n<\/td>\n<td><dfn id=thistle>thistle<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#d8bfd8\n<\/td>\n<td class=c style=\"background:silver\">216,191,216 <\/p>\n<tr>\n<td class=c style=\"background:tomato\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ff6347\">&nbsp;\n<\/td>\n<td><dfn id=tomato>tomato<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ff6347\n<\/td>\n<td class=c style=\"background:silver\">255,99,71 <\/p>\n<tr>\n<td class=c style=\"background:turquoise\">&nbsp;\n<\/td>\n<td class=c style=\"background:#40e0d0\">&nbsp;\n<\/td>\n<td><dfn id=turquoise>turquoise<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#40e0d0\n<\/td>\n<td class=c style=\"background:silver\">64,224,208 <\/p>\n<tr>\n<td class=c style=\"background:violet\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ee82ee\">&nbsp;\n<\/td>\n<td><dfn id=violet>violet<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ee82ee\n<\/td>\n<td class=c style=\"background:silver\">238,130,238 <\/p>\n<tr>\n<td class=c style=\"background:wheat\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f5deb3\">&nbsp;\n<\/td>\n<td><dfn id=wheat>wheat<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f5deb3\n<\/td>\n<td class=c style=\"background:silver\">245,222,179 <\/p>\n<tr>\n<td class=c style=\"background:white\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffffff\">&nbsp;\n<\/td>\n<td><dfn id=white0>white<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffffff\n<\/td>\n<td class=c style=\"background:silver\">255,255,255 <\/p>\n<tr>\n<td class=c style=\"background:whitesmoke\">&nbsp;\n<\/td>\n<td class=c style=\"background:#f5f5f5\">&nbsp;\n<\/td>\n<td><dfn id=whitesmoke>whitesmoke<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#f5f5f5\n<\/td>\n<td class=c style=\"background:silver\">245,245,245 <\/p>\n<tr>\n<td class=c style=\"background:yellow\">&nbsp;\n<\/td>\n<td class=c style=\"background:#ffff00\">&nbsp;\n<\/td>\n<td><dfn id=yellow0>yellow<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#ffff00\n<\/td>\n<td class=c style=\"background:silver\">255,255,0 <\/p>\n<tr>\n<td class=c style=\"background:yellowgreen\">&nbsp;\n<\/td>\n<td class=c style=\"background:#9acd32\">&nbsp;\n<\/td>\n<td><dfn id=yellowgreen>yellowgreen<\/dfn>\n<\/td>\n<td class=c style=\"background:silver\">#9acd32\n<\/td>\n<td class=c style=\"background:silver\">154,205,50\n  <\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/td>\n<\/tr>\n<\/th>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2>Change the Color of the Background<\/h2>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#color-name {\r\nbackground: red;\r\n\/*Red, #f00 or #ff0000, rgb(100%,0%,0%); or rgb(266,0,0); hsl(0,100%,50%) *\/\r\n}<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" style=\"height: 300px\" id=\"color-name\">\n<h3>Live Demo<\/h3>\n<\/div>\n<p><br id=\"font-style\"\/><\/p>\n<h2 class=\"l-head\">Font Properties<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Basic properties that style the font. Children inherit these properties from parents.  <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n.font{\r\n\tcolor: #f68;\r\n\tfont-family: \"helvetica\", \"arial\", san-serif;\r\n\/* \"times new roman\", \"times\", serif *\/\r\n\tfont-weight: 400;\r\n\/* 100-900, normal, bold, lighter,  *\/\r\n\tfont-size: 3em;\r\n\/* xx-small, x-small, small, medium, large, x-large, xx-large *\/\r\n\tfont-style: normal;\r\n\/* italic, oblique *\/\r\n}<\/style><\/pre>\n<\/div>\n<div class=live-demo style=\"text-align: center; background: #eee; margin: 40px 0;\" >\n<h3>Live Demo<\/h3>\n<p class=\"font\">Font Style Properties\n<\/p>\n<\/div>\n<p class=\"pat\">More stylistic properties to change the appearance of fonts.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n.font {\r\n\tfont-variant: normal;\r\n\/* small-caps *\/\r\n\ttext-decoration: none;\r\n\/* underline, overline, line-through, none *\/\r\ntext-underline-offset: .5em\r\ntext-decoration-thickness:  .3px;\r\n\/* measurement like .5em, from-font*\/\r\n\ttext-transform: none;\r\n\/* capitalize, uppercase, lowercase, *\/\r\n\ttext-shadow: 2px 2px 3px  #469;\r\n\/* h offset, v offset, blur values, color *\/\r\n\t-webkit-text-stroke: .25px  #469;\r\n\/* width, color *\/\r\n}<\/style><\/pre>\n<\/div>\n<div class=live-demo style=\"text-align: center; background: #eee; margin: 40px 0;\" >\n<h3>Live Demo<\/h3>\n<p class=\"font\">Font Style Properties\n<\/p>\n<\/div>\n<p><br id=\"text_lout\"\/><\/p>\n<h2 class=\"l-head\">Text Layout Properties<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">These properties have to do with the inline flow of the characters. The children inherit all of these properties from their parents. I have created three selectors, one for the header <code>h3<\/code>., one for the body text <code>p<\/code> and one for the superscript inside the body text. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#text h2{\r\nletter-spacing: .25em;\r\nword-spacing: .1em;\r\n}\r\n#text p {\r\nletter-spacing: 0em;\r\nword-spacing: -.1em;\r\nline-height: 1.4;\r\n\/* any length unit or a multiple (of the font size) *\/\r\ntext-indent: 2em;\r\ntext-align: justify; \r\n\/* left, center, right, justify*\/\r\n}\r\n#text span {\r\nfont-size: 60%;\r\nvertical-align: text-top;\r\n\/* baseline: middle, sub, super, text-top, \r\ntext-bottom, top, bottom*\/\r\n}\r\n#text sup {\r\ncolor: red;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" style=\u201c background: #eee; border: 10px solid #aaa;\" id=\"text\">\n<h3>Live Demo<\/h3>\n<h2>Text Layout Properties<\/h2>\n<p>Change the text by applying different styles. Notice that when you make a mistake, the style reverts to the default style. The 1<span>st<\/span> selector is an h3. The 2<span>nd<\/span> selector is a p. The 3<span>rd<\/span> selector is a span acting like a superior (<code>sup<\/code>) tag and the 4<sup>th<\/sup> selector selects an actual <code>sup<\/code> tag and colors it red.<\/p>\n<\/div>\n<p><br id=\"box\"\/><\/p>\n<h2 class=\"l-head\">Box Properties<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">\n<figure style=\"width: 455px; margin: 0 auto;\"><img decoding=\"async\" src=\"http:\/\/www.w3.org\/TR\/CSS2\/images\/boxdim.png\" alt=\"box model\" \/><\/figure>\n<\/p>\n<p>Each HTML element is a box. The size of this box is determined by its inheritance, the content, or by a CSS rule. By default, the width of the box is inherited from the parent and the height is determined by the content. That makes the box is as wide as its parent, or the width of the window when the parent element is the body tag.\n<\/p>\n<p>The box remains invisible unless it has a border or a background.\n<\/p>\n<p>The box has four sides. You can target each side&#8217;s margin, border and padding at once <code> padding: 10px; <\/code> the vertical and horizontal sides separately <code>padding: 0 auto<\/code> or each side independently, starting at the top and moving clockwise: top, right, bottom and left <code>padding: 0px 30px 60px 90px;<\/code>. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#boxdemo {\r\npadding: 0px 30px 60px 90px;\r\nbackground: tan;\r\nborder: 20px solid hsla(330,50%,50%,.6);\r\nmargin:  0px auto 30px;\r\nheight: 300px;\r\nwidth: 300px;\r\nbackground-clip: content-box;\r\n} \/*border-box, padding-box, content-box*\/<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\">\n<div id=\"boxdemo\" >\nEach element is a box. The size of the box is determined by the parent element, or if CSS is used, the box can have a width, height, padding, border and margins. Padding and the border is added to the size of the content.\n<\/div>\n<\/div>\n<p><br id=\"border\"\/><\/p>\n<h2 class=\"l-head\">Border Properties<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">The border usually uses a shorthand where the width, color and style are given in this order: <code>border: 10px solid #f68;<\/code>. Leaving any one of these out breaks the border. Here is a list of the styles:<\/p>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px none silver;\">\n<strong>none<\/strong>: No border. Color and width are ignored (i.e., the border has width 0 unless the border is an image.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px hidden silver;\">\n<strong>hidden<\/strong>: Same as none but has different behavior in the border conflict resolution rules for border-collapsed tables.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px dotted silver;\">\n <strong>dotted<\/strong> A series of round (square?) dots.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px dashed silver;\">\n <strong>dashed<\/strong>: A series of square-ended dashes.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px solid #f68;\">\n <strong>solid<\/strong>: A single line segment.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px double silver;\">\n<strong>double<\/strong>: Two parallel solid lines with some space between them.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px groove silver;\">\n <strong>groove<\/strong>: Looks as if it were carved in the canvas.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px ridge silver;\">\n <strong>ridge<\/strong>: Looks as if it were coming out of the canvas.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px inset silver;\">\n <strong>inset<\/strong>: Looks as if the content on the inside of the border is sunken into the canvas.\n<\/div>\n<div style=\"margin: 10px 0; padding: 10px; border: 10px outset silver;\">\n <strong>outset<\/strong>: Looks as if the content on the inside of the border is coming out of the canvas.\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#border_style div {\r\nborder: 10px solid #f68;\r\n\/* dotted, double, groove, ridge, inset, outset *\/\r\nborder-top: 10px solid  #469;\r\nborder-width: 10px 20px 30px 1px;\r\n}<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" id=\"border_style\">\n<h3>Live Demo<\/h3>\n<div style=\"margin: 10px;\">You can change the border attributes including the style yourself.<\/div>\n<\/div>\n<p><br id=\"h-rule\"\/><\/p>\n<h2 class=\"l-head\"> Thematic Break<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">The Thematic Break, also knows as the horizontal rule in previous version of HTML has the following CSS for the default style. You can change that. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\nhr {\r\n\tdisplay: block;\r\n\tmargin-before: 0.5em;\r\n\tmargin-after: 0.5em;\r\n\tmargin-start: auto;\r\n\tmargin-end: auto;\r\n\tborder-style: inset;\r\n\tborder-width: 1px; \r\n\tborder-color:\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" id=\"border_style\">\n<h3>Live Demo<\/h3>\n<hr \/>\n<\/div>\n<p><br id=\"margin\"\/><\/p>\n<h2 class=\"l-head\">Margin and Padding Properties<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">These properties belong to the box model, and are similar, in that they create or subtract space from the sides of the box. I created two elements to show how border collapse works when two margins overlap and only the largest margin is used.  <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#box-b1 {\r\nwidth: 80%;\r\nmargin: 20px auto;\r\npadding: 20px 15px 30px 10px;\r\nborder: 5px solid silver;\r\nbackground: #f68;\r\n}\r\n#box-b1 p {\r\ntext-align: justify;\r\npadding: 3px;\r\nmargin: 3px;\r\nborder: 2px solid silver;\r\n}\r\n#box-b2 {\r\nwidth: 80%;\r\nmargin: 20px auto;\r\npadding: 20px 15px 30px 10px;\r\nborder: 5px solid silver;\r\nbackground:  #469;\r\ncolor: white;\r\n}\r\n#box-b2 p {\r\ntext-align: justify;\r\npadding: 3px;\r\nmargin: \u22123px;\r\nborder: 2px solid silver;\r\n}<\/style><\/pre>\n<\/div>\n<div class=live-demo style=\"\">\n<h3>Live Demo<\/h3>\n<div style=\"\" id=\"box-b1\">\n<p><strong>BOX 1: <\/strong>The margin is set for 20px auto, meaning that the box has 20 pixels of margin on top and bottom, and the left and right margins are automatically adjusted to center the box, possible only because <strong>the box has a declared width<\/strong> <\/p>\n<\/div>\n<div style=\"\" id=\"box-b2\">\n<p><strong>BOX 2: <\/strong>Notice that even though both boxes have a 20px margin, that margin collapses between the boxes. If you play around with the numbers, you will see that it collapses the smaller margin into the larger margin. <\/p>\n<\/div>\n<\/div>\n<p><br id=\"lists\"\/><\/p>\n<h2 class=\"l-head\">List Properties<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Lists are used for any element that acts like a list. Many elements are styled as lists, and when that happens, its important to take control over the list element, so that the items styled take on the look that does not necessarily look like a list. Menus are a great example of this but many other items are also considered candidates for being styled as lists. If the list-item-style is turned to one of the automatically incrementing counters, the un-ordered list is automatically turned into an ordered list. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#list ul li {\r\nborder: 1px solid #ccc;\r\nlist-style-position: outside;\r\n\/*outside, hanging, inside*\/\r\nlist-style-image: url(\"..\/12-fall\/stuff\/li.gif\");\r\n}\r\n#list ul ul li {\r\nlist-style: disc;\r\n\/* disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none*\/\r\nlist-style-position: inside;\r\n\/*outside, hanging, inside*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" id=\"list\" style=\"\">\n<h3>Live Demo<\/h3>\n<ul>\n<li> List Item <\/li>\n<li> List Item <\/li>\n<div>\n<ul>\n<li> List Item <\/li>\n<li> List Item <\/li>\n<li> List Item <\/li>\n<\/ul>\n<\/div>\n<\/ul>\n<\/div>\n<p>The HTML for the unordered list<\/p>\n<pre>\r\n&lt;ul>\r\n&lt;li> List Item &lt;\/li>\r\n&lt;li> List Item &lt;\/li>\r\n\t&lt;ul>\r\n\t\t&lt;li> List Item &lt;\/li>\r\n\t\t&lt;li> List Item &lt;\/li>\r\n\t\t&lt;li> List Item &lt;\/li>\r\n\t&lt;\/ul>\r\n&lt;\/li>\r\n&lt;\/ul>\r\n<\/pre>\n<div class=\"live-demo w60 id=\"list\" style=\"\">\n<h3>Live Demo<\/h3>\n<p>Have numbers span ordered lists by using the attribute <code>start=\"3\" <\/code>or 55 or 77<\/p>\n<ol>\n<li> List Item <\/li>\n<li> List Item <\/li>\n<\/ol>\n<ol start=\"3\">\n<li> List Item <\/li>\n<li> List Item <\/li>\n<\/ol>\n<ol start=\"55\">\n<li> List Item <\/li>\n<li> List Item <\/li>\n<\/ol>\n<ol start=\"77\">\n<li> List Item <\/li>\n<li> List Item <\/li>\n<\/ol>\n<\/div>\n<p>You can style the bullets of the list with <a href=\"http:\/\/b.parsons.edu\/~dejongo\/09-backgrounds-and-borders\/\">gradients<\/a> As <a href=\"http:\/\/meyerweb.com\/eric\/\">Eric Meyer<\/a> <a href=\"http:\/\/meyerweb.com\/eric\/css\/tests\/list-style-gradient.html\"> demonstrates<\/a>.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#stylishlist ul li {list-style: circle;}\r\n#stylishlist ul li {list-style: radial-gradient(closest-side,orange,orange 60%,blue 60%,blue 95%,transparent);}\r\n\r\n#stylishlist ol li {list-style: upper-alpha;}\r\n#stylishlist ol li {list-style: linear-gradient(45deg, red, red 50%, orange 50%, orange);}\r\n\r\n#stylishlist li:first-child {font-size: 200%;}\r\n#stylishlist li {font-size: 150%;}\r\n#stylishlist li:last-child {font-size: 100%;}\r\n\r\n#stylishlist ol.rainbow li {list-style: radial-gradient(farthest-side at bottom right,lightblue, lightblue 50%, violet, indigo, blue, green, yellow, orange, red, lightblue);\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w60\" id=\"stylishlist\" style=\"\">\n<h3>Live Demo<\/h3>\n<ul>\n<li>This is a list item.<\/li>\n<li>So is this.<\/li>\n<li>The list is unordered.<\/li>\n<\/ul>\n<ol>\n<li>This is a list item.<\/li>\n<li>So is this.<\/li>\n<li>The list is ordered.<\/li>\n<\/ol>\n<ol class=\"rainbow\">\n<li>This is a list item.<\/li>\n<li>So is this.<\/li>\n<li>The list is ordered.<\/li>\n<\/ol>\n<\/div>\n<p><br id=\"tables\"\/><\/p>\n<h2 class=\"l-head\">Tables <\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Tables used as tables are part of the HTML\/CSS landscape. Tables used for layout purposes are to be banished. That said, if you want to style a table, its best to create as many hooks in it as possible. This means that a table can have table header, a table footer and multiple table bodies. It is also possible to style columns. The code and an explanation of how the table works is reproduced below:<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#table { \r\nwidth: 100% !important; \r\nborder: 5px solid #aaa !important; \r\n\/*!important is needed to overcome WP styling*\/\r\n}\r\n#table caption {\r\npadding: 15px 0 10px;\r\nbackground: #fff;\r\nfont-size: 1.3em;\r\n}\r\n#table col:first-child {background: hsla(0,100%,90%,.4); border-right: 1px solid hsla(280,100%,30%,.2);}\r\n#table col:last-child {background: hsla(140,100%,90%,.4);}\r\n#table col {background: hsla(260,100%,90%,.4); border-right: 1px solid hsla(280,100%,30%,.2);}\r\n#table thead { border-bottom: 3px solid hsla(280,100%,30%,.6);}\r\n#table th { font-weight: 700;}\r\n#table tbody {border-bottom: 2px solid hsla(280,100%,30%,.3);\r\n}\r\n#table th, \r\n#table td {\r\nwidth: 25%; \r\ntext-align: center; \r\nvertical-align: top; \r\nborder: 1px solid #ddd;\r\nborder-spacing: 0;\r\nborder-collapse: collapse;\r\npadding: .3em;\r\ncaption-side: bottom;\r\n}\r\n#table td:first-child { text-align: left; }\r\n#table  tr:nth-child(odd){background-color: rgba(255,255,255,.2);}\r\n#table tr:nth-child(even){background-color: rgba(0,0,0,.1);}\r\n#table tfoot {\r\nbackground: hsla(40,100%,50%,.2);\r\ntext-align: left;\r\nfont-size: .8em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<table id=\"table\">\n<caption>The Caption Holds the Title of the Table<br \/>\n <\/caption>\n<col \/>\n<col \/>\n<col \/>\n<thead>\n<tr>\n<th>Head 1<\/th>\n<th>Head 2<\/th>\n<th>Head 3<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<\/tbody>\n<tbody>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<tr>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<td> table cell item <\/td>\n<\/tr>\n<\/tbody>\n<tfoot>\n<tr>\n<td colspan=\"3\">\n\tThe Footer is a Place for Information About the Table.\n  <\/td>\n<\/tr>\n<\/tfoot>\n<\/table>\n<pre style=\"font-size: 50%;\">\r\n&lt;table id=\"table\">\r\n &lt;caption>The Caption Holds the Title of the Table\r\n &lt;\/caption>\r\n &lt;col>&lt;col>&lt;col>\r\n &lt;thead> \r\n  &lt;tr>&lt;th>Head 1&lt;\/th>&lt;th>Head 2&lt;\/th>&lt;th>Head 3&lt;\/th>&lt;\/tr>\r\n &lt;\/thead>\r\n &lt;tbody>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td> &lt;td> table cell item &lt;\/td> &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n &lt;\/tbody>\r\n &lt;tbody>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>  &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n  &lt;tr> &lt;td> table cell item &lt;\/td> &lt;td> table cell item &lt;\/td> &lt;td> table cell item &lt;\/td>&lt;\/tr>\r\n &lt;\/tbody>\r\n &lt;tfoot>\r\n &lt;tr>&lt;td colspan=\"3\">\r\n\tThe Footer is a Place for Information About the Table.\r\n  &lt;\/td>&lt;\/tr>\r\n &lt;\/tfoot>\r\n&lt;\/table>\r\n<\/pre>\n<\/p>\n<p>The HTML code for the table can be divided into parts, and each can be styled separately. There are table headings, footers, data cells and captions and rows, all of which can be styled. The even and odd table rows are styled using pseudo selectors. If you look at the code, you can see that the table caption comes first, then the table header, two table bodies that contain the table rows and the table data cells and finally a table footer. The row tags allow the three rows to be styled individually, though that too could be handled by pseudo selectors. <\/p>\n<p><br id=\"pseudo-class\"\/><\/p>\n<h2 class=\"l-head\">Pseudo Classes<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Pseudo classes are additional classes that belong to the same element. They are most frequently applied to the link element for navigation, where hover and click or visited states can be applied to that link, though any element can have hover states applied:<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi-f ul { background: #ccc; \r\nwidth: 100%; \r\n\/*change width to 100px for vertical navigation \u2014 that constrains the box so the list items stack below one another*\/\r\nlist-style: none;\r\noverflow: auto;\r\n}\r\n#navi-f li { float: left; \r\npadding: 0 3%;}\r\n#navi-f a:link {\r\ndisplay: block;\r\nwidth: 100%;\r\ncolor: #fff; \r\nbackground: #fa5; \r\npadding: 4px 0px;\r\nmargin: 5px 5px;\r\ntext-align: center;\r\nfont-weight: 700;\r\nborder-left: 5px solid #a00;\r\nborder-bottom: 1px solid #000;\r\ntext-decoration: none;\r\n}\r\n#navi-f a:visited {color: blue }\r\n#navi-f a:hover {color: #000;\r\nbackground: #ff5;\r\nborder-left: 5px solid #f00;\r\n}\r\n#navi-f a:focus {color: green;\r\nBackground: blue;}\r\n#navi-f a:active {color: lime;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi-f\" class=live-demo id=\"list\" style=\"padding: 0;\">\n<h3>Live Demo<\/h3>\n<ul style=\"padding: 30px 0; margin: 0\">\n<li><a href=\"#pseudo-class\">Pseudo<\/a><\/li>\n<li><a href=\"#font-style\">Fonts<\/a><\/li>\n<li><a href=\"#text_lout\">Text<\/a><\/li>\n<li><a href=\"#border\">Borders<\/a><\/li>\n<li><a href=\"#margin\">Margins<\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<p><br id=\"pseudo-classn\"\/><\/p>\n<h2 class=\"l-head\">Pseudo Classes: not<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">\n<p>A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover <code>li:not(:target):not(:hover) <\/code>.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#vce {\r\n\tdisplay: table;\r\n\twidth: 95%;\r\n}\r\n#vce > article,\r\n#vce > nav {\r\n\tdisplay: table-cell; \r\n\twidth: 200px;\r\n}\r\n#vce > article {\r\n\twidth: 100%;\r\n\tbackground: white;\r\n}\r\n#vce ul,\r\n#vce li {\r\n\tlist-style: none;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n#vce > nav > ul {\r\n\tbackground: #444;\r\n\tborder-radius: 0.5em;\r\n\tpadding: 0.075em;\r\n}\r\n#vce li {\r\n\tpadding: 0 0.5em;\r\n\tbackground: #ddd;\r\n\tcolor: black;\r\n\tborder-radius: 0.40em;\r\n\tborder: #444 solid 0.075em;\r\n}\r\n#vce li li {\r\n\tbackground: #444;\r\n\tcolor: white;\r\n\tmargin: 0 -0.5em;\r\n\tborder-radius: 0;\r\n}\r\n#vce li li:first-child {\r\n\tborder-radius: 0.375em 0.375em 0 0;\r\n}\r\n#vce a {\r\n\tbackground: transparent;\r\n\tcolor: inherit;\r\n}\r\n#vce > nav > ul > li:target,\r\n#vce > nav > ul > li:hover {\r\n\tbackground: #888;\r\n\tcolor: white;\r\n}\r\n#vce > nav > ul > li:not(:target):not(:hover) > ul {\r\n\theight: 0;\r\n\toverflow: hidden;\r\n}<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\" style=\"padding: 4px;\">\n<h3>Live Demo<\/h3>\n<div id=\"vce\">\n<nav>\n<ul>\n<li id=\"nav-about\"><a href=\"#nav-about\">Layout Modes<\/a>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#layoutModes\" target=\"_blank\">Layout Modes<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#block\" target=\"_blank\">Block Display<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#inline\" target=\"_blank\">Inline Display<\/a>\n\t\t\t        <\/li>\n<\/ul>\n<\/li>\n<li id=\"nav-projects\"><a href=\"#nav-projects\">Positioning<\/a>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#positioning\" target=\"_blank\">Normal<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#relative\" target=\"_blank\">Relative<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#absolute\" target=\"_blank\">Absolute<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#fixed\" target=\"_blank\">Fixed<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#floats\" target=\"_blank\">Floats<\/a>\n\t\t\t\t<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#tables\" target=\"_blank\">Tables<\/a>\n\t\t\t        <\/li>\n<\/ul>\n<\/li>\n<li id=\"nav-interact\"><a href=\"#nav-interact\">Other<\/a>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#display\" target=\"_blank\">Display<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#zindex\" target=\"_blank\">Z Index<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#over-flow\" target=\"_blank\">Overflow<\/a>\n\t\t\t        <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/nav>\n<div>\n\t\t\t   Here you will find links to the <a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\" target=\"_blank\">layout modes<\/a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.\n\t\t\t  <\/div>\n<\/p><\/div>\n<\/div>\n<p>HTML<\/p>\n<pre style=\"font-size: 70%;\">\r\n  &lt;nav>\r\n    &lt;ul>\r\n      &lt;li id=\"nav-about\">&lt;a href=\"#nav-about\">Layout Modes&lt;\/a>\r\n        &lt;ul>\r\n          &lt;li>&lt;a href=\"#layoutModes\" target=\"_blank\">Layout Modes&lt;\/a>\r\n          &lt;li>&lt;a href=\"#block\" target=\"_blank\">Block Display&lt;\/a>\r\n          &lt;li>&lt;a href=\"#inline\" target=\"_blank\">Inline Display&lt;\/a>\r\n        &lt;\/ul>\r\n      &lt;li id=\"nav-projects\">&lt;a href=\"#nav-projects\">Positioning&lt;\/a>\r\n        &lt;ul>\r\n          &lt;li>&lt;a href=\"#positioning\" target=\"_blank\">Normal&lt;\/a>\r\n          &lt;li>&lt;a href=\"#relative\" target=\"_blank\">Relative&lt;\/a>\r\n          &lt;li>&lt;a href=\"#absolute\" target=\"_blank\">Absolute&lt;\/a>\r\n          &lt;li>&lt;a href=\"#fixed\" target=\"_blank\">Fixed&lt;\/a>\r\n          &lt;li>&lt;a href=\"#floats\" target=\"_blank\">Floats&lt;\/a> \r\n          &lt;li>&lt;a href=\"#tables\" target=\"_blank\">Tables&lt;\/a>\r\n        &lt;\/ul>\r\n      &lt;li id=\"nav-interact\">&lt;a href=\"#nav-interact\">Other&lt;\/a>\r\n        &lt;ul>\r\n          &lt;li>&lt;a href=\"#display\" target=\"_blank\">Display&lt;\/a>\r\n          &lt;li>&lt;a href=\"#zindex\" target=\"_blank\">Z Index&lt;\/a>\r\n          &lt;li>&lt;a href=\"#over-flow\" target=\"_blank\">Overflow&lt;\/a>\r\n        &lt;\/ul>\r\n    &lt;\/ul>\r\n  &lt;\/nav>\r\n  &lt;div>\r\n   Here you will find links to the &lt;a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\" target=\"_blank\">layout modes&lt;\/a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties. \r\n  &lt;\/div>\r\n&lt;\/div>\r\n<\/pre>\n<p><br id=\"pseudo-e\"\/><\/p>\n<h2 class=\"l-head\">Pseudo Elements<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">\nPseudo classes add elements to existing elements, in CSS rather than in the document. They can be first letter and line in an inline element and the before and after a block element.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#pe p:first-letter {\r\ncolor: hsla(80,85%,26%,1);\r\nfont-size:2em;\r\n}\r\n#pe p:first-line {\r\ncolor: hsla(80,85%,26%,1);\r\nfont-variant:small-caps;\r\n}\r\n#pe div {\r\npadding: 20px;\r\nposition: relative;\r\nbackground: hsla(80,85%,85%,1);\r\nbox-shadow: -5px 5px 4px hsla(0,0%,0%,.45)\r\n}\r\n#pe div:before {\r\ncontent:\"\";\r\nposition:absolute;\r\ntop:0; right:0;\r\nborder-width:0 32px 32px 0;\r\nborder-style:solid;\r\nborder-color: hsla(80,85%,56%,1) #eee;\r\nbox-shadow: -3px 2px 2px hsla(0,0%,0%,.3), -3px 2px 2px hsla(0,0%,0%,.3);\r\n}\r\n#pe h2:before {\r\ncontent: \"before \u2014 \";\r\nfont-size: 50%; color: hsla(240,100%,50%,.6);\r\n}\r\n#pe h2:after {\r\ncontent: \" \u2014 after\";\r\nfont-size: 50%; color: hsla(240,100%,50%,.6);\r\n}\r\n#pe div :first-child { \r\nbackground: hsla(10,100%,50%,.2); \r\npadding: 10px;\r\n}\r\n#pe q:before {\r\n\tcontent: \"\u201c\"; \r\n}\r\n#pe q:after {\r\n    content: \"\u201d\"; \r\n}<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w75\"  id=\"pe\">\n<h3>Live Demo<\/h3>\n<div>\n<h2>Pseudo Elements<\/h2>\n<p>A pseudo element I use often is the first-line pseudo element.\n<\/p>\n<p>But other pseudo elements, particularly the before and after, are powerful, as you can see in this posted notes look complete with a page curl above right, created by the before element on the div above, without additional elements in the HTML. <a href=\"01-writing-html5\/#inline_elements\">Quotes<\/a> as in <code>&lt;q>quotation marks&lt;\/q><\/code>can be given <q>quotation marks<\/q> using the before and after pseudo elements.\n<\/p>\n<p>See more such wizardry in the creation of <a href=\"http:\/\/nicolasgallagher.com\/pure-css-gui-icons\/demo\/#non\">84 icons<\/a>, using nothing but such CSS tricks.<\/p>\n<\/div>\n<\/div>\n<p>The trick with the folded corner is a really thick border that surrounds the empty content between the quotes of the css content property. The corners of the border meet at a 45\u00b0 angle, and when the content is nothing, all four corners meet at the middle in a sharp point. Put two such corners together and you get the triangle used to shape the page curl. All you have to do is fill those two sides with the color of the page curl, and fill the other two sides with the background color to block out the corner of the note, which would otherwise stick out.<br \/>\n<br id=\"cursor\"\/><\/p>\n<h2 class=\"l-head\">Cursor<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Give the user feedback. Changing the cursor is an instruction away. Roll over the square to see the change.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#cursor {\r\ncursor: pointer;\r\n\/*auto, crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, inherit*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" style=\"height: w300px;\" id=\"cursor\">\n<h3>Live Demo<\/h3>\n<div>Roll the cursor over this square to see it change to a little hand with a pointing finger cursor. Change the cursor in the CSS view to check out all of the cursors.<\/div>\n<\/div>\n<h2>So much more<\/h2>\n<p><a href=\"https:\/\/30-seconds.github.io\/30-seconds-of-css\/\">30 Seconds if CSS<\/a>. Ready made CSS snippets to help you build your website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents Color Font Properties Text Layout Properties Box Properties Border Properties Thematic Break Margin &#038; Padding List Properties Tables Pseudo Classes Pseudo Classes: not Pseudo Elements Cursor There are many CSS properties. You do not have to memorize them all. &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/03-applying-css\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/43"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":111,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":4673,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/43\/revisions\/4673"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}