Skip to main contentdfsdf

      • CSS Resources & Other Sites    CSS Basics.com      NOTE: We also have this in PDF format. We also have an assortment of helpful CSS & related books.  Chapter: 1 - Introduction to CSS    A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it's style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on...) are accomplished within a CSS.    At this point you have some choices of how to use the CSS, either internally or externally.  Internal Stylesheet    First we will explore the internal method. This way you are simply placing the CSS code within the tags of each (X)HTML file you want to style with the CSS. The format for this is shown in the example below.      <title>  <style type="text/css">  CSS Content Goes Here  </style>  </head>  <body>    With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.  External Stylesheet    Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.    <link href="Path To stylesheet.css" rel="stylesheet" type="text/css" />    Or you can also use the @import method as shown below    <style type="text/css">@import url(Path To st</ul></div></div> <div id="sticky_1_0" class="stickys" style="display:none"> <ul id="stickyUL_1_0" class="stickysUL"></ul> </div> <div id="sEditor_1_0" class="cEditor" style="display:none"></div><!--sEditor--> </div><!--highlight--> <span class="hOpts"> </span><!--hOpts--> </li><!-- annotation --> </ul> </div> <div class="clear"></div> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_3" pIndex="2" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_2" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_2" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_2" class="readed" href="http://www.intensivstation.ch/en/css" rel="nofollow" target="_blank" >intensivstation :: CSS HOW-TO</a> <span id="expandArea_2" class="expandArea"> <span id="expandInfo_2" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 20, 08 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_2" class="dItemsInfo dItemsDes" > <p id="desc_2" class="desc" style="display:none;" > <span id="descContent_2" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.intensivstation.ch/en/css" title="http://www.intensivstation.ch/en/css">www.intensivstation.ch/css</a> </span> <span id="tags_2"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_2" class="dItemsInfo" > <div id="bDisplayTemp_2" class="ditemItemDisplayTemp"> <div id="sharedTo_2" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_2" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_4" pIndex="3" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_3" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_3" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_3" class="readed" href="http://writing.colostate.edu/guides/processes/html/index.cfm" rel="nofollow" target="_blank" >Writing the Web: A Step-by-Step Guide, with Resources</a> <span id="expandArea_3" class="expandArea"> <span id="expandInfo_3" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> May 19, 08 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_3" class="dItemsInfo dItemsDes" > <p id="desc_3" class="desc" style="display:none;" > <span id="descContent_3" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://writing.colostate.edu/guides/processes/html/index.cfm" title="http://writing.colostate.edu/guides/processes/html/index.cfm">writing.colostate.edu/...index.cfm</a> </span> <span id="tags_3"> <a href="/user/robeadie/JavaScript">JavaScript</a> <a href="/user/robeadie/CSS">CSS</a> <a href="/user/robeadie/writing">writing</a> <a href="/user/robeadie/for">for</a> <a href="/user/robeadie/the">the</a> <a href="/user/robeadie/web">web</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_3" class="dItemsInfo" > <div id="bDisplayTemp_3" class="ditemItemDisplayTemp"> <div id="sharedTo_3" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_3" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_5" pIndex="4" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_4" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_4" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_4" class="readed" href="http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369" rel="nofollow" target="_blank" >Ten CSS tricks you may not know</a> <span id="expandArea_4" class="expandArea"> <span id="expandInfo_4" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Sep 23, 04 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_4" class="dItemsInfo dItemsDes" > <p id="desc_4" class="desc" style="display:none;" > <span id="descContent_4" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369" title="http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369">www.evolt.org/...60369</a> </span> <span id="tags_4"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_4" class="dItemsInfo" > <div id="bDisplayTemp_4" class="ditemItemDisplayTemp"> <div id="sharedTo_4" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_4" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_6" pIndex="5" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_5" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_5" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_5" class="readed" href="http://www.corecss.com/properties/full-chart.php" rel="nofollow" target="_blank" >Full CSS Property Compatibility Chart</a> <span id="expandArea_5" class="expandArea"> <span id="expandInfo_5" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Feb 15, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_5" class="dItemsInfo dItemsDes" > <p id="desc_5" class="desc" style="display:none;" > <span id="descContent_5" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.corecss.com/properties/full-chart.php" title="http://www.corecss.com/properties/full-chart.php">www.corecss.com/...full-chart.php</a> </span> <span id="tags_5"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_5" class="dItemsInfo" > <div id="bDisplayTemp_5" class="ditemItemDisplayTemp"> <div id="sharedTo_5" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_5" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_7" pIndex="6" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_6" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_6" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_6" class="readed" href="http://web.tampabay.rr.com/bmerkey/examples/landscape-test.html" rel="nofollow" target="_blank" >Print in Landscape</a> <span id="expandArea_6" class="expandArea"> <span id="expandInfo_6" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 09, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_6" class="dItemsInfo dItemsDes" > <p id="desc_6" class="desc" style="display:none;" > <span id="descContent_6" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://web.tampabay.rr.com/bmerkey/examples/landscape-test.html" title="http://web.tampabay.rr.com/bmerkey/examples/landscape-test.html">web.tampabay.rr.com/...landscape-test.html</a> </span> <span id="tags_6"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_6" class="dItemsInfo" > <div id="bDisplayTemp_6" class="ditemItemDisplayTemp"> <div id="sharedTo_6" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_6" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_8" pIndex="7" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_7" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_7" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_7" class="readed" href="http://en.selfhtml.org/css/eigenschaften/printlayouts.htm" rel="nofollow" target="_blank" >SELFHTML: CSS Style Sheets / CSS properties / Layouts for print media</a> <span id="expandArea_7" class="expandArea"> <span id="expandInfo_7" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 09, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_7" class="dItemsInfo dItemsDes" > <p id="desc_7" class="desc" style="display:none;" > <span id="descContent_7" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://en.selfhtml.org/css/eigenschaften/printlayouts.htm" title="http://en.selfhtml.org/css/eigenschaften/printlayouts.htm">en.selfhtml.org/...printlayouts.htm</a> </span> <span id="tags_7"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_7" class="dItemsInfo" > <div id="bDisplayTemp_7" class="ditemItemDisplayTemp"> <div id="sharedTo_7" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_7" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_9" pIndex="8" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_8" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_8" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_8" class="readed" href="http://www.w3.org/TR/2004/CR-css-print-20040225" rel="nofollow" target="_blank" >CSS Print Profile</a> <span id="expandArea_8" class="expandArea"> <span id="expandInfo_8" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 09, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_8" class="dItemsInfo dItemsDes" > <p id="desc_8" class="desc" style="display:none;" > <span id="descContent_8" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.w3.org/TR/2004/CR-css-print-20040225" title="http://www.w3.org/TR/2004/CR-css-print-20040225">www.w3.org/...CR-css-print-20040225</a> </span> <span id="tags_8"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_8" class="dItemsInfo" > <div id="bDisplayTemp_8" class="ditemItemDisplayTemp"> <div id="sharedTo_8" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_8" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_10" pIndex="9" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_9" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_9" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_9" class="readed" href="http://www.meyerweb.com/eric/css/edge/index.html" rel="nofollow" target="_blank" >css/edge</a> <span id="expandArea_9" class="expandArea"> <span id="expandInfo_9" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 18, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_9" class="dItemsInfo dItemsDes" > <p id="desc_9" class="desc" style="display:none;" > <span id="descContent_9" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.meyerweb.com/eric/css/edge/index.html" title="http://www.meyerweb.com/eric/css/edge/index.html">www.meyerweb.com/...index.html</a> </span> <span id="tags_9"> <a href="/user/robeadie/Eric">Eric</a> <a href="/user/robeadie/Meyer%27s">Meyer's</a> <a href="/user/robeadie/CSS">CSS</a> <a href="/user/robeadie/Design">Design</a> <a href="/user/robeadie/Web">Web</a> <a href="/user/robeadie/Site">Site</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_9" class="dItemsInfo" > <div id="bDisplayTemp_9" class="ditemItemDisplayTemp"> <div id="sharedTo_9" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_9" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_11" pIndex="10" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_10" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_10" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_10" class="readed" href="http://www.stunicholls.myby.co.uk/index.html" rel="nofollow" target="_blank" >The CSS Playground | Cutting Edge CSS</a> <span id="expandArea_10" class="expandArea"> <span id="expandInfo_10" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 18, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_10" class="dItemsInfo dItemsDes" > <p id="desc_10" class="desc" style="display:none;" > <span id="descContent_10" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.stunicholls.myby.co.uk/index.html" title="http://www.stunicholls.myby.co.uk/index.html">www.stunicholls.myby.co.uk/index.html</a> </span> <span id="tags_10"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_10" class="dItemsInfo" > <div id="bDisplayTemp_10" class="ditemItemDisplayTemp"> <div id="sharedTo_10" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_10" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_12" pIndex="11" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_11" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_11" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_11" class="readed" href="http://cssvault.com" rel="nofollow" target="_blank" >CSS Vault | The Web's CSS Site</a> <span id="expandArea_11" class="expandArea"> <span id="expandInfo_11" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_11" class="dItemsInfo dItemsDes" > <p id="desc_11" class="desc" style="display:none;" > <span id="descContent_11" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://cssvault.com" title="http://cssvault.com">cssvault.com</a> </span> <span id="tags_11"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_11" class="dItemsInfo" > <div id="bDisplayTemp_11" class="ditemItemDisplayTemp"> <div id="sharedTo_11" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_11" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_13" pIndex="12" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_12" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_12" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_12" class="readed" href="http://imfo.ru/csstest/css_hacks/import.php" rel="nofollow" target="_blank" >Hide CSS from browsers :: @import</a> <span id="expandArea_12" class="expandArea"> <span id="expandInfo_12" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_12" class="dItemsInfo dItemsDes" > <p id="desc_12" class="desc" style="display:none;" > <span id="descContent_12" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://imfo.ru/csstest/css_hacks/import.php" title="http://imfo.ru/csstest/css_hacks/import.php">imfo.ru/...import.php</a> </span> <span id="tags_12"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_12" class="dItemsInfo" > <div id="bDisplayTemp_12" class="ditemItemDisplayTemp"> <div id="sharedTo_12" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_12" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_14" pIndex="13" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_13" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_13" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_13" class="readed" href="http://css-discuss.incutio.com/?page=ImportHack" rel="nofollow" target="_blank" >Import Hack - css-discuss</a> <span id="expandArea_13" class="expandArea"> <span id="expandInfo_13" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_13" class="dItemsInfo dItemsDes" > <p id="desc_13" class="desc" style="display:none;" > <span id="descContent_13" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://css-discuss.incutio.com/?page=ImportHack" title="http://css-discuss.incutio.com/?page=ImportHack">css-discuss.incutio.com/?page=ImportHack</a> </span> <span id="tags_13"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_13" class="dItemsInfo" > <div id="bDisplayTemp_13" class="ditemItemDisplayTemp"> <div id="sharedTo_13" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_13" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_15" pIndex="14" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_14" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_14" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_14" class="readed" href="http://www.dithered.com/css_filters/css_only/index.php" rel="nofollow" target="_blank" >CSS Filters - CSS-only Filters Summary</a> <span id="expandArea_14" class="expandArea"> <span id="expandInfo_14" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_14" class="dItemsInfo dItemsDes" > <p id="desc_14" class="desc" style="display:none;" > <span id="descContent_14" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.dithered.com/css_filters/css_only/index.php" title="http://www.dithered.com/css_filters/css_only/index.php">www.dithered.com/...index.php</a> </span> <span id="tags_14"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_14" class="dItemsInfo" > <div id="bDisplayTemp_14" class="ditemItemDisplayTemp"> <div id="sharedTo_14" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_14" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_16" pIndex="15" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_15" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_15" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_15" class="readed" href="http://www.w3.org/TR/REC-CSS2/cover.html" rel="nofollow" target="_blank" >Cascading Style Sheets, Level 2 CSS2 Specification</a> <span id="expandArea_15" class="expandArea"> <span id="expandInfo_15" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_15" class="dItemsInfo dItemsDes" > <p id="desc_15" class="desc" style="display:none;" > <span id="descContent_15" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.w3.org/TR/REC-CSS2/cover.html" title="http://www.w3.org/TR/REC-CSS2/cover.html">www.w3.org/cover.html</a> </span> <span id="tags_15"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_15" class="dItemsInfo" > <div id="bDisplayTemp_15" class="ditemItemDisplayTemp"> <div id="sharedTo_15" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_15" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_17" pIndex="16" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_16" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_16" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_16" class="readed" href="http://www.positioniseverything.net/explorer/italicbug-ie.html" rel="nofollow" target="_blank" >IE and italics problem</a> <span id="expandArea_16" class="expandArea"> <span id="expandInfo_16" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_16" class="dItemsInfo dItemsDes" > <p id="desc_16" class="desc" style="display:none;" > <span id="descContent_16" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.positioniseverything.net/explorer/italicbug-ie.html" title="http://www.positioniseverything.net/explorer/italicbug-ie.html">www.positioniseverything.net/...italicbug-ie.html</a> </span> <span id="tags_16"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_16" class="dItemsInfo" > <div id="bDisplayTemp_16" class="ditemItemDisplayTemp"> <div id="sharedTo_16" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_16" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_18" pIndex="17" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_17" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_17" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_17" class="readed" href="http://www.positioniseverything.net/index.php" rel="nofollow" target="_blank" >/* Position Is Everything */    Modern browser bugs explained in detail!</a> <span id="expandArea_17" class="expandArea"> <span id="expandInfo_17" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Mar 23, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_17" class="dItemsInfo dItemsDes" > <p id="desc_17" class="desc" style="display:none;" > <span id="descContent_17" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.positioniseverything.net/index.php" title="http://www.positioniseverything.net/index.php">www.positioniseverything.net/index.php</a> </span> <span id="tags_17"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_17" class="dItemsInfo" > <div id="bDisplayTemp_17" class="ditemItemDisplayTemp"> <div id="sharedTo_17" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_17" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_19" pIndex="18" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_18" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_18" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_18" class="readed" href="http://www.bigbaer.com/css_tutorials/css_font_size.htm" rel="nofollow" target="_blank" >CSS Font Size Explained</a> <span id="expandArea_18" class="expandArea"> <span id="expandInfo_18" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Apr 15, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_18" class="dItemsInfo dItemsDes" > <p id="desc_18" class="desc" style="display:none;" > <span id="descContent_18" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.bigbaer.com/css_tutorials/css_font_size.htm" title="http://www.bigbaer.com/css_tutorials/css_font_size.htm">www.bigbaer.com/...css_font_size.htm</a> </span> <span id="tags_18"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_18" class="dItemsInfo" > <div id="bDisplayTemp_18" class="ditemItemDisplayTemp"> <div id="sharedTo_18" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_18" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> <li id="ditemListContent_20" pIndex="19" onmouseover="hoverMenuBox.bind(this)();" onmouseout="outMenuBox.bind(this)();"> <div id="ditemItem_19" class="ditemItem withNothing"> <div class="ditemTitleArea"> <div class="titleinner"> <h3 class="ditemTitle "> <div id="title_19" class="title bookmarkTitle"> <div class="Titleinner"> <a id="titleLink_19" class="readed" href="http://www.w3.org/QA/Tips/color" rel="nofollow" target="_blank" >If You Pick One Color, Pick Them All - Quality Web Tips</a> <span id="expandArea_19" class="expandArea"> <span id="expandInfo_19" class="expandInfoaction expand " style="right: 25px; display: none; " ></span> </span> </div> </div> </h3> </div> <!--title--> <div class="actions"> <div class="timepoint"> Apr 15, 05 </div> </div> <div class="publicLibraryAction"> </div> <div class="clear"></div> <div id="dItemsDes_19" class="dItemsInfo dItemsDes" > <p id="desc_19" class="desc" style="display:none;" > <span id="descContent_19" class="content"></span> </p> </div> <div class="tags"> <div class="tags_"> <p class="tagspan"> <span class="oriURL"> <a rel="nofollow" href="http://www.w3.org/QA/Tips/color" title="http://www.w3.org/QA/Tips/color">www.w3.org/color</a> </span> <span id="tags_19"> <a href="/user/robeadie/CSS">CSS</a> </span> </p> </div> </div> </div> <!--ItemTitleEnd--> <div id="dItemsInfo_19" class="dItemsInfo" > <div id="bDisplayTemp_19" class="ditemItemDisplayTemp"> <div id="sharedTo_19" class="shared" style="display:none;"></div> <!--shared--> <p id="belongList_19" class="shared"> </p><!--belongList--> </div> <!--ditemDisplayTemp--> </div> </div><!--ditemItem--> </li><!--item--> </ul><!--DitemListContent--> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="contentb"><div class="bListBottomOpts"> <span class="pagination"> <span><span class="bold">1</span> - <span class="bold">20</span> of <span class="bold">43</span></span> <a href="/list/robeadie/CSS?page_num=1&order_by=1">Next ›</a> <a href="/list/robeadie/CSS?page_num=2&order_by=1">Last »</a> </span><!--pagination--> <div class="contextMenu bListCountOptions" style="display:inline"><a href="javascript:void(0);">20<b></b></a> items/page <ul class="subMenu bListCountUL" style="display:none;"> <li><a class="currentCount" href="javascript:void(0);" onclick="changeListCount('20')">20</a></li> <li><a href="javascript:void(0);" onclick="changeListCount('50')">50</a></li> <li><a href="javascript:void(0);" onclick="changeListCount('100')">100</a></li> </ul> </div> </div><!--bListOptions1--></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> <div id="guestBook"> <div class="guestBookTitle"> List Comments (<b class="gbCommentsTotal">0</b>) </div><!--guestBookTitle--> <div class="shadow"></div> <ul id="gbComments"> </ul><!--comments--> </div><!-- guest book--> </div> </div><!--leftColumn--> <div id="left_Column"> <div id="inner_Left_column"> <style type="text/css"> div.upgrade{ } a.converted{ color: #5F5F5F; font-weight: bold; } span.convertedIcon { width: 20px; height: 16px; margin-right: 6px; display: inline-block; background: url('/images/upgraded-w.png') no-repeat top left; } a.converting{ font-size: 12px; color: #666; font-style: italic; font-weight: normal; text-decoration: none; cursor: pointer; } a.convertIcon { margin-right: 10px; padding-left: 20px; display: inline-block; background: url('/images/upgrade-w.png') no-repeat top left; color: #5F5F5F; font-weight: bold; line-height: 21px; } a.deleteIcon { line-height: 21px; padding-left: 20px; display: inline-block; background: url('/images/delete-w.png') no-repeat top left; color: #5F5F5F; font-weight: bold; } a.hidden{ display: none !important; } </style> <div class="sideBox" id="listInfo"> <h3 class="bTitle">List Info</h3> <div class="content"> <div class="contentInner" > <a class="avatar48 avatarPopup" title="Robert Eadie" href="/profile/robeadie"><img src="https://resources.diigo.com/images/avatar/user/robeadie_48.jpg" alt="Robert Eadie" /></a><!--avatar--> <p title="Robert Eadie" ><a href="/user/robeadie"><strong username="robeadie" >Robert Eadie</strong></a></p> <p><strong>43</strong> items | <strong><span id="visitCount">2</span></strong> visits</p> <div class="clear"></div> <div class="listDetails"> <p>Updated on Apr 23, 09 <br/>Created on Apr 23, 09</p> <p>Category: <a href="/list/category?cat_id=2">Computers & Internet</a></p> <p>URL: <input class="inputTxt2" onclick="select(this);" value="https://www.diigo.com/list/robeadie/CSS" /></p> </div><!--details--> <div class="listActions"> <ul> <li class="twitterAction" ><a onclick="window.open('http://twitter.com/home?page=2&status=CSS+--+https%3A%2F%2Fwww.diigo.com%2Flist%2Frobeadie%2FCSS', 'twitterthis', 'scrollbars=yes,menubar=no,width=620,height=420,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100'); return false;" href="javascript:void(0);"><span>Twitter This</span></a></li> <li class="addthisAction" ><a onclick="window.open('http://www.addthis.com/bookmark.php?pub=diigo.com&url=https%3A%2F%2Fwww.diigo.com%2Flist%2Frobeadie%2FCSS&title=CSS', 'addthis', 'scrollbars=yes,menubar=no,width=620,height=420,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100'); return false;" href="javascript:void(0);"><span>Share This</span></a></li> </ul> </div><!--actions--> <div class="clear"></div> </div><!--contentInner--> </div><!--content--> </div><!--sideBox--> </div></div><!--rightColumn--> <div style="clear:both"></div> </div><!--column--> </div></div><!--main--> <div style="clear:both"></div> <div id="footer" > <div id="bottomOptions"><div class="bottomOptionsInner"> <a class="moveToTop" id="moveToTop" href="javascript:void(0);" onclick="Effect.ScrollTo('header', { duration:'0.5'}); return false;"></a> </div></div> <div id="bottomNav"> <ul id="bottomNavInner"> <li>©2026 Diigo, Inc.</li> <li><a href="https://www.diigo.com/about">About</a></li> <li><a href="https://www.diigo.com/premium">Pricing & Plans</a></li> <li><a href="https://www.diigo.com/terms">Terms of Service</a></li> <li><a href="https://www.diigo.com/privacy">Privacy Policy</a></li> <!--<li><a href="https://www.diigo.com/press">Press</a></li>--> <li><a href="http://blog.diigo.com/">Blog</a></li> <li><a target="_blank" href="http://www.twitter.com/diigo" title="Follow us on Twitter">Twitter</a></li> <li><a href="https://www.diigo.com/common/contact">Contact Us</a></li> </ul> </div><!--bottomNav--> </div><!--footer--> <script type="text/javascript"> var _GLOBAL_VAR = _GLOBAL_VAR || {}; _GLOBAL_VAR['my_name'] = ""; _GLOBAL_VAR['ispremium'] = "false"; _GLOBAL_VAR['user_permission'] = {}; _GLOBAL_VAR['user_permission']['pdf'] = "false" _GLOBAL_VAR['user_permission']['image'] = "false" var D_DOMAIN = ".diigo.com"; var BOOKMARK_HOST = "https://www.diigo.com"; var GROUP_HOST = "https://groups.diigo.com"; var RESOURCE_HOST = "https://resources.diigo.com"; var SLIDES_HOST = "https://slides.diigo.com"; var MESSAGE_HOST = "https://message.diigo.com"; var DIIGO_SECURE = "https://www.diigo.com"; var USER_AVATAR_URI = RESOURCE_HOST+"/images/avatar/user"; </script> <script src="/javascripts/v6/dist/main.min.js?1640672210" type="text/javascript"></script> <script src="/javascripts/lib/js-cookie.js?1640672210" type="text/javascript"></script> <script type="text/javascript"> function initDiigo() { for(var i=0; i<window.onloadListeners.length;i++) { var func = window.onloadListeners[i]; func.call(); } } window.onloadListeners = []; window.addOnLoadListener = function(listener) { window.onloadListeners[window.onloadListeners.length] = listener; } document.observe("dom:loaded", initDiigo); </script> <script type="text/javascript">window.addOnLoadListener(function(){new AvatarPopup()});</script> <script src="/javascripts/v6/ditem_list.js?1640672210" type="text/javascript"></script> <script type="text/javascript"> _GLOBAL_VAR['expand'] = true; _GLOBAL_VAR['username'] = "robeadie"; _GLOBAL_VAR['tag_cloud_tab'] = 453; _GLOBAL_VAR['my'] = false; _GLOBAL_VAR['list_id'] = 585002; _GLOBAL_VAR['lists'] = []; _GLOBAL_VAR['tags'] = []; _GLOBAL_VAR['listMenu']; _GLOBAL_VAR['token'] = ''; _GLOBAL_VAR['list'] = {owner_id:"379748", title:"CSS", mode:0, uri:'CSS', list_id:585002, tags:"css,style,sheet", desc:"", publish_url: "https://www.diigo.com/list/robeadie/CSS/4d7tblk4"}; var ITEM_TYPE_DITEM = 2; var ITEM_TYPE_SECTION = 20; function initItems() { var ditem = new Ditem(); ditem.itemIndex = "0"; ditem.itemId = "720536"; ditem.index = "0"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "HTML and CSS Table Border Style Wizard"; ditem.url = "http://www.somacon.com/p141.php"; ditem.link_id = "720536"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 1; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "1"; ditem.itemId = "6728260"; ditem.index = "1"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Print all 18 Chapters - CSS Basics"; ditem.url = "http://www.cssbasics.com/printfull.html"; ditem.link_id = "6728260"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = true; ditem.groups = []; ditem.lists_id = []; ditem.position = 2; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; var a = new Annotation(); a.id = "3808210"; a.link_id = "6728260"; a.mode = 2; a.user_id = "379748"; a.u_name = "robeadie"; a.index = 1+"_"+0; ditem.pri_a_count++; var stickyNotes = []; a['stickyNotes'] = stickyNotes; a['s_count'] = stickyNotes.length; annotations.push(a); ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "2"; ditem.itemId = "137225"; ditem.index = "2"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "intensivstation :: CSS HOW-TO"; ditem.url = "http://www.intensivstation.ch/en/css"; ditem.link_id = "137225"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 3; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "3"; ditem.itemId = "15554928"; ditem.index = "3"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Writing the Web: A Step-by-Step Guide, with Resources"; ditem.url = "http://writing.colostate.edu/guides/processes/html/index.cfm"; ditem.link_id = "15554928"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "JavaScript,CSS,writing,for,the,web"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 4; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "4"; ditem.itemId = "14648"; ditem.index = "4"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Ten CSS tricks you may not know"; ditem.url = "http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369"; ditem.link_id = "14648"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 5; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "5"; ditem.itemId = "213879"; ditem.index = "5"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Full CSS Property Compatibility Chart"; ditem.url = "http://www.corecss.com/properties/full-chart.php"; ditem.link_id = "213879"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 6; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "6"; ditem.itemId = "12282599"; ditem.index = "6"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Print in Landscape"; ditem.url = "http://web.tampabay.rr.com/bmerkey/examples/landscape-test.html"; ditem.link_id = "12282599"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 7; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "7"; ditem.itemId = "941880"; ditem.index = "7"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "SELFHTML: CSS Style Sheets / CSS properties / Layouts for print media"; ditem.url = "http://en.selfhtml.org/css/eigenschaften/printlayouts.htm"; ditem.link_id = "941880"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 8; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "8"; ditem.itemId = "15554949"; ditem.index = "8"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "CSS Print Profile"; ditem.url = "http://www.w3.org/TR/2004/CR-css-print-20040225"; ditem.link_id = "15554949"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 9; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "9"; ditem.itemId = "16626"; ditem.index = "9"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "css/edge"; ditem.url = "http://www.meyerweb.com/eric/css/edge/index.html"; ditem.link_id = "16626"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "Eric,Meyer\'s,CSS,Design,Web,Site"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 10; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "10"; ditem.itemId = "179777"; ditem.index = "10"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "The CSS Playground | Cutting Edge CSS"; ditem.url = "http://www.stunicholls.myby.co.uk/index.html"; ditem.link_id = "179777"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 11; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "11"; ditem.itemId = "20591"; ditem.index = "11"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "CSS Vault | The Web\'s CSS Site"; ditem.url = "http://cssvault.com"; ditem.link_id = "20591"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 12; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "12"; ditem.itemId = "206730"; ditem.index = "12"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Hide CSS from browsers :: @import"; ditem.url = "http://imfo.ru/csstest/css_hacks/import.php"; ditem.link_id = "206730"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 13; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "13"; ditem.itemId = "206729"; ditem.index = "13"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Import Hack - css-discuss"; ditem.url = "http://css-discuss.incutio.com/?page=ImportHack"; ditem.link_id = "206729"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 14; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "14"; ditem.itemId = "205079"; ditem.index = "14"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "CSS Filters - CSS-only Filters Summary"; ditem.url = "http://www.dithered.com/css_filters/css_only/index.php"; ditem.link_id = "205079"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 15; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "15"; ditem.itemId = "989895"; ditem.index = "15"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "Cascading Style Sheets, Level 2 CSS2 Specification"; ditem.url = "http://www.w3.org/TR/REC-CSS2/cover.html"; ditem.link_id = "989895"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 16; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "16"; ditem.itemId = "206687"; ditem.index = "16"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "IE and italics problem"; ditem.url = "http://www.positioniseverything.net/explorer/italicbug-ie.html"; ditem.link_id = "206687"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 17; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "17"; ditem.itemId = "213877"; ditem.index = "17"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "/* Position Is Everything */    Modern browser bugs explained in detail!"; ditem.url = "http://www.positioniseverything.net/index.php"; ditem.link_id = "213877"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 18; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "18"; ditem.itemId = "184566"; ditem.index = "18"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "CSS Font Size Explained"; ditem.url = "http://www.bigbaer.com/css_tutorials/css_font_size.htm"; ditem.link_id = "184566"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 19; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); var ditem = new Ditem(); ditem.itemIndex = "19"; ditem.itemId = "7414631"; ditem.index = "19"; ditem.itemType = ITEM_TYPE_DITEM; ditem.title = "If You Pick One Color, Pick Them All - Quality Web Tips"; ditem.url = "http://www.w3.org/QA/Tips/color"; ditem.link_id = "7414631"; ditem.user_id = 379748; ditem.mode = 0; ditem.readed = 1; ditem.u_name = "robeadie"; ditem.first_by = ""; ditem.real_name = "Robert Eadie"; ditem.t_name = "CSS"; ditem.expand = _GLOBAL_VAR['expand']; ditem.pri_c_count = 0; ditem.pub_c_count = 0; ditem.pri_a_count = 0; ditem.pub_a_count = 0; ditem.pri_sticky_count = 0; ditem.pub_sticky_count = 0; ditem.hasDetails = false; ditem.groups = []; ditem.lists_id = []; ditem.position = 20; ditem.description = ""; ditem.type_name = "bookmark"; var comments = [] ditem['comments'] = comments; ditem['c_count'] = comments.length; var annotations = []; ditem['annotations'] = annotations; _GLOBAL_VAR['ditems'].push(ditem); } window.addOnLoadListener(initItems); window.addOnLoadListener(function(){new ContextMenu("right_Column",{eventType:"click"})}); </script> <script type="text/javascript"> window.onscroll = function(e){ var t = document.documentElement.scrollTop || document.body.scrollTop; if (t>0) document.getElementById('moveToTop').style.display = 'block'; else document.getElementById('moveToTop').style.display = 'none'; } </script> <script type="text/javascript"> if(window.jQuery){ jQuery(document).ready(function($){ $('.expandArea').on('click',function(e){ var id = $(this).attr('id').replace(/(expandArea_)/,""); if($(this).find(".expandInfoaction").is(".expand")==false){ $('#ditemDetails_'+id+' ul#annotations_'+id+' li').show(); $('#showHideannoteButton_'+id).hide(); } $(this).find(".expandInfoaction").toggleClass("expand"); $("#dItemsInfo_"+id).toggle(); $("#dItemsDes_"+id).toggle(); }); }); } </script> </div> <!--wrapper--> </body> </html>