edit-article

Article Description: an overview article on css

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">{css}</h1> <h2>[WHAT]</h2> <ol> <li><strong>cascading style sheets -</strong> used to seperate the "presentation of content" from "the content" in w3c markup documents like html, xhtml, xml, svg.</li> <ol> <li>Used to "position" elements within a page.</li> <li>Used to produce some behaviours (hover)</li> <li>The CSS specifications are maintained by the <a title="World Wide Web Consortium" href="http://en.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C). Internet media type (<a class="mw-redirect" title="MIME media type" href="http://en.wikipedia.org/wiki/MIME_media_type">MIME type</a>) <code>text/css</code> is registered for use with CSS by <a class="external mw-magiclink-rfc" href="http://tools.ietf.org/html/rfc2318">RFC 2318</a></li> <li>used to ...</li> </ol> <li>the latest version(current) of the css specification is CSS3. NOT ALL of the</li> </ol> <h2>[WHY]</h2> <ol> <li>] seperation of concerns&nbsp; - presentation</li> <li>] maintainablity -</li> <li>] manageability - change the color/alignment/size&nbsp;of all heading h1 elements&nbsp;on all pages on the entire site with one change/edit in one file VERSUS changing it on each h1 element on each page within the entire site</li> </ol> <h2>[WHERE]</h2> <ol> <li>] any web site where you have more than 1 page or even on a single page when there is /may be multiple elements that share the same attributes.</li> </ol> <h2>[WHEN]</h2> <ol> <li>]</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>]</li> </ol> <h2>[HOW-TO]</h2> <ol> <li>define style rules/classes/properties in a style class, typically stored in a seperate .css file which the calling document links to</li> <li>apply the&nbsp;defined "style" class to the desired html element,</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>wikipedia - <a href="http://en.wikipedia.org/wiki/CSS" target="_blank">css</a></li> <li>w3c - <a href="http://www.w3.org/TR/css3-roadmap/" target="_blank">specification</a> -</li> <li>w3schools - <a href="http://www.w3schools.com/css/" target="_blank">css3 tutorial</a>&nbsp;-</li> <li><a href="https://developer.mozilla.org/en/CSS/" target="_blank">mozilla css reference</a> - moz</li> <li>google css reference - webkit</li> <li><a href="http://msdn.microsoft.com/en-us/library/ie/ms531209(v=vs.85).aspx" target="_blank">microsoft css reference</a> - ms</li> <li>caniuse.com - site that has compatability index for css features with major browsers,&nbsp;ex = <a href="http://caniuse.com/#feat=fontface">http://caniuse.com/#feat=fontface</a></li> <li><a href="http://www.w3schools.com/cssref/css3_browsersupport.asp">http://www.w3schools.com/cssref/css3_browsersupport.asp</a></li> </ol><hr /> <h1 style="text-align: center;">developer implementation</h1> <h2 style="text-align: left;">[.process]</h2> <ol> <li> <div style="text-align: left;">&nbsp;</div> </li> </ol> <h2 style="text-align: left;">[.notes]</h2> <ol> <li> <div style="text-align: left;">&nbsp;</div> </li> </ol> <h2 style="text-align: left;">[.by_date]</h2> <ol> <li> <div style="text-align: left;">]</div> </li> </ol><hr /> <h1 style="text-align: center;">status</h1> <h2 style="text-align: left;">[===current===]</h2> <ol> <li> <div style="text-align: left;">&nbsp;]</div> </li> </ol> <h2 style="text-align: left;">[===next===]</h2> <ol> <li> <div style="text-align: left;">]</div> </li> </ol> <p style="text-align: left;">&nbsp;</p>