CINXE.COM

<!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="icon" href="http://www.zytrax.com/favicon.ico"> <title>Tech Stuff - CSS OnePage Guide</title>   <style type="text/css">  </style> <style type="text/css" media="print">  </style> <script type="text/javascript">  </script> </head> <body>  <div class="l-b">  <a href="http://www.zytrax.com"><img id="toplogo" src="http://www.zytrax.com/images/zytrax-logo-info.png" alt="ZYTRAX Info Logo"></a>  <p class="n-t-t"><a href="http://www.zytrax.com/feedback.htm" class="n-t-sr">mail us</a>  |  <a href="http://www.zytrax.com/run/mailpage.php" class="n-t-sr">mail this page</a></p> <div class="n-t0"> <a href="http://www.zytrax.com/Company/contacts.html" class="n-t-sr">contact us</a> </div> <div class="n-t0"> <a href="http://www.zytrax.com/training/" class="n-t-sr">training</a>  |  </div> <div class="n-t0"> <a href="http://www.zytrax.com/tech/" class="n-t-sr">tech stuff</a>  |  <ul class="n-t1-v"> <li class="n-t1-es"><a href="http://www.zytrax.com/tech/" class="t-da">tech stuff</a>  <ul class="n-t2"> <li class="n-t2-e"><a title="collection of technology stuff" href="http://www.zytrax.com/tech/" class="t-da">tech stuff</a></li> <li class="n-t2-es t-da">web stuff <ul class="n-t3"> <li class="n-t3-e"><a title="collection of web based technology stuff" href="http://www.zytrax.com/tech/web/" class="t-da">web stuff</a></li> <li class="n-t3-e"><a title="collection of UA strings for most browsers" href="http://www.zytrax.com/tech/web/browser_ids.htm" class="t-da">browser ids</a></li> <li class="n-t3-e"><a title="collection of mobile UA strings" href="http://www.zytrax.com/tech/web/mobile_ids.html" class="t-da">mobile ids</a></li> <li class="n-t3-e"><a title="our HTML5 page conversion process and thoughts" href="http://www.zytrax.com/tech/css/html5.html" class="t-da">HTML5 Convert</a></li> <li class="n-t3-e"><a title="how we do server-side browser sniffing with apache" href="http://www.zytrax.com/tech/web/browser_sniffing.html" class="t-da">browser sniffing</a></li> <li class="n-t3-e"><a title="apache environmental variables" href="http://www.zytrax.com/tech/web/env_var.htm" class="t-da">apache env's</a></li> <li class="n-t3-e"><a title="apache server side includes - extensive notes and examples" href="http://www.zytrax.com/tech/web/ssi.htm" class="t-da">apache ssi</a></li> <li class="n-t3-e"><a title="our css pop-up/pop-down/flyout menus for Gecko/Opera/MSIE" href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="t-da">pop-outs (css)</a></li> <li class="n-t3-e"><a title="most of those annoying HTML entity codes that we forget all the time" href="http://www.zytrax.com/tech/web/entities.html" class="t-da">html entities</a></li> </ul> </li> <li class="n-t2-es t-da">open guides <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/books/" class="t-da">open guides</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/books/dns" class="t-da">dns guide</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/books/ldap" class="t-da">ldap guide</a></li> </ul> </li> <li class="n-t2-e"><a title="Decimal to Hexidecimal to Binary conversion - even Octal!" href="http://www.zytrax.com/tech/protocols/hex.html" class="t-da">Dec>Hex>Bin</a></li> <li class="n-t2-es t-da">survival stuff <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/" title="a series of survival guides for some popular open source software" class="t-da">survival stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/ssl.html" class="t-da">ssl/tls & x.509</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/asn1.html" class="t-da">ASN.1</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/kerberos.html" class="t-da">kerberos</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/postfix.html" class="t-da">postfix</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/cron.html" class="t-da">cron</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/encryption.html" class="t-da">cryptography</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/survival/wxwidgets.html" class="t-da">wxWidgets</a></li> </ul> </li> <li class="n-t2-es t-da">audio stuff <ul class="n-t3"> <li class="n-t3-e"><a title="Pages about Digital Audio, Primers, Calculator, Equalization, FFT" href="http://www.zytrax.com/tech/audio/" class="t-da">audio stuff</a></li> <li class="n-t3-e"><a title="Fundamentals, harmonics, overtone, partials, loudness, ADSR envelopes" href="http://www.zytrax.com/tech/audio/sound.html" class="t-da">sound primer</a></li> <li class="n-t3-e"><a title="Sound digitization, time domain, frequency domain" href="http://www.zytrax.com/tech/audio/digital-sound.html" class="t-da">digital sound</a></li> <li class="n-t3-e"><a title="common frequencies of instruments and in life" href="http://www.zytrax.com/tech/audio/audio.html" class="t-da">frequencies</a></li> <li class="n-t3-e"><a title="equalization principles, octaves, sound metering and FFT" href="http://www.zytrax.com/tech/audio/equalization.html" class="t-da">equalization</a></li> <li class="n-t3-e"><a title="Acoustic caculators for musical notes and FFT bin frequencies" href="http://www.zytrax.com/tech/audio/calculator.html" class="t-da">calculators</a></li> <li class="n-t3-e"><a title="Yet another audio glossary" href="http://www.zytrax.com/tech/audio/glossary.html" class="t-da">glossary</a></li> </ul> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/web/regex.htm" class="t-da">regex stuff</a></li> <li class="n-t2-es t-da">cable stuff <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/" class="t-da">cable stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="t-da">lan wiring</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/mixed.html" class="t-da">lan & telephone</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="t-da">rs232 stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/heavy.htm" class="t-da">serial primer</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/pc/serial.html" class="t-da">usb 3.2 & firewire</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/pc/monitors.htm" class="t-da">displays</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/layer_1/cables/cables_jacks.htm" class="t-da">modular jacks</a></li> </ul> </li> <li class="n-t2-es t-da">protocol stuff <ul class="n-t3"> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/" class="t-da">protocol stuff</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/tcp.html" class="t-da">tcp-udp-icmp</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ip-classes.html" class="t-da">ipv4</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ip-classes.html#calculator" class="t-da">ipv4 Calculator</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html" class="t-da">ipv6</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html#calculator" class="t-da">ipv6 Calculator</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/isdn" class="t-da">isdn-bri</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/protocols/lan" class="t-da">802 lan</a></li> <li class="n-t3-e"><a href="http://www.zytrax.com/tech/ss7" class="t-da">ss7 & sigtran</a></li> </ul> </li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/pc/" class="t-da">pc stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/wireless/" class="t-da">wireless stuff</a></li> <li class="n-t2-es t-da">css stuff <ul class="n-t3"> <li class="n-t3-e"><a title="collection of css notes and experiences including css menus and css liquid layout" href="http://www.zytrax.com/tech/css/" class="t-da">css stuff</a></li> <li class="n-t3-e"><a title="Notes on our experience with converting to css based liquid layouts - including blow by blow css" href="http://www.zytrax.com/tech/css/layoutnotes.html" class="t-da">css liquid design</a></li> <li class="n-t3-e"><a title="we have used css menus since mid-2003 - blow-by-blow implementation notes" href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="t-da">css menus</a></li> <li class="n-t3-e"><a title="some practical solutions on using css" href="http://www.zytrax.com/tech/css/workarounds.html" class="t-da">css notes</a></li> <li class="n-t3-e"><a title="css shortforms at a glance" href="http://www.zytrax.com/tech/css/shortcut.html" class="t-da">css short-forms</a></li> <li class="n-t3-e"><a title="css selectors and quick overview with links to the W3C specs" href="http://www.zytrax.com/tech/css/syntax.html" class="t-da">css overview</a></li> </ul> </li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/codes.htm" class="t-da">ascii codes</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/data_rates.htm" class="t-da">data rate stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/telephony/" class="t-da">telephony stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/mech/" class="t-da">mech. stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/protocols/hex.html" class="t-da">Dec>Hex>Bin</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/lang/" class="t-da">language stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/electronics/" class="t-da">electronic stuff</a></li> <li class="n-t2-e"><a href="http://www.zytrax.com/tech/rfcs/" class="t-da">rfc stuff</a></li> </ul> </li> <li class="n-t1-e"><a href="http://www.zytrax.com/security/" class="t-da">Security</a></li> </ul> </div>  </div>  <div class="l-c">  <p class="adv"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9419480011552853" data-ad-slot="9281933980"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <h1>Tech Stuff - W3C CSS OnePage Guide</h1> <p>This page extracts some of the more interesting (IOHO) parts of the CSS2 spec. It describes the <a href="#selectors" class="t-db">selectors</a> and <a href="#pseudo" class="t-db">pseudo classes</a> and the <a href="#units" class="t-db">CSS measurement units</a>. A series of <a href="#examples" class="t-db">examples</a> are used to illustrate the use of selectors (the key to the power of CSS). The <a href="#ref" class="t-db"> W3C CSS2 specification sections</a> are individually referenced. For convenience a list of the <a href="shortcut.html" class="t-db">CSS2 property short forms</a> is provided and some of <a href="workarounds.html" class="t-db">our experiments, workarounds and CSS 'wheezes'</a>.</p> <p>This is not a tutorial on CSS - there are many far better qualified to do this. It is simply our CSS cheat sheet. See the side-bar and our <a href="../../links/" class="t-db">links</a> section under 'web resources' -> 'css'.</p> <p><b>Note:</b> We use the term tag and element to mean the same thing. The reason - HTML uses the term TAG and the DOM calls them elements.</p> <h2>Syntax Rules</h2> <p>We use the term rules below since we cannot think of a better one. But this should not be confused with a CSS 'Rule' which is the term used to define a single block-level statement.</p> <ol class="o-n"> <li>CSS keywords are case-insensitive BUT since class names appear inside the HTML/XHTML/XML body they are case-sensitive. Watch this one.</li> <li>Comments within a CSS style sheet use C style i.e /* ... comment... */</li> <li>HTML style comments  are ONLY permitted to escape style sheets for older browsers. If they appear inside a style sheet they can cause missing definitions and other trivial problems.</li> <li>Browsers should ignore invalid or illegal or unsupported values but should continue from the next definition.</li> </ol> <h2 id="units">Units and Measures</h2> <ul> <li>Relative Units <ul> <li><b>em</b> relative to the current font-size.</li> <li><b>ex</b> relative to the fonts lowercase x (normally)</li> <li><b>px</b> relative to the viewing area (and we thought this was absolute)</li> </ul> </li> <li>Absolute Units: <ul> <li><b>in</b> inch = 2.54cm</li> <li><b>cm</b> centimeter</li> <li><b>mm</b> millimeter</li> <li><b>pt</b> Point 1 point = 1/72 inch</li> <li><b>pc</b> Pica 1 pica = 12 points</li> </ul> </li> </ul> <h2 id="naming">CSS Style Naming</h2> <p>As soon as you start using CSS the first problem is that you very quickly forget your style names or you get name clashes on anything but a trivial stylesheet. Here are our current thoughts, for what they are worth, for a class naming convention.</p> <p>Some folks use english words to describe each style. We are two fingered typists with a unix background. All lowercase and short is good. We started by trying to codify the styles with three value names (each of one or two charaters) of format x-y-z, thus g-c-s defined a style which was generic (system wide), code (for code snippets), small font (80% or approx 9 - 10pt) and we'd have another one, almost exactky the same, g-c-n (n = font-size:100% or approx 12pt) etc.. The style definitions could be quite lengthy, each one very specific. It kinda worked and we still use the format, however, like many such attempts it quickly broke down. However, we missed a trick. HTML class definitions can contain more than 1 CSS class, for example, <b><p class="one two three"></p></b>. We are slowly migrating to a system using a smaller number of basic styles (x-y-z format) and lots of qualifier styles like w-150 set a fixed size of 150px, t-c aligns text to the center, t-i, sets italic, c-b sets color blue, bc-r sets backround-color to red etc.. By stacking up the definitions we can quickly customize any basic style. Thus, <b><p class="m-b-r c-w bc-b t-s w-120"></p></b> takes our basic menu box style for right hand menus, changes the color to white, the background to blue, the font-size to 80% and fixes the width at 120px. Previously we would have had 5 separate chunky class definitions and if we changed one value we'd add another definition. Early days but it seems to be more modular.</p> <h2 id="selectors">Basic Selector Definitions</h2> <p>All the basic types are actually examples of selectors. CSS2 defines a range of <a href="http://www.w3.org/TR/REC-CSS2/selector.html" target="_blank" class="t-db">selectors</a> which are well worth memorising. We have separately defined the basic types and Pseudo classes since we find it less confusing. The list below is NOT EXHAUSTIVE the W3C documnentation is definitive naturally! There are some <a href="#examples" class="t-db">examples</a> to illustrate use of selectors.</p> <table class="p-m-s"> <tr > <td class="w-50">Format</td> <td class="w-80">Selector<br>Name</td> <td>Description</td> </tr> <tr > <td id="type">x</td> <td>Type</td> <td>Applies the defined style to any element or tag, for example, 'a {...}' applies the style to all anchor tags.</td> </tr> <tr > <td id="class">.y</td> <td>Class</td> <td>Applies the class style y to any element which has an attribute of 'class="y", for example, .mystyle which is actually a short version of *.mystyle where '*' is the universal selector. Multiple classes may appear in any html class tag, thus, <b><p class="one two three"></p></b> is both valid and powerful.</td> </tr> <tr > <td>x.y</td> <td>Class</td> <td>Applies the class style y to any element x which has 'class="y". The rules say anywhere you can use a tag name you can use a class selector, for example, p.myclass applies the style to any paragraph with a 'class="mystyle"' attribute. <b>Note:</b> The 'class=' attribute can take a list of styles separated by a space,for example, 'class="button popup"' will apply both the 'button' and 'popup' styles.</td> </tr> <tr > <td id="descendant">x y</td> <td>Descendant</td> <td>Applies the style to any element y which is contained within, or is a descendant of, the element x, for example, 'div a {...}' applies to all anchor tags which are defined inside a div tag. This can get very complicated, for instance, 'div td p' applies the style to a paragraph which is inside a table cell which is inside a div or even div.mystyle td p which further subsets the style only to divs with class="mystyle".</td> </tr> <tr > <td id="child">x > y</td> <td>Child</td> <td>Applies the style to any element y which is a child of x, for example, 'div > a {...}' applies to anchor tags which are defined inside a div tag but would exclude anchor tags inside a div which were enclosed in a p tag (the p tag is the child not the anchor). Multiple levels are supported. <b>Note:</b> You really need to know your DOM hierarchical models for this selector to be effective. For example, if working with nested tables then this style of selector will only format the td tags in a table with class="outertable" (any nested table td tags are unaffected) <b>table.outertable > tbody > tr > td {...}</b> (yeah, we forgot the tbody and couldn't figure out why it was not working).</td> </tr> <tr > <td id="attribute">x[y]<br> x[y=z]<br> x[y~=y]<br> x[y|=y]</td> <td>Attribute</td> <td>Applies the style to any element x which has the attribute y, for example, a[href] will apply the style to anchors with an 'href' attribute but not a 'name' attribute. The y=z form allows the style to be selectively applied to an attribute with a value e.g. p[lang="fr"] will apply the style to any paragraph which has a lang="fr" attribute (must match exactly). The y~=z form allows the style to be selectively applied to an attribute where one of the 'space separated' values match exactly. The y|=z form allows the style to be selectively applied to an attribute where the attribute's value starts with 'z' e.g. h1[lang|="en"] will find a language attribute of 'en', 'en-CA' and 'en-AU' etc.</td> </tr> <tr > <td>x:y</td> <td><a href="#pseudo" class="t-db">Pseudo Class</a></td> <td>Applies the pseudo class y to the element x.</td> </tr> <tr > <td id="id">x#y</td> <td>Id</td> <td>Applies the class style to any element which has an id="y" attribute. You can also write this as just '#y'. Since all 'id's must be unique in a document, at first glance it appears pretty senseless to have the 'x' (element) part but when using a single style sheet across multiple pages it can stop inadvertent errors e.g td#mine will only apply to a table cell with 'id="mine"' and not a paragraph with 'id="mine"'.</td> </tr> <tr > <td id="universal">*</td> <td>Universal</td> <td>The Universal selector selects any tag or element type and may be omitted in simple selectors, thus *.one and .one are equivalent - both apply the style to any element which has a class="one" attribute. The Universal selector is most commonly used to give scope to a definition thus .one * {...} will apply the style to any element appearing within the block in which a class="one" attribute appears.</td> </tr> <tr > <td id="group">,</td> <td>Group</td> <td>Any number of identical defintions may be grouped by using a comma to separate them, thus if .one and p share the same definition then they can written in a single definition as .one, p {...}</td> </tr> </table> <p>There are some <a href="#examples" class="t-db">examples</a> to illustrate use of selectors.</p> <h2 id="pseudo">Pseudo-Classes</h2> <p>More correctly part of the selector set above but we have decided to document them separately.</p> <table class="p-m-s"> <tr class="g-h-ss"> <td class="w-100">Format</td> <td class="w-120">Class Name</td> <td>Description</td> </tr> <tr > <td>x:first-child</td> <td>First child</td> <td>Applies the style to the first child of the specified tag element 'x' e.g. p:first-child matches ALL paragraphs that are the first child of any other element (tag). td >p:first-child limits this to a paragraph which is the first child of a table cell.</td> </tr> <tr > <td>a:link</td> <td>Link Unvisited</td> <td>Applies the style to any unvisited link. CSS2 defines this rule generically but normally applies only to a (anchor) elements or tags. You can subset this rule by the following a.onsite:link which apply only to a anchor defined as <a href='' class="onsite">. The dot applies to the class style defined.</td> </tr> <tr > <td>a:visited</td> <td>Link Visited</td> <td>Applies the style to any visited link. CSS2 defines this rule generically but normally applies only to 'a' (anchor) elements or tags. You can subset this rule by the following a.onsite:link which apply only to a anchor defined as <a href='' class="onsite">. The dot applies to the class style defined.</td> </tr> <tr > <td>x:hover</td> <td>Hover Class</td> <td>Applies the style to any element when the mouse is placed over it e.g. td:hover will perform the action when you hover over a table cell, classically used for anchor elements. You can subset this rule by the following td.mine:hover which apply only to a anchor defined as <td class="mine"></td>. The dot applies to the class style defined.</td> </tr> <tr > <td>x:active</td> <td>Active Class</td> <td>Applies the style to any element when it is activated e.g. a mouse click e.g. a:hover will perform the action when you click the link, classically used for anchor elements. You can subset this rule by the following a.mine:active which apply only to a anchor defined as <td class="mine"></td>. The dot applies to the class style defined.</td> </tr> <tr > <td>x:focus</td> <td>Focus Class</td> <td>Applies the style to any element when it has focus for say typing text e.g. input:focus will perform the action when you move the cursor to an input field over a table cell. You can subset this rule by the following input.mandatory:focus which apply only to a input tag defined as <input class="mandatory">. The dot applies to the class style defined.</td> </tr> </table> <h2 id="short-form">CSS Short Forms</h2> <p>We two fingered typist like short. This describes the shortest way we can find for CSS definitions, saves all that 'border-left-width' stuff if you don't need it.</p> <h2>Short Forms</h2> <p><b>Notes:</b></p> <ol> <li><p>When you use an entry of 0 you can drop the unit of measure since zero is zero - right?.</p></li> <li><p>We show the unit 'px' throughout just for consistency.</p></li> <li><p>Items inside [ ] describe the scope and MUST NOT BE INCLUDED in the CSS definition. Values may be ALL - guess, V - left and right <b>V</b>ertical sides. H - top and bottom <b>H</b>orizontals. B - bottom, T - Top, L - Left R - right.</p></li> <li><p>CSS allows 1, 2, 3 and 4 values to be defined. Three values is a little confusing - well to us it is! But it does save some typing.</p></li> </ol> <table class="p-m-s"> <tr class="g-h-ss"> <td class="w-250">Forms Allowed</td> <td>Description</td> </tr> <tr > <td>background:color image repeat attach h-pos v-pos<br> </td> <td>Since the keywords are all different you can leave out missing elements as long as they remain in order. Long forms are background-color: (#RRGGBB or #RGB) , backround-image: (url(path) | none), background-repeat: (repeat | repeat-x | repeat-y | no-repeat ), background-attachment: (scroll | fixed), background-position: h-pos v-pos where: h-pos (percent | unit | top | center | bottom) v-pos (percent | unit | left | center | right). If only h-pos given, v-pos assumes 50%. Cannot mix units or percentages with keywords.</td> </tr> <tr > <td>font:style variant weight size[/height] family</td> <td> Since the keywords are all different you can leave out missing elements as long as they remain in order. Long forms are <b>font-style:</b> <pre class="g-c-s"> (normal | italic |oblique) </pre> <b>font-variant</b>: <pre class="g-c-s"> (normal | small-caps) </pre> <b>font-weight</b>: <pre class="g-c-s"> (normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900) </pre> <b>font-size</b>: <pre class="g-c-s"> absolute - xx-small, x-small, small, medium, large, x-large, xx-large | relative - larger, smaller | length which may be absolute units - in, cm, mm, pt, pc relative units - em, ex, px percentage - relative to parent </pre> <b>line-height</b>: <pre class="g-c-s"> number (font-size * number) | length which may be absolute units - in, cm, mm, pt, pc relative units - em, ex, px percentage - relative to font-size </pre> <b>font-family</b>: <pre class="g-c-s">specific font name or generic name (serif, sans-serif, fantasy, monospace, cursive, fantasy) multiple fonts allowed in order and separated by commas, for example: Verdana, Helvetica, sans-serif. If font name contains spaces - enclose in quotes, for example: "Trebuchet MS". </pre> Examples: <pre class="g-c-s"> font:bold 12pt "Times Roman",serif; # next line is exactly the same font: normal bold 12pt "Times Roman",serif; # with line height font: italic 12px/14px "Times Roman",serif; </pre> </td> </tr> <tr > <td>border:1px solid red; [ALL]<br> </td> <td>Controls the width, style and color of the border in one shot. If you need different border widths or styles you need one of the other forms below. Long form 'border-width:', 'border-style:', 'border-color:' etc.</td> </tr> <tr > <td>border-width:1px; [ALL]<br> border-width:1px 2px; [H V]<br> border-width:1px 2px 3px; [T V B]<br> border-width:1px 2px 2px 1px; [T R B L]</td> <td>Controls the width of the element border. Can also take values 'thin | medium | thick'. Long form 'border-left-width:', 'border-right-width:' etc.</td> </tr> <tr > <td>border-style:solid; [ALL]<br> border-style:solid dotted; [H V]<br> border-style:solid dotted double; [T V B]<br> border-style:solid dotted none double; [T R B L]<br> </td> <td>Controls the border style applied to the element. Can take the values 'none | solid | dotted | dashed | double | groove | ridge | inset | outset'. Long form 'border-style-left:', 'border-style-top:' etc.</td> </tr> <tr > <td>border-color:red; [ALL]<br> border-color:red blue; [H V]<br> border-color:red blue cyan; [T V B]<br> border-color:red blue cyan silver; [T R B L]<br> </td> <td>Controls the border color applied to the element. Can take a standard color red | blue | silver | cyan | white | black (there are apparently 147 of them) or the #RGB form. Long form 'border-color-left:', 'border-color-top:' etc.</td> </tr> <tr > <td>margin:1px; [ALL]<br> margin:1px 2px; [H V]<br> margin:1px 2px 3px; [T V B]<br> margin:1px 2px 2px 1px; [T R B L]</td> <td>Margins add transparent space outside the element (mostly). Can also take a percentage or 'auto'. Long form 'margin-top:', 'margin-right:', 'margin-bottom:', 'margin-left:'.</td> </tr> <tr > <td>padding:1px; [ALL]<br> padding:1px 2px; [H V]<br> padding:1px 2px 3px; [T V B]<br> padding:1px 2px 2px 1px; [T R B L]</td> <td>Controls the amount of space between the border and the content. Can take a percentage. Long form 'padding-top:', 'padding-right:', 'padding-bottom:', 'padding-left:'.</td> </tr> </table> <h5 id="ref">Index of all CSS properties</h5> <p>This is the W3C index page for all the <a href="http://www.w3.org/TR/REC-CSS2/propidx.html" target="_blank" class="t-db">CSS2 properties</a>.</p> <h5>The Box Model</h5> <p>Understanding the <a href="http://www.w3.org/TR/REC-CSS2/box.html" target="_blank" class="t-db">Box Model</a> , and then how the various browsers implement it (read 'screw it up'), is your key to CSS2.</p> <h5>Visual Formatting Model</h5> <p>The <a href="http://www.w3.org/TR/REC-CSS2/visuren.html" target="_blank" class="t-db">Visual Formatting Model</a> discusses absolute, fixed, static and relative positioning and float attributes.</p> <h5>Content, Counting and Lists</h5> <p><a href="http://www.w3.org/TR/REC-CSS2/generate.html" target="_blank" class="t-db">Content, Counting and Lists</a> covers quotations, external sources, automatic counters and list formatting.</p> <h5>Paged Media</h5> <p>New in CSS2 <a href="http://www.w3.org/TR/REC-CSS2/page.html" target="_blank" class="t-db">Paged Media </a> allows control over screen and print media among others.</p> <h5>Colors and Backgrounds</h5> <p><a href="http://www.w3.org/TR/REC-CSS2/colors.html" target="_blank" class="t-db">Colors and Backgrounds</a> defines color formats and a slew of background options.</p> <h5>Tables</h5> <p>Updated in CSS2 <a href="http://www.w3.org/TR/REC-CSS2/tables.html" target="_blank" class="t-db">Tables</a> allows greater control over table formatting.</p> <h5>User Interface</h5> <p>Updated substantially in CSS2 <a href="http://www.w3.org/TR/REC-CSS2/ui.html" target="_blank" class="t-db">User Interface</a> allows cursor definitions, dynamic outlines (a kind of border plus for surrounding buttons, images etc.) and magnification (which is NOT supported by CSS and this section just confirms it).</p> <h5>Text</h5> <p>CSS2 <a href="http://www.w3.org/TR/REC-CSS2/text.html" target="_blank" class="t-db">Text</a> now includes a 'text-shadow' property.</p> <h5>Aural Style Sheets</h5> <p>New in CSS2 <a href="http://www.w3.org/TR/REC-CSS2/aural.html" target="_blank" class="t-db">Aural Style Sheets</a> allow noisy web sites.</p> <h2 id="examples">CSS2 Selector Examples</h2> <p>This section shows a number of worked CSS selector examples against the target HTML page below (we have added the line numbers to make it easier to reference and stripped it to the bare minimum). We then show a number of selectors (which would appear in your style sheet) and describe which lines they affect and under what conditions to illustrate the techniques that can be applied with CSS2. Since the purpose of these examples is to illustrate selectors the actual style properties are not important and are simply shown as {..}. For your edification and delight here is the <a href="http://www.w3.org/TR/REC-CSS2/propidx.html" target="_blank" class="t-db">W3C CSS2 properties list</a>.</p> <h4>Target HTML Page</h4> <pre class="g-c-s"> [1]<html><head><title>Example Target Page</tile> [2]<style type="text/css"> [3] [6]</style> [7]</head> [8]<body> [9]<h1><a name="here">A header</a></h1> [10]<p>Stuff and text.</p> [11]<table cellspacing="8" class="txt"> [12]<tr> [13]<td width="120"><a href="a.html" class="two">column one</a></td> [14]<td>columns two</td> [15]</tr> [16]</table> [17]<div class="three"> [18]<p> [19]<a href="http://a.com" class="one two">link one</a><br> [20]</p> [21]<h1 class="two">Another header</h1> [22]<ul class="list"> [23]<li class="le" id="four"> [24]<a class="btn" href="c.htm"><span>CSS</span> Layout</a></li> [25]<li class="btn">another line</li> [26]</ul> [27]</div> [28]</body></html> </pre> <h4>CSS Selectors</h4> <table class="p-m-s"> <tr > <td class="w-120">h1 {..}</td> <td><a href="#type" class="t-db">Type selector</a>. Applies the style to all occurrences of the 'h1' tag on this page.</td> </tr> <tr > <td>a[href] {..}</td> <td><a href="#attribute" class="t-db">Attribute selector</a>. Applies the style to the 'a' tags on lines 13, 19 and 24 BUT NOT line 9.</td> </tr> <tr > <td>td[width="120"] {..}</td> <td><a href="#attribute" class="t-db">Attribute selector</a>. Applies the style to the 'td' tag on lines 13 BUT NOT line 14.</td> </tr> <tr > <td>.two {..}</td> <td><a href="#class" class="t-db">Class selector</a>. Applies the style to lines 13, 19 and 21. If the previous h1 {..} style is also present line 21 has both styles applied which may be what you want!</td> </tr> <tr > <td>td:hover {..}</td> <td><a href="#pseudo" class="t-db">Pseudo selector</a>. Applies the style to lines 13 and 14 when the mouse is hovered over it. This does NOT work for MSIE but does for Opera 7.x and Gecko.</td> </tr> <tr > <td>.btn a:hover {..}</td> <td><a href="#pseudo" class="t-db">Pseudo</a> & <a href="#class" class="t-db">Class</a> selectors. Applies the style to line 24 when the mouse is hovered over it. This works for all browsers.</td> </tr> <tr > <td>div.three #four {..}</td> <td><a href="#type" class="t-db">Type</a>, <a href="#class" class="t-db">Class</a> & <a href="#id" class="t-db">Id</a> selectors. Applies the style to line 23 (and 24) but ONLY if it is enclosed in a 'div' which has a style of 'three'. This might look artificial but we actually use it to <a href="workarounds.html" class="t-db">conditionally generate buttons</a> on a page.</td> </tr> </table> <hr> <p class="p-m-n"><br>Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or <a href="javascript:mailus('info-support','zytrax.com','Support Issue')" class="t-db">info-support at zytrax</a>. You will have a warm inner glow for the rest of the day.</p>  </div> <div class="l-l">  <div class="n-l"> <p class="c-g t-b t-o m-h5 t-r">Tech Stuff</p>  <ul class="n-l1p"> <li class="n-l1p-e"> <a href="http://www.zytrax.com/tech" class="n-l-c">tech home</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Digital Audio - primers, calculators, equalization, frequency tables, file formats, glossary - a mere splash in the ocean" href="http://www.zytrax.com/tech/audio/" class="n-l-c">audio stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/sound.html" class="n-l-f">sound primer</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/digital-sound.html" class="n-l-f">digital primer</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/audio.html" class="n-l-f">note frequencies</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/equalization.html" class="n-l-f">eq, meters & fft</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/calculator.html" class="n-l-f">calculators</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/formats.html" class="n-l-f">files & codecs</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/audio/glossary.html" class="n-l-f">glossary</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Browser IDs, SSIs, Apache Configuration, regular expressions" href="http://www.zytrax.com/tech/web/" class="n-l-c">web stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/browser_ids.htm" class="n-l-f">browser ids</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/mobile_ids.html" class="n-l-f">mobile_ids</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/env_var.htm" class="n-l-f">apache env vars</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/web/ssi.htm" class="n-l-f">apache ssi</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="n-l-f">css popout menus</a></li> <li class="n-l2-e"><a title="most of those annoying HTML entity codes that we forget all the time" href="http://www.zytrax.com/tech/web/entities.html" class="n-l-f">html entities</a></li> <li class="n-l2-e"><a title="Decimal to Hexidecimal to Binary conversion - even Octal!" href="http://www.zytrax.com/tech/protocols/hex.html" class="n-l-f">dec > hex > bin</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a href="http://www.zytrax.com/tech/dom/" class="n-l-c">dom stuff</a><br> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/dom/guide.html" class="n-l-f">dom guide</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/dom/w3c_dom.html" class="n-l-f">page explorer</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/dom/navigate.html" class="n-l-f">dom navigation</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="CSS is about a lot more than STYLE. Wheezes, table-less layouts, CSS pop-ups, CSS Shortcuts" href="http://www.zytrax.com/tech/css/" class="n-l-c">css stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/layoutnotes.html" class="n-l-f">css liquid design</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/workarounds.html#popout" class="n-l-f">css popout menus</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/workarounds.html" class="n-l-f">css notes</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/syntax.html" class="n-l-f">css syntax</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/css/shortcut.html" class="n-l-f">css short-forms</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="includes PHP, Ruby and some Java stuff (all about obscure solutions to stupid problems)" href="http://www.zytrax.com/tech/lang/" class="n-l-c">language stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="quick overview 'cos we always forget - not that we ever knew much - now includes a nifty browser-based tester" href="http://www.zytrax.com/tech/web/regex.htm" class="n-l-c">regex stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="rfc ordered by subject" href="http://www.zytrax.com/tech/rfcs/" class="n-l-c">rfc stuff</a> <ul class="n-l2"> <li title="dns rfcs" class="n-l2-e"><a href="http://www.zytrax.com/books/dns/apd/" class="n-l-f">dns rfcs</a></li> <li title="ldap rfcs" class="n-l2-e"><a href="http://www.zytrax.com/books/ldap/apc/" class="n-l-f">ldap rfcs</a></li> <li title="ipv6 rfcs" class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html#rfcs" class="n-l-f">ipv6 rfcs</a></li> <li title="tls/x.509 rfcs" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/ssl.html#rfcs" class="n-l-f">tls/x.509 rfcs</a></li> <li title="some other subjects - we only update these when we are active - some lists are consequently long in the tooth" class="n-l2-e"><a href="http://www.zytrax.com/tech/rfcs" class="n-l-f">other rfcs</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="TCP/IP, IPv4, IPv6, ISDN, LAN, VoIP, ITU Multi-Media" href="http://www.zytrax.com/tech/protocols/" class="n-l-c">protocol stuff</a> <ul class="n-l2"> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/tcp.html" class="n-l-f">tcp, udp, icmp</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/ip-classes.html" class="n-l-f">ipv4</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/ipv6.html" class="n-l-f">ipv6</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/isdn/" class="n-l-f">isdn</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/ssl.html" class="n-l-f">ssl/tls/x.509</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/ss7/" class="n-l-f">ss7 &sigtran</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/protocols/lan/" class="n-l-f">802.3 lan</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="PC Parallel Ports, LAN wiring, RS232, Centronics, DIN" href="http://www.zytrax.com/tech/layer_1/" class="n-l-c">cable stuff</a> <ul class="n-l2"> <li title="10baseT, 100base-TX/T4, 1000baseT, 10Gbase-T, RJ45, STP" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="n-l-f">lan pinouts</a></li> <li title="mixing telephony and 802.3 LAN can be done on cat5/5e/6 wiring" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/mixed.html" class="n-l-f">lan & telephone</a></li> <li title="RS 232 pinouts on db9, db24 and T1" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="n-l-f">rs232 pinouts</a></li> <li class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/heavy.htm" class="n-l-f">serial primer</a></li> <li title="USB 2.0, 3.0, 3.1 and 3.2 plus Firewire (i.Link) IEE 1394" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/serial.html" class="n-l-f">usb & firewire</a></li> <li title="some information about display and monitors/console interfaces inclusing VGA, HDMI, DVI and Thunderbolt" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/monitors.htm" class="n-l-f">displays</a></li> <li title="modular jack is the term we should use for those telephone and lan connectors" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/cables_jacks.htm" class="n-l-f">modular jacks</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="10baseT, 100base-TX/T4, 1000baseT, 10Gbase-T, RJ45, STP" href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="n-l-c">lan wiring</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="DB9, DB25 pinouts, RJ45 serial, T1 and RS standards alphabet soup" href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="n-l-c">rs232 wiring</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Decimal to Hex and Binary conversion table - even a description of Octal!" href="http://www.zytrax.com/tech/protocols/hex.html" class="n-l-c">dec > hex > bin</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="character sets ain't as simple as they look" href="http://www.zytrax.com/tech/codes.htm" class="n-l-c">character sets</a> <ul class="n-l2"> <li title="pretty much all the characters sets in the known universe including utf-7, 8 and 16" class="n-l2-e"><a href="http://www.zytrax.com/tech/characters/" class="n-l-f">character sets</a></li> <li title="ascii variant of international reference alphabet 5 (ira5)" class="n-l2-e"><a href="http://www.zytrax.com/tech/codes.htm" class="n-l-f">ascii codes</a></li> <li title="international reference alphabet 5 (ascii's cousin)" class="n-l2-e"><a href="http://www.zytrax.com/tech/ia5.html" class="n-l-f">ia5 codes</a></li> <li title="all that ™ & © stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/web/entities.html" class="n-l-f">html entities</a></li> <li title="silly page containing a bunch of fonts in various sizes including your PCs defaults" class="n-l2-e"><a href="http://www.zytrax.com/tech/web/fonts.html" class="n-l-f">web fonts</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="The T series, E series and J series and then all that optical stuff (OC-12 etc.)" href="http://www.zytrax.com/tech/data_rates.htm" class="n-l-c">data rate stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Even us electronic guys gotta know how to screw it together, if you get our drift" href="http://www.zytrax.com/tech/mech/" class="n-l-c">mechanical stuff</a> <ul class="n-l2"> <li title="fastener (screw) head styles - surprising number of choices" class="n-l2-e"><a href="http://www.zytrax.com/tech/mech/heads.htm" class="n-l-f">head styles</a></li> <li title="threads for imperial (UNF, UNC) & metric sizes" class="n-l2-e"><a href="http://www.zytrax.com/tech/mech/threads.htm" class="n-l-f">threads</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="A collection of howtos including Samba3 as PDC, FreeBSD firewalls" href="http://www.zytrax.com/tech/howtos/" class="n-l-c">howto stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="A collection of survival guides - quick overviews - to popular software" href="http://www.zytrax.com/tech/survival/" class="n-l-c">survival stuff</a> <ul class="n-l2"> <li title="tls and x.509 (ssl) certificates - warning: headache inducing stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/ssl.html" class="n-l-f">ssl/tls/x.509</a></li> <li title="Abstract Syntax Notation. 1 (ASN.!) and Distinguished Encoding Rules (DER) - not for the faint hearted. Pass the pain medication, we feel a headache coming on." class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/asn1.html" class="n-l-f">ASN.1 & DER</a></li> <li title="Kerberos is great - but tough, oh my, tough stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/kerberos.html" class="n-l-f">kerberos</a></li> <li title="We've used postfix for years but always forget which of the 27 million parameters to use" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/postfix.html" class="n-l-f">postfix</a></li> <li title="Symetric, asymetric, MACs, hashes - eye watering stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/encryption.html" class="n-l-f">encryption</a></li> <li title="Just what time is it in Kuala Lumpur, and what's that got to do with cron?" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/cron.html" class="t-db">cron</a></li> <li title="Gotta love wxWidgets - free, fantastic, flexible - but hard to see the wood for the trees sometimes" class="n-l2-e"><a href="http://www.zytrax.com/tech/survival/wxwidgets.html" class="n-l-f">wxWidgets</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Our wireless overview, Calculators, Fresnel zones, links to 'heavy' stuff, some early 802.11 stuff (mostly wi-fi related)" href="http://www.zytrax.com/tech/wireless/" class="n-l-c">wireless stuff</a> <ul class="n-l2"> <li title="our irreverent general intro to wirelss - purist will not like this page" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/intro.htm" class="n-l-f">overview</a></li> <li title="wireless calculators for system budgets, free-space loss, fresnel effects and a bunch of other stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/calc.htm" class="n-l-f">calculators</a></li> <li title="fresnel effect explanation - well, we can understand it" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/fresnel.htm" class="n-l-f">fresnel effects</a></li> <li title="our outrageously biased description of frequency hopping versus direct sequence for spread spectrum" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/fh_ds.htm" class="n-l-f">fh vs ds</a></li> <li title="some terminology covering 802 standards and modulation techniques" class="n-l2-e"><a href="http://www.zytrax.com/tech/wireless/soup.html" class="n-l-f">wireless soup</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Pinouts - USB, DIN, Firewire, VGA, DVI, HDMI, DisplayPort and Thunderbolt, I/O interface speeds, Screen sizes including HD" href="http://www.zytrax.com/tech/pc/" class="n-l-c">pc stuff</a> <ul class="n-l2"> <li title="din and mini-din for older PCs" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/din.htm" class="n-l-f">din & mini-din</a></li> <li title="802.3 LAN stuff" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_lan.htm" class="n-l-f">802.3 lan</a></li> <li title="connection of monitors has changed over the years from clunky VGA to svelte HDMI - all the pinouts you could hope for" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/monitors.htm" class="n-l-f">monitor pinouts</a></li> <li title="serial (db9, db24) connections - slow but trusty" class="n-l2-e"><a href="http://www.zytrax.com/tech/layer_1/cables/tech_rs232.htm" class="n-l-f">serial stuff</a></li> <li title="usb pinouts and descriptions of power levels for usb 1, 2 and 3 - also includes firewire" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/serial.html" class="n-l-f">usb & firewire</a></li> <li title="pc interfaces are changing and getting faster - we can never keep up - list of interfaces and their speeds" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/interfaces.html" class="n-l-f">pc interfaces</a></li> <li title="we get confused about most things - just what is 1080p - pc and tv screen resolution table with some explanations" class="n-l2-e"><a href="http://www.zytrax.com/tech/pc/resolution.html" class="n-l-f">screen resolutions</a></li> </ul> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Electronic glossary, some old experiments with 3.3/5V protection and early BGA designs" href="http://www.zytrax.com/tech/electronics/" class="n-l-c">electronic stuff</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="ragbag collection of links that we publish from time to time - maybe useful, maybe not" href="http://www.zytrax.com/links" class="n-l-c">tech links</a> </li> </ul> <ul class="n-l1p"> <li class="n-l1p-e"> <a title="Our DNS and LDAP for Rocket Scientists guides" href="http://www.zytrax.com/books" class="n-l-c">open guides</a> <ul class="n-l2"> <li title="dns for rocket scientists" class="n-l2-e"><a href="http://www.zytrax.com/books/dns/" class="n-l-f">dns guide</a></li> <li title="ldap for rocket scientists" class="n-l2-e"><a href="http://www.zytrax.com/books/ldap/" class="n-l-f">ldap guide</a></li> </ul> </li> </ul> <p class="t-r"> <a title="RSS (2.0) Feed - right click on icon, select 'Copy Link URL' or 'Copy Shortcut', paste into RSS Feed Reader, or drag and drop into RSS Feed Reader" href="http://www.zytrax.com/zytrax.rss" class="n-l-c"><img class="w-32 center" src="http://www.zytrax.com/images/rss.png" alt="RSS Feed Icon"></a> </p> <p class="p-b-h t-r">If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as <a href="http://www.mozilla.org" class="t-db">Firefox</a></p> </div> </div> <div class="l-r">  <div class="w-150">  <p class="c-g t-b t-o m-h8">Search</p> <form class="f-b-n" method="get" action="http://www.google.com/custom" target="_top"> <table> <tr> <td style="white-space: nowrap"> <input type="hidden" name="domains" value="www.zytrax.com"> <input class="b-lg" type="text" name="q" size="16" maxlength="255" value=""> </td></tr> <tr> <td style="white-space: nowrap"> <table> <tr> <td> <input type="radio" name="sitesearch" value="" checked="checked"><span class="t-s">web</span> </td> <td> <input type="radio" name="sitesearch" value="www.zytrax.com" ><span class="t-s">zytrax.com</span> </td> </tr> </table> <input class="b-lg" type="submit" name="sa" value="Google Search"> <input type="hidden" name="client" value="pub-9419480011552853"> <input type="hidden" name="forid" value="1"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="hidden" name="oe" value="ISO-8859-1"> <input type="hidden" name="safe" value="active"> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:355;L:http://www.zytrax.com/images/zytrax-info-google.gif;S:http://www.zytrax.com/tech;FORID:1;"> <input type="hidden" name="hl" value="en"> </td></tr></table> </form>   <div class="t-h"><p><span class="t-g">Share</span></p> <div class="t-h-1"> Icons made by <a href="https://www.flaticon.com/authors/icomoon" title="Icomoon">Icomoon</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div></div> <a href="http://www.facebook.com/share.php?u=http://www.zytrax.com/tech/css/syntax.html&h=Tech%20Stuff%20-%20CSS%20OnePage%20Guide"><img class="w-32" title="add page to facebook" src="http://www.zytrax.com/images/facebook.png" alt="share page via facebook"></a> <a href="http://twitter.com/home/?status=Useful%20page%20http://www.zytrax.com/tech/css/syntax.html"><img class="w-32" title="tweet this page" src="http://www.zytrax.com/images/twitter.png" alt="tweet this page"></a> <p class="c-g t-b t-o m-h5">Page<p> <a class="a-n" href="http://www.zytrax.com/feedback.htm"><img class="w-32" title="Page comment feature" src="http://www.zytrax.com/images/mail.png" alt="email us"></a> <a class="a-n" href="http://www.zytrax.com/run/mailpage.php"><img class="w-32" title="Send to a friend" src="http://www.zytrax.com/images/mailfriend.png" alt="Send to a friend feature"></a> <a class="a-n" href="#" onclick="window.print();return false;"><img class="w-32" title="print page" src="http://www.zytrax.com/images/printpage.png" alt="print this page"></a> <a class="a-n" title="View page full width - suppresses left and right hand menus" href="http://www.zytrax.com/tech/css/syntax.html?pf=yes"><img class="w-32" src="http://www.zytrax.com/images/fullwidth.png" alt="Display full width page"></a> <a class="a-n" href="#" onclick="fontchange('d');return false;"><img class="w-32" title="Decrease font size" src="http://www.zytrax.com/images/smaller.png" alt="Decrease font size"></a> <a class="a-n" href="#" onclick="fontchange('i');return false;"><img class="w-32" title="Increase font size" src="http://www.zytrax.com/images/bigger.png" alt="Increase font size"></a> <p class="c-g t-b t-o m-h5">Resources</p> <p class="c-g t-b t-o m-h5">HTML Stuff</p> <p> <a title="It was the Last HTML standard - the future was XHTML - but HTML 5 rises from the ashes" href="http://www.w3.org/TR/html4/" target="_blank" class="w-db">W3C HTML 4.01</a><br> <a title="HTML is alive and well and moving toward HTML5 - the objective being an incremental standard - reconciling HTML4 and XHTML - in your dreams?" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" target="_blank" class="w-db">HTML5 (WHATWG)</a><br> <a title="HTML4 - HTML5 differences - well today's differences - and tomorrow's. Who knows." href="http://dev.w3.org/html5/html4-differences/" target="_blank" class="w-db">HTML4 vs HTML5</a><br> <a title="W3C current HTML5 Reference" href="http://dev.w3.org/html5/html-author/" target="_blank" class="w-db">HTML5 Reference</a><br> <a title="Excellent tool and great for finding page bugs as well" href="http://validator.w3.org/" target="_blank" class="w-db">W3C Page Validator</a><br> <a title="Quick list of valid DTD's - explains one of life's great mysteries" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" target="_blank" class="w-db">W3C DOCTYPE</a> </p> <p class="c-g t-b t-o m-h5">CSS Stuff</p> <p> <a title="CSS2.1 - the only approved spec" href="http://www.w3.org/TR/CSS2/" target="_blank" class="w-db">W3C CSS2.1</a><br> <a title="CSS2.2 - the lastest non-approved draft" href="https://drafts.csswg.org/css2/" target="_blank" class="w-db">W3C CSS2.2</a><br> <a title="CSS2.2 - informative (not a standard) default style sheet" href="http://www.w3.org/TR/REC-CSS2/sample.html" target="_blank" class="w-db">Default Styles</a><br> <a title="CSS3 - Selectors" href="http://www.w3.org/TR/css3-selectors/" target="_blank" class="w-db">CSS3 Selectors</a><br> <a title="CSS3 - standardized media queries" href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank" class="w-db">CSS 3 Media Queries</a><br> <a title="CSS3 - color names and values" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4" target="_blank" class="w-db">CSS 3 Colors</a> </p> <p class="c-g t-b t-o m-h5">DOM Stuff</p> <p> <a title="W3C's main DOM site with links to all their DOM documentation" href="http://www.w3c.org/DOM/" target="_blank" class="w-db">W3C DOM</a><br> <a title="W3C DOM 3 Core recommendation" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/" target="_blank" class="w-db">W3C DOM 3 Core</a><br> <a title="Dom 3 Events" href="http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/" target="_blank" class="w-db">W3C 3 Events</a> </p> <p class="c-g t-b t-o m-h5">Accessibility</p> <p> <a title="Excellent resource - research based as opposed to opnions. The guide is superb" href="http://www.usability.gov/" target="_blank" class="w-db">usability.gov</a><br> <a title="Bit heavy on motherhood." href="http://www.w3.org/WAI/guid-tech.html" target="_blank" class="w-db">W3C - WAI</a><br> <a title="Used to be the yale style guide - now renamed - good stuff" href="http://www.webstyleguide.com/index.html?/contents.html" target="_blank" class="w-db">Web Style Guide</a><br> <a title="Good background explanations such as how screen readers work and some useful tools - perhaps a bit light on research references" href="http://www.webaim.org/" target="_blank" class="w-db">WebAim.org</a><br> </p> <p class="c-g t-b t-o m-h5">Useful Stuff</p> <p> <a title="Good solid stuff well presented and paced" href="http://www.quirksmode.org/" target="_blank" class="w-db">Peter-Paul Koch</a><br> <a title="Outspoken site on use of Web Standards - many excellent articles" href="http://www.alistapart.com/" target="_blank" class="w-db">A List Apart</a><br> <a title="Some really great uses of CSS - is this CSS's future?" href="http://www.meyerweb.com/eric/css/" target="_blank" class="w-db">Eric Meyer on CSS</a><br> <a title="Real world layouts - highly pratical site for us hard working folks" href="http://glish.com/css/" target="_blank" class="w-db">glish.com</a> </p> <p class="c-g t-b t-o m-h5">Our Stuff</p> <p> <a href="http://www.zytrax.com/tech/dom/" >Our DOM Pages</a><br> <a title="Overview of navigating the DOM using Javascript" href="http://www.zytrax.com/tech/dom/navigate.html" >DOM Navigation</a><br> <a title="CSS Techniques and workarounds, including 3 column layout, pop-ups and more" href="http://www.zytrax.com/tech/css/layoutnotes.html" >Liquid Layout</a><br> <a title="CSS short forms to avoid all that 'border-with-right' stuff" href="http://www.zytrax.com/tech/css/shortcut.html" >CSS Short Cuts</a><br> <a title="CSS overview with selectors and W3C spec links" href="http://www.zytrax.com/tech/css/syntax.html" >CSS overview</a><br> <a title="CSS one page overview with links to all the W3C docs" href="http://www.zytrax.com/tech/css/syntax.html" >CSS One Page</a> </p> <p class="c-g t-b t-o m-h5">Javascript Stuff</p> <p> <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank" class="w-db">ECMA-262</a> </p> </div> <p class="c-g t-b t-o">Site</p> <a class="a-n" href="http://www.zytrax.com/about_site.htm#css"><img class="w-32" src="http://www.zytrax.com/images/css.png" alt="CSS Technology"></a> <a class="a-n" href="http://www.zytrax.com/security/spf.html"><img title="SPF Record Conformant Domain" class="w-32" src="http://www.zytrax.com/images/spf.png" alt="SPF Record Conformant Domain"></a> </div> <div class="l-f">  <table> <tr> <td class="p-f-s t-l"> Copyright © 1994 - 2025 ZyTrax, Inc.<br> All rights reserved. <a href="http://www.zytrax.com/legal.html" class="p-f-s">Legal</a> and <a href="http://www.zytrax.com/privacy.html" class="p-f-s">Privacy</a> </td> <td class="t-c"><a href="https://www.zytrax.com" target="_blank" class="p-f-s">site by zytrax</a><br> <a href="https://www.javapipe.com" target="_blank" class="p-f-s">hosted by javapipe.com</a></td> <td class="p-f-s t-r"> <a href="javascript:mailus('web-master','zytrax.com','About Web site')" class="p-f-s">web-master at zytrax</a><br> Page modified: January 20 2022. </td> </tr> </table> </div>   </body> </html>