Recent changes Random page
GAMING
Technology
 
Gaming
Entertainment
Science Fiction
Biggest wikis
Hobbies
Music
See more...

Swatch:swatch sample

From CSS Swatches

Jump to: navigation, search
wikia swatch sample

class name: .swatch_sample

author: tatwell

added: 8 Sep 2006

This is the swatch intended to be used in displaying any sample stylesheet code on this wiki. (To display html code, please see the modern code swatch.) It is based on the .ipod class designed by tatwell and first introduced on his blog.[1] Please apply this swatch inline to any sample css code your present on this site. You can use the following template:

<div style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> .swatch_name { STYLE RULES HERE } </div>

To display code with indentation or other more advanced formatting may require the use of <nowiki> tags in order to disable wiki auto-formatting:

<div style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> .swatch_name <nowiki>{ STYLE RULES INDENTED }</nowiki> </div>


This page also marks the first swatch sample page and serves as a model for other pages.


Contents

[edit] syntax

[edit] declaration block

.swatch_sample { margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:"Lucida Console",Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ _white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */ }

[edit] inline

style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"


[edit] sample

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


[edit] references

  1. http://phosphorusandlime.blogspot.com/2006/08/css-referencequotation-styles-updated.html
Rate this article:
Share this article: