Using CSS in Spotfire HTML — Part 3

This is part 3 of my HTML series.  The first week, I explained the basics of HTML tags in this post.  Post number two discussed tag attributes.  This week, we are going to cover formatting with CSS.

To set the stage for this post, here is a simple example clearly demonstrating where we are going.  In the Text Area below,  2 lines are duplicated.  As you can see, the lines look the same, but the code is different.  One is using CSS, and one is not.  That’s what this post is all about.

Now, let’s talk about what CSS is and why it’s important.

What is CSS?

CSS stands for Cascading Style Sheets, and it is used to specify the format or style of content provided by the HTML.  This might be confusing because it is possible to specify formatting with HTML tags.  After all, some of the tags I pointed out in the Intro were tags for formatting, like <b>, <i>, <em>, <strong>, and <font>.  That’s what italics and bold are — Formatting!

Really, this was all just one giant mistake in coding history.   HTML was not intended to be used for formatting.  As W3School notes:

“HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.”

Why use CSS?

The answer to that question is simple — EFFICIENCY.  CSS is how Ruths.ai and Big Mountain Analytics are able to quickly produce beautiful templates.  We definitely aren’t formatting each and every button or Text Area.  That takes too long.

To demonstrate, download this free template from the Ruths.ai Exchange.  In the DXP, right-click on the Text Area in the Terms page, select Edit HTML, and look at the code. It’s using the <style> tag, and CSS attributes control the appearance of the entire DXP.

Now, when building web pages, CSS can control the layout of multiple web pages all at once.  When building DXP files, CSS can control the appearance of multiple text areas and other Spotfire elements (like the legend and your buttons) without having to format each and every one of them individually.  It also opens up the ability to control formatting where there is no GUI, such as with the legend.  Formatting the legend requires HTML/CSS.

How to Use CSS in Spotfire

The DXP example you downloaded uses  CSS with the <style> tag, and that’s perfectly valid.  For a complete understanding, know that there are three ways or places to write CSS.

  1. In a separate CSS file (.css extension) — This is only really applicable to building web pages, so don’t even worry about this.
  2. Inside a style tag — This is what you saw in the DXP download.  This is referred to as “inline style” (knowing the right terms to Google is half the battle).  In web design, this is not considered a best practice, but we aren’t building web pages.
  3. Inside an HTML tag using the style attribute.

Which Method to Use

As a Spotfire users,  you should familiarize yourself with methods 2 and 3.  The next logical question to ask would be — when do I use which method?  Here is a quick summary of the pros and cons of each.

Style Tag

Pros:

  • Most efficient
  • Reusable across DXP files
  • Write a little or write a lot
  • Able to access what the GUI cannot

Cons:

  • Need to know how to reference Spotfire elements
  • May take longer to build

Style Attributes

Pros:

  • Quick and easy to write
  • Can be reused

Cons:

  • Must be written for individual tags
  • Not as efficient

 

CSS Syntax

Style Attribute Syntax

The general rules for style attribute syntax are…

  • The style attribute will use property/value pairs.
  • The pair must be in quotes
  • Separate Multiple pairs with a semicolon.
  • Enclose the pair in double quotes.

Style Tag Syntax

Using the style tag, the syntax looks a little bit different.  Note the use of brackets and the reference to specific pieces of Spotfire.  This is where the waters start to get deep again, so I am going to wrap this post up with the example shown below.  A future post will talk about this syntax in more detail.

 

In conclusion, if you new to HTML and CSS, consider these two suggestions.

  1. Start using the style attribute immediately in your own work.  It’s super easy.
  2. Review the CSS in the template download.  Alter and play with it to develop an understanding of what each element of the code controls in Spotfire.

These two suggestions will go a long way in terms of developing your skills and improving the appearance of your Spotfire projects.  Now, this post is getting a bit long, but I wouldn’t be doing a good job if I didn’t talk about syntax.

As always, thanks for reading and feel free to leave comments!  Lastly, since I haven’t said it since the intro, don’t forget that once you start editing HMTL, you shouldn’t use the Edit Text Area option.  It will wipe out your code.

 

 

Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

3 thoughts on “Using CSS in Spotfire HTML — Part 3

Leave a Comment

Your email address will not be published. Required fields are marked *