There are few ways you can style Dragon Webforms. Some styling can be applied directly to elements already placed on the Dragon form. But you can also create HTML and/or CSS outside of Dragon and load this into the UI for use on your form. Here is a brief overview of the three methods.

Add HTML to a static or other element already on the page

You can add styling to any element that allows you to edit a web label. In most cases this is used to edit/add text to the page, but you can also use this to enter simple HTML tags such as a horizontal rule for separating content or a line break to add a little more white space on your form.

1. Open the element and click on the edit (pencil/paper) icon to open the text editor.
   
2. Click the HTML button on the left side of the toolbar above the editor and type the HTML code you wish to use.
   
3. When you are finished, click the HTML button again and click the save icon on the right side of the toolbar.
   
4. Click Done to close out the window and save the element.

Create Complex HTML for your Dragon Webform

When you need to incorporate a greater amount of text and/or images, such as marketing copy related to a product, creating a complex HTML element is the preferred method to style content. You may even place multiple complex HTML elements onto the page and conditionally display them for a more customized experience for your users. To do this, use any external editor to create your content and upload the HTML file into Dragon.  You may use inline code or apply classes to your content, which you can then define in a CSS file and load into Dragon (discussed in further detail below). Tip: You can also use this element to incorporate various types of code (HTML, CSS, javascript) into one file rather than loading all three separately.

1. Once you have created your HTML file, navigate here within Dragon: Dragon Content > Create > Form Elements > Complex HTML.
2. Give your file a description (which is what will appear in the menu within Dragon Builder), browse and upload your file. Note: if you need to edit the code later, you will need to reload the entire file with edits. You cannot edit the code in the UI.
3. Now open your form in Dragon Builder. Expand the Form Elements menu item, click on Complex HTML and find the file you created. Drag the element onto the form and click save at top right.

Note: You may edit/update the complex HTML element within Dragon Content to update all sites on which it appears. However, you may need to republish one of the sites to update the cache.

Create and upload a CSS file to style your Dragon Webform

Creating a CSS file to apply to your Dragon Webforms is an efficient way to customize your form and implement consistent styling within one or more webforms. Your CSS can include rules for classes and IDs specific to Dragon as well as standard HTML tags.

1. The best way to start is by looking at the existing Dragon code. Right click in your browser window and click Inspect Element. The Inspector tab reveals the Dragon code so that you can view selectors for elements you may need to style.
   
2. On the Style Editor tab, you can view the existing Dragon stylesheets and add your own. The first stylesheet shown is the Dragon theme; the second is the generic Dragon style; and any that follow are those placed on the form in Dragon Builder. Type your CSS into your new stylesheet and see how your form looks as you work. Once you are happy with your stylesheet, save it to your computer. Be sure you save the file as a .css file.
   
3. The screenshot below shows the create new and save functions in Firefox.
   
4. Now return to Dragon Content and navigate here: Dragon Content > Create > Page Elements > Stylesheet. Give your file a description (which is what will appear in the menu within Dragon Builder), browse and upload your file. Note: if you need to edit the code later, you will need to reload the entire file with edits. You cannot edit the code in the UI.
5. Now open your form in Dragon Builder. Expand the Page Elements menu item, click on Stylesheet and find the file you created. Drag the element into the head section of the form on all pages to which it should apply.

Note: You may edit/update the stylesheet within Dragon Content to update all sites on which it appears. However, you will need to clear your cache to see the results.