Formatting Styles

Styling gives you the freedom you need to control the formatting of your entire website in one centralized location. Whenever possible use styles to format your documents. Making a style for your header titles and then apply it to all headers in your website allows you to change the color of that header from black bold to blue normal simply by changing a single setting. With a few clicks minor adjustments your whole site can have a new look and feel in less than a minutes time.

Using the Style Sheet

The style sheet provides you with the ability to create, edit, or delete your styling from one centralized document. This document is then included in all of your TAGGON articles, by this means you can make a change to the style sheet and be sure everything will update simultaneously.

The style sheet uses CSS, a very simple method of noting formatting. At the bottom of this page we provide a detailed list of some of the more common options for styling your documents.

To use the stylesheet, select the Edit menu followed by the Style Sheet option from the TAGGON Menubar.

Your Style Sheet page will appear on the screen ready for editing.

Note to experienced CSS users, using short-hand declarations is fully supported, however the styling dropdown boxes rely on full declarations and may not populate. Keep this in mind when styling your documents.

Working with Styles

To add a style to your Style Sheet you must follow the following procedure. Select an empty area of the Style Sheet by clicking on it with your cursor.

TAGGON applies CSS formatting based on what is known as a Style Declaration. So all you will need to know is how to make one, and thankfully its easy as pie.

A Style Declaration is composed of 3 parts. The Classname, the Start and End Markers, and the Declarations. Thats really all there is to it. You're kidding you say. No I'm not, making a new style should not take more then 10 seconds to type out. Lets look at the 3 sections so you can understand what we mean.

The Classname is simply what you would like to call your new style. For example you might choose to call your new style black_headline then when you are editing your pages you will see black_headline as one of your formatting options under the style dropdown box. How do we declare this? Just type in the following.

.black_headline

That's it. Note however the period in front of black_headline. This is important since the period tells TAGGON that a new style should be made with the name black_headline. Great one of three steps completed. The next one is even simpler. Add the following two characters to what you have typed so far.

{

}

Your Style Declaration should now look like this:

.black_headline

{

}

Simple? So what did that do? The two curly brackets are called Markers. They tell TAGGON to apply all the formatting we decide to put between these two characters when someone select black_headline to apply to their page.

Last step. The Declarations. The Declarations section contains the meat of your styling. You can have an unlimited amount of formatting applied when this style is selected. You just add a new line for each format you'd like to apply. Lets start by simply setting our style to a black color. Type in the following on the line between the two curly brackets.

color: black;

Your Style Declaration should now look like this:

.black_headline

{

color: black;

}

This Declaration has three parts. The part before the colon is the name of the property you wish to change. In this case the color. The part after the color is the value you wish to apply. In this case the color black. Finally a semicolon is used to end the Declaration. This applies for every format you wish to apply. That's it! Your done! Now whenever you select black_headline under the style dropdown your text will turn black.

Wait you say. But thats kind of boring, I could just change the color under the Font color menu. Well yes this is true however with this style you can now change all your headers at once simply by changing the declaration to:

.black_headline

{

color: blue;

}

Now, assuming this style was applied to all headers in your site, all headers in your site will suddenly be blue! It only took you 10 seconds to do! Ok so it still is only one command, what if you wish to make the headline more stylish? Just apply more Declarations. Here is an example of a headline that uses Times font, 18 pts in size, is black in color, and bolded.

.black_headline

{

font-face: "Times";

font-size: 18 pt;

font-weight: bold;

color: black;

}

That's it, moreover that's as complicated as it gets and you will save enormous time styling your TAGGON website with this technique. To modify simply change the Declarations to the new formatting properties you desire. To delete simply remove the entire Style Declaration.