One of the newest additions to our template language is the @style declaration. Before now, automatically-applied styles in the campaign text editor’s style menu were limited to three things: title, subtitle, and default text:

That method didn’t offer much choice at all, and if you wanted to apply any styling selectively you’d have to delve into the editor’s source view and deal with span tags, style attributes, and inline CSS.

That’s certainly a serviceable way to do things, but a it’s little messy and it’s a little slow. I really, really don’t like slow. That was before the @style declaration, which takes a CSS rule set you’ve created and pulls it into the campaign text editor’s drop-down menu:

This allows you to apply styles to your text in a quick and selective way. How does it work? It’s a simple, one-line deal. When you set up your template language CSS declarations…

/**
* @tab Body
* @section superfunky text
*/
.superfunky{
	/*@editable*/ color:#FF00FF;
	/*@editable*/ font-family:"Comic Sans";
	/*@editable*/ font-size:34px;
	/*@editable*/ text-decoration:underline overline;
}

…you include the @style declaration, along with a name for that style…

/**
* @tab Body
* @section superfunky text
* @style superfunky
*/
.superfunky{
	/*@editable*/ color:#FF00FF;
	/*@editable*/ font-family:"Comic Sans";
	/*@editable*/ font-size:34px;
	/*@editable*/ text-decoration:underline overline;
}

…and voila! The style appears in the drop-down menu in the campaign’s text editor:

If you look at the case above, you’ll see that this “superfunky” text is set up to get pulled into the campaign’s editor tabs as well, meaning that you can change the parameters of the style and have it show up the way you want in the template content:

This is the optimal use, because you don’t have to go back into the code to change anything, but it’s not the required use. You can also set up the declaration so that the style isn’t editable within the app, but still gets pulled into the styling drop-down menu:

/**
* @style superfunky
*/
.superfunky{
	color:#FF00FF;
	font-family:"Comic Sans";
	font-size:34px;
}

Because the @tab and @section declarations are gone, the style isn’t accessible for change outside of the native HTML template document. This is useful if you’re an agency or freelancer and you’re setting up a template where the styles adhere to brand guidelines and don’t change, but you still want to give the client the option of applying some brand-consistent styling to their text (certain background colors on the text, for instance). It’s also handy for text styles you may use a lot in templates where you don’t make use of the app’s template editor tabs at all.

There are two important rules you have to follow that determine whether @style works for you or not: The style to be applied must be a class and not an ID (multiple IDs in HTML is a no-no anyway), and the CSS ruleset must contain at least one font-xxx declaration (like font-family or font-weight). If either of these two rules are overlooked, the drop-down menu won’t be populated with that style.

There’s one special circumstance in using @style, too: you can set it up to automatically wrap your selected text in a heading tag (h1 through h6). In the past, we created false headings by applying the title or subtitle style onto a <span> tag that wrapped your selected text. Now, when @style is applied to the CSS ruleset of an tag, the app knows to take that rule and apply it as HTML markup rather than wrap the text in a <span> and apply a class. There’s nothing different that you have to do. Just set the declaration in the same way:

/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails.
* @style heading 1
*/
h1{
	/*@editable*/ color:#202020;
	...

In this case, you don’t have to give the h1 ruleset a class, and the app pulls them in automatically:

Other than a couple of rules to live by the new @style declaration is pretty robust, and it allows you to do quite a bit with text CSS styling. Just remember that the @style declarations that you set up in the “My Templates” area can only be applied when your actually creating your campaigns, since they are content-specific rules. Experiment away!