Tuesday, July 31, 2007
EditMe's editor allows several text formatting options, such as the ability to set the font, size and color of text. We've found these features are used most heavily by our least technical users, as they provide a simple way to attractively format content on the page. But, as some of our customers have found, these "one-off" formatting tricks have drawbacks. This tip discusses how you can use CSS to centralize, standardize, and simplify the formatting on your site to avoid these drawbacks.
In case you haven't encountered them yet, here are a few of the drawbacks of using lots of font-level formatting:
1. Inconsistency
Formatting of text may not be consistent across pages, or even within a single page. For example, if you make a heading that is 14pt and light blue at the top of your page, somebody may make a heading further down that uses a darker shade of blue, or they may forget to make it bold. Sometimes its hard to tell what formatting has been applied just by looking at the text. Pages with tons of different formatting and colors can look messy and amateurish.
2. Complexity
Repeating complex formatting can become very tedious. If you want all headings on your site to be dark red 16pt Helvetica and bold, you must invoke four editor commands to create every heading. Not only is this a lot of clicks, it creates lots of room for error.
3. Unmanageable
Once you've finished building your site, you will undoubtedly want to change things at some point. Maybe you decide to change all the headings from dark red to light blue. This is no small feat, requiring you to edit every page that uses dark red headings, select each heading, and change the color. Chances are you'll miss a page or two and not even know it.
So you're beginning to see the drawbacks - what is the alternative? EditMe's editor provides a Styles drop down that lists CSS classes from your site's style sheet. To see how this works, edit a page on your site, click your mouse on a paragraph of content and select "attachmentHead" from the Styles dropdown.
Wow - we have blue text in a lightly gray shaded box - all in one click. Not bad. The styles you see in that drop down are what come with your site's default style sheet, which comes with the Skin you applied to your site (or the default if you haven't changed your site's skin). Let's take a look at how you can modify that list and add new styles of your own.
Editing your site's style sheet:
What you see here are the styles listed in your editor's Styles drop down. This file format is called CSS, which stands for Cascading Style Sheet. It allows for named styles to assign multiple formatting rules to text. By defining styles here and applying them in your site's editor, you can change how those styles look in an instant and across your entire site by editing this file.
CSS is sort of like the game Othello: it takes a minute to learn but a lifetime to master. It's fairly easy to jump right in and make simple changes, but there's a lot more complexity to it than there may seem. See some of the links at the end of this post to learn more about CSS. Your site formatting prowess will be well rewarded by spending a couple hours learning a bit more about this formatting language.
Let's create a new style to see how this works. Paste the following code into the top of your Current stylesheet and then click Save & Apply:
| .CssSample { font-face: courier new; background-color: #DBDBFF; color: green; border: 1px solid #969696; padding: 2px 2px 2px 2px; } |
The ".CssSample" part of this is called the "selector" and it specifies the name of the style that will appear in the editor drop down. That it begins with a period indicates that this is a "class" selector. Only classes will show up in the editor's Styles drop down. If you look through the style sheet, you'll see other kinds of selectors that don't begin with a period, or begin with other special characters. By using other selectors, such as names of HTML tags, you can change the default look of your site. This is very powerful, and a little beyond the scope of this Tip. Suffice to say that you should name your styles starting with a period if you want to apply them in the editor.
You may have to refresh your browser in order to get the updated style sheet as browsers typically cache them. Press the F5 key while holding down the Ctrl key to make sure you've got the latest style sheet. If you edit a page now, you'll see CssSample listed at the top of your Styles drop down. The Styles drop down lists the styles in your stylesheet in the same order they are found, allowing you to control the order they appear. You'll also find these styles listed in some of the dialogs, such as when inserting a table or image. The code sample above is contained within a table that has the .CssSample class applied to it.
Now that you know how to add and apply CSS classes to your site, here are some great places on the web to learn more about how CSS works:
