There are many ways to apply styles across a document, but often you many only want to use a style on certain elements. Or, you may want to create a style that can apply across several elements in a document, without repeating the style rule.  To do this, you use the class attributes. These attributes are global attributes that can be applied to nearly every HTML tag via the JCK Editor.

The Style toolbar button allows you to list multiple styles to the same element or tag in a document. For example, you might want to have certain sections of your text called out in a different colors from the rest of the text in the document. You would assign your paragraphs with typography styles like this:

Using Typography Styles

Typography is the art and technique of arranging type. The arrangement of type involves the selection of typefaces, point size, line length, line spacing, adjusting the spaces between groups of letters and adjusting the space between pairs of letters. Below I have listed some of the styles to give you a good idea of what can be done with the JCK Editor. Any images associated with the styles have been encoded in the classes so you can simply copy and paste then into your own typography style-sheet.

Div & Span Styles Tooltips

The tooltip or infotip is a common graphical user interface element. They are key elements in web design that deliver sophisticated typography and various stylings.

CSS Code:

div.doc, span.doc, div.media, span.media, div.img, span.img, div.info, span.info, div.help, span.help, div.install, span.install, div.warning, span.warning, div.download, span.download, div.vote, span.vote {
    margin: 10px 0px 10px 0px;
    padding: 7px 10px 7px 35px;
    display: block;
    border-bottom: 1px dashed #C8C8C8;
    border-top: 1px dashed #C8C8C8;
}
div.doc, span.doc { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGKSURBVHjaYjxx4sTNmzcZsAF1dXVzc3N00Xnz5v3FAYBSx44d+48KWP78+QPU9vr1ayAHyICIAhkSEhK+vr7r16//9++ftbU13AKm379/AylGJMDExAQkgYK/fv0KDAy8ePHioUOH8GmAAKAgUAqoJyws7Pz58/v374dqAApBNEAMhpAQDbKyskCHCQkJ5ebmnjlzBqKBBa4BOSSA3Ddv3sB9JSYmBlEG0vDz509MDRBw5Paaa8+OQNjGni4oNgBdAjEPGVx8sC/Dsx7CnrG90dMoCd0GIAnUBid/fP9x5eFOiAYgG58ftpycdfoWSOmnrx8gIt+/fcub5GSj64fdDwfPrS+Mbgcyjl9fBRFJ968Fkv1LK1kg8YCmx0TVtXVmroGBFlxk68npFy5cczEPR3ESxOlARpR76e+fv/ceWaVpoAjRcP3CfQ+b6CT/WlBaAgYRFxcXWhBlR7UB9W89uFBFX/rOxac+DgkZYc0gT7u4uAATDAMO4O4XvXHPXH+X5NyYDogIQIABADJ964Kwl/g4AAAAAElFTkSuQmCC") no-repeat scroll 10px 9px #FFFDEB;}
div.media, span.media { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGhSURBVHjapFPLasJQED2JUTGSxo0IFhfdd+dH9BP8AEVQ6NqVWvUTunDjj/QT3LstKlLBihKrMT5Jc6b4QKKUdmAyzL1nzpy59wau6+Lc0+m0e7l2a88XWCqV3N+sXSW4LLhWTFfy+fxLMBishsNhRCKRozMfDAagpVIprNdrOI5zdObb7bamZLNZt1Ao4C/WbDah7XY7YXt96+Ljy0UsFoNpmtB1XUDL5RKz2QyWZeH+TsHz0wPK5TIajQZYq3kyRNL7p4NcLnezY6vVEmy9XpfIWpUfdlFVFdPpFKvVyte5RwyxlUpFImu1zWaDxWKBQCCA4XAI5hwjGo1KV9u2RX4oFBIMsd6tYDKZCFZGmM/n3qYus5LEz5LJpBAQy1EymcxJwQ+BAe86EY/HfQm4dyAoFovo9XonBZTF+QgwDOPqIRJDbKfTkVwU8MM57xQb/X5fZj10o+33ewGyGzHEHkwIeJc85UezK/ITiYREvgUaz2U8tjAajbw49vLVkUDegdeh1m63q+yoaZp0Z6SfqyCYzq6MXGOtIn/UP+xbgAEAs6qd/uA+acYAAAAASUVORK5CYII%3D") no-repeat scroll 10px 10px #FFFDEB;}
div.img, span.img { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEvUExURfX19fn5+Z7R84/K8nqoMK2travX9VCl4E+l32Kx56vX9I6Ojqurq9nZ2Zubm3Nzc/T09D+a2vb29vf399vb29/f356enni97XZ2dqqqqp/R80+l4H9/f/j4+La2tqamppOTk5eXl4mJiXt7e4SEhF6PlWGMhlaPkdbW1k5lM7i4uH6qOmSq21uGmCtEO0pqRGOy53m97ZDJ8ejo6IChmKvW9H5tLXi+7WqUh2Ky52yRi3W442Ox53upMJDK8mCm0FKg03i+7JrM7UheKk5zLU+m4F2SmaLF1nupMampqYnC4ydKTmOw5oKvQ3+UimaXooKuR420VFBtInm97FCi3OXl5VKj2rKyspm+wVl6YD5SPXxkRlyEZECb2aGhofPz829vb3qoL/r6+v///////67cr2YAAABldFJOU/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AGWjSgwAAAMlJREFUeNpiSAEDXk9WCCOFAcyVDw8V4WEVhQpoyMsZJwOBKCuPCFBALg4FaDGIJaEAMQa+pFgoEBSMjU3iY1Bk5AhxCOOQlmZnZ+dwZVRkUGDUcYtRtffhNLDh5LRkVGDgllV3CYr0txYPdjQUN5flZlASVtN01rfwYmZmNrJjFlZiUBGyitLz1nViYmKSkmISUmGQYYjwizZxN+XiYmPjYgNylRl8A80CtFkSwQDIlRDwYGGxTYQCAQkG/ngUwM8gmYACJAECDADjBT2EpEjQVwAAAABJRU5ErkJggg%3D%3D") no-repeat scroll 10px 10px #FFFDEB;}
div.info, span.info { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG5SURBVHja7FU9S8NQFL2xUalYKA6FgnToEHQTMgrFuotTJym4VfwJ1VXJD3AQiiCoUxz8A/YLMjgUMzS4hFJSJGCwoYNDU8vz3rRiRY0htojgg5OcnHNebt7re68cYwwm2aZgwu3vF+C9zIbMvdJ1xDYiO3w+Q5wiivSQzLBgI+j3XRzwPFzHYpBNJvFlCOKkkUeZwFPU60EmxIfyi8spmF+5AhCZC+KkkUcZzwq0TL+CegIVuxpnrNtgHxpq5FHG6x2eI3AcSEXjS/gVn8wDauRRJvAUdR28zCYAmvjb2pdvBnHS0HMzQQs4Xag+mE+YwlhrF6DGDUAcNfIoE3iZ4vCP9Nub1MLmDvBzBgrmwJiJw3MoAXrx2M0ELoArRH40W4eN+l1eWN16v0eUCyAPqfyTZQob+7W9eum8bN23AKZjLoiTRh5lAhdwNxEfpXvFamouJxAnbeh5Ns7PcS3L8hreSoIggGEYoCgKyWlJksrfdvbaJKMoFAqs3W4zVVUZcb/9eL+nomVZoGkamKYJuq6P/7judDoQDochEomM77gebbZtp3O5XIm4KIppv/24///kXy/wIsAAxVM738t2EI0AAAAASUVORK5CYII%3D") no-repeat scroll 6px 6px #FFFDEB;}
div.help, span.help { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJeSURBVHjadFNdSFNhGH6+eTRd22RT1J2hbtNskGkZhjfGLGoQQmFRCIFX0Q9E0E1edOFFF12EEHXTD4QXBV2MgkSKCEQDpTCS0prZmtMzddpmnsPUs53zdc4Zjs2zXnh4+d6fh+d7v+8llFLstFcfwvQXxyMYESArebfdDJfdhLPeWrKzlmQTPH8XpEPjHDz15aiwGVFu263F/8QTWI1tYHp2Bb5WOy746oiO4MnrAP0aWkd7mxvLvIS1hIT1DQlq1lJSgFIFrIXB2EQIe+1GXDzlIRmCZ29n6cdADAcOuvAlnEBSovgUCuZIbXW6wRgImmuMmP42hyanBT0nGwijJl8OB9HR0YixWR6qoM/h35joO5ZDcKjvPVpqXBhXaprrHRgamVIJQAYGv9PA4iaixAQxlb7OwKU96Hn4M9OsnlXbjqlKKiHAwxaDGZuMwOxgIfCpTEP3gx/IZ2JSSnsFcmkJRifmwQTn4nDYWIiilLfJf2Of5s/0T+XEl/gCLHJ/wYBKWI1vQia6J8Zgb7PmO+9M6tWIKaRSSTD2MiO4RAIoLMb/bCufuqSIMssuMG1NLPzjUYjmQl2N8/qg5mvNlbpckcDj8P4qGC53txBhaVmRlNSGlI3QvU4NO+OqfH4xgq4THhhUtnO+Bojzc7rC7OlnY2shjK6jdXBXW0nmK9++P0xfjCyAVFUr/9OQfxiyDBrlcL6dxa1rXqJbpruPRulT/yRkawWIyapctCi9MMrAqLAGxFbQc7oRN68cIXm3cdv6H4/SN8MzCHNr2tlhL8Xx9nr0XvXq3vqfAAMAooIk/giJssQAAAAASUVORK5CYII%3D") no-repeat scroll 10px 10px #FFFDEB;}
div.install, span.install { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAFfKj/FAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFWUExURcfHx8TExNTU1MbGxtbW1qioqMLCwsXFxcvLy9vb29PT0+Li4s3NzeTk5N7e3t3d3cHBwcnJyczMzLy8vNLS0qampre3t8DAwJSUlPf391OMKNzc3MjIyP7+/pubm9XV1Y+8Z7m5uT1wII26ZM7OzjdrGc/Pz7q6upGugejo6LKystnZ2bS0tOXl5bCwsLLSlePj4/Ly8pSwhEFzJevr64u6YmJiYrTUle3t7bHWko+7auHh4fv7+9jY2IiIiIWFhXV1dXNzc4y8Zfz8/KGhoWCJSLOzs+np6XBwcFePLefn59DmuluCQ+bm5rW1tWaOT56enqWlpYGrYb29vXp6eouLi0x7MdHR0crKyoKCgpSoifj4+KysrI+Pj4e5YJycnGxsbDttHr6+vrHTkHKWXbGxsaqqqlpwTMPDw/n5+bbUnIe6YH19fZmrjk9qQKenp////////yzGqfoAAABydFJOU///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AHzXy+gAAAEhSURBVHjaYijkYhAvBAgghsJCBh4xgABiKGRikmEoFGUrAAgghkIToAgjp4gigwg3qwiDsH2WPkAAMRQaqMnwS7IWMnAx8gTwZ/BIANULMOQHeXsCtUuGaknpSwEEEJBRKO8LJBgKVTL5FHUYChl0pbVZtDlCChkibIU5Wdkk5Bi4mVMLDdjEzRgK2dnTosytNBi4+OwYwwoKVBkKNWWD85SVNQACDGROtHOBkC6vm6yNIdg8TWkLTvYkFiY9PQ4vMaC5hYXWTEKC6vEubMwCYgIg17qzCKoE8hUW8sYwqjPzJzD4yYmqMQvp8HKz5qb4+6Q7MBSyiMqzc4QLMrgmWxY4KSgBzdDycDSM5WBINM0uiAMLgABzZI6wkbGqsVEhABy2N1AKBD9+AAAAAElFTkSuQmCC") no-repeat scroll 10px 9px #FFFDEB;}
div.warning, span.warning { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGiSURBVHjaYvz//z8DLQETA43BqAUEAQs2wXurGbEJOwDxfijbEYgPoCtQCsWSYECpCB3fXgESv4uCgWJAqbtgDGWjy2M1C2sQ/fkDJP5+huMbS5UbBDQy4HwQGySGrAash9g4+PsXZMt7OAby60U0wuF8EBskhqaGeAt+/wYRb8D4whLHBmH1MDB7db0jg4l1CZgNEgPJwdSB9RBrAdi7v1+CMZBdL6FmB+HDXfCSASQGkkNSR6IPfj1nOL40pwFsOJANxjAA5YPkQGpAbJJ8AAkisKZ6GVUVMBuERaUlGYx1eOB8kBxIDVQtaRbsXTavQVZVFeF6IBaV4GYw1vyPIgZSA1KLywJGbKXpzjZwRvvvHmxEVG7dufYc2Cz3qv9E+6BBUZUfnpJgePX8cwwm0YwY4iC1ID2k5IN6NdV/KHkBjOHJDFUcpBacL4gti0BJ7vWLzwyioqjioaEgfBboAlTx168ZcCZTrBb8+8fQePQoQz0HBwMDCHNyMjCwszMwsLFBU+kvBoafPxkYvn9nYPjxA4JBeoiO5NEKZ3hZABBgADyCRJiEB1HDAAAAAElFTkSuQmCC") no-repeat scroll 7px 4px #FFFDEB;}
div.download, span.download { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACqSURBVHjapJONDYQgDIXF3CJuAsuwhroGy8itxU+4NlbSEA+rNnmBlH4PUkCVUoY3odDAOXdVp0EbyNDocW6tHUZczTn3pEEbyNCoQF+cI/s5DIQ7K8ovoFINUkpSWDdGu0GM8S5caO3UQAr7M4NbcDUIITyC+QnaQkWdnnswN+CdNQSsV/C/a/QM6MLtQ9KsUARzg6NxK+VnCYwxsh0nlp8kcP2Nb+InwADth4wixxbb1gAAAABJRU5ErkJggg%3D%3D") no-repeat scroll 10px 8px #FFFDEB;}
div.vote, span.vote { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAFfKj/FAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFfUExURdZRJ+BhMNufJc1AHfPVUOlvOOBiMPTYa/TYaqoVDvPUWKMUD7AWDZwTD8V0cvTWYq9pKsF0ctZ3cPvxyfvxyrUXDNugJ9y+ovLAL8WKL9xrJpgWEZoZEevKXtSeONufJt3BqsOIKvTUWOvTqvXlxN+0TN+vQ/XadciOLM+WMvLTYNetaPTUR/Hk1PHgw7FqJ/nopvXadNi1kOjDUuO5TenEQvTVS96HJeGwTcyYVPXZavXXYvTXa+KtL/TXafXZj+a9aOe/Zt6KIvvyyfXhq/fehPXdd9xsKPPUT9ywZ/njnvjjn9+7hc6QJsKFLvbeg86hcrNxLd+7c/PXivG/Lua6XfPVT/HYmvHIWvHJWuOrLvTYbPHZqruAStifNeDFrb59MNmyf/bbZ+e+QOvLa/XWYtmiOt24gPvxy/PUV+/MW9y/pqlgIvrqrcWKQKtjIrh3PuluOLkXDPe8n////5o3dm0AAAB1dFJOU///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AJuw3uoAAAD5SURBVHjaYigpYihRBwgghiIhBmERgABiKGGI4GYoSWDRBQgghpKiohKGEnegSHiucxpDiUdSCUAAMZSUFBayFvIAxUsEo7xkSkAMzVR+rXQQI6UgXjGwBCCAGEqEioAAJMUDVFsIYnAzREoxgBVLe9sKAhlxGcKGBiIuQBGfLH5rObCUWxhLHoihryEeK1tSAhBgQJES0WIoEC0BKynhZGRkkwhhY2TkhArw8TKbB9s7MfPygQVUHMSYmEJd/R2Z5MUsYoACep5qdhzs0ew2HFYmvspgLSWJqkpcXJnGliVQM4y0zUwl/ZJ1ggKgAgL5CiC57BwBIAkA1+ZNrKKa42sAAAAASUVORK5CYII%3D") no-repeat scroll 10px 9px #FFFDEB;
}

Typographic Style Boxes

Use typographic style boxes to increase the impact of your publication ...

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim

CSS code:

/* ####################### BOX STYLES ############################ */
/* 'redbox' - adds a box to it's HTML container */
.redbox {
     background: none repeat scroll 0 0 #FAFAFA;
    border-color: #DDDDDD #DDDDDD #DDDDDD #AA1428;
    border-style: solid;
    border-width: 1px 1px 1px 8px;
    margin: 10px 0 20px;
    padding: 8px;
}
/* 'greenbox' - adds a box to it's HTML container */
.greenbox {
     background: none repeat scroll 0 0 #FAFAFA;
    border-color: #DDDDDD #DDDDDD #DDDDDD #b9cd96;
    border-style: solid;
    border-width: 1px 1px 1px 8px;
    margin: 10px 0 20px;
    padding: 8px;
}
/* 'yellowbox' - adds a box to it's HTML container */
.yellowbox {
     background: none repeat scroll 0 0 #FAFAFA;
    border-color: #DDDDDD #DDDDDD #DDDDDD #F2F096;
    border-style: solid;
    border-width: 1px 1px 1px 8px;
    margin: 10px 0 20px;
    padding: 8px;
}
.yellowbox, .greenbox, .redbox {
    -webkit-border-top-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}