Add a New Semantic Tag

Create the film title class

To create the film title class, follow these steps:

1. Open the stylesheet for editing;
   1. Click on the small e button beside the stylesheet drop down;
   2. Select the file name that's visible in the stylesheets drop down list;
2. Go to the bottom of the stylesheet;
3. On a new line, add the following style:
   span.filmtitle {color:#005500; border-bottom:1px solid #005500;}
4. Save the file.

Now that you have a new style to markup your content, you can use it in your pages. To make inserting the span tag with the proper class name much easier, you'll add this style to your custom style list.

Add a new custom style to the drop down list

To add a new style to the drop down list, follow these steps:

1. Right click on the Styles button above the editor;
2. From the popup menu, select the file styles.custom.xml;
3. Locate the last group of styles in this file;
   The file is structured like this:
   - The top element is styles
   - There are multiple group of style elements within the top styles tag
4. Add the style element that's found below the last group;
5. Save and close the file;
6. Left click on the Styles button above the editor and select styles.custom;

<style>
 <name xml:lang="en">Film title</name>
 <name xml:lang="fr">Titre de film</name>
 <description xml:lang="en"/>
 <description xml:lang="fr"/>
 <elt>span</elt>
 <attr>
  <name>class</name>
  <value>filmtitle</value>
 </attr>
</style>

Now that the style is defined in this file, using it will only be a matter of selecting it from a drop down list, which is much easier that creating the span element and film title attribute manually each time you want to use it. Creating styles is discussed a bit further on the XStandard web site.

Use the film title class

To test your new class tag, copy and paste the following paragraph in a topic:

Casablanca is a 1942 movie set during World War II in the Vichy-controlled Moroccan city of Casablanca. The film was directed by Michael Curtiz, and stars Humphrey Bogart as Rick and Ingrid Bergman as Ilsa.

To set Casablanca as the film title:

1. Click on the Styles button and select styles_custom.xml from the popup menu;
2. Double click on the word Casablanca to select it;
3. From the Styles drop down list, select Film title.

Casablanca is now displayed as a film title, thanks to your new semantic style.

Casablanca is a 1942 movie set during World War II in the Vichy-controlled Moroccan city of Casablanca. The film was directed by Michael Curtiz, and stars Humphrey Bogart as Rick and Ingrid Bergman as Ilsa.

Create the actor class

You can create a custom actor class by repeating the above steps, but this time you'll create a new style group since your cinema related style list is growing. Here is a summary of the tasks you need to complete.

To create the actor style so you can apply it easily, follow these steps:

1. Open the file styles_custom.xml;
2. Add a new group at the bottom of the file;
   Note: always make sure your xml file is well formed
3. Move your previously created style in this new group;
4. Add the actor style like you did for the film title (see markup below);
5. Save the file;
6. Select the file again from the Styles pop up menu to refresh the the editor's list.

<style>
 <name xml:lang="en">Actor</name>
 <name xml:lang="fr">Acteur</name>
 <description xml:lang="en"/>
 <description xml:lang="fr"/>
 <elt>span</elt>
 <attr>
  <name>class</name>
  <value>actor</value>
 </attr>
</style>

Your new actor style is ready to use but it's not yet defined in the stylesheet.

To add the appropriate selector to the stylesheet, follow these steps:

1. Click on the "e" button beside the stylesheets drop down list;
2. Select the collection's stylesheet from the pop up menu;
3. Add the actor style selector to the stylesheet;
   span.actor {color:#005500;}
4. Save the stylesheet and close the file;
5. Click on the "e" button again;
6. Select Update editing stylesheet.

Your new actor style is now ready to use. Try it on Humphrey Bogart and Ingrid Bergman. You can create styles like these for everything you'd like to markup in your content. These tags make it much easier to reformat all your collection easily from a central location, which is your main stylesheet.

See Using DIV and SPAN Elements to learn more about two of the most important elements that will help you achieve this goal and Using ID and CLASS Attributes to learn more about those two attributes.