Business Intelligence Tools / Developers Corner

CSS in the Style Tag — Part 6

Hi Everyone! Welcome to the 6th and final post in the HTML series.  If you have just stumbled onto this post, use the links below to catch up on the series.

Intro to HTML 

HTML Tag Attributes

Using CSS in HTML

Containers and Style Attributes

HTML for Lists

 CSS with Style

This post picks up where post 4 left off with CSS.  To review, CSS can be written in 3 ways  4 ways (updated 4/24/2018).

  1. Inside an HTML tag using the style attribute (see post Containers and Style Attributes).
  2. Inside a style tag.
  3. Inside JavaScript in a Text Area.
  4. In a separate CSS file.

Now, if you are new to HTML and CSS, I recommend starting with a style attribute and then moving up to CSS inside a style tag before graduating to JavaScript in external style sheets.  Style tags are easy to edit, copy and paste, and share.  You will also be able to create a reusable CSS template for all DXPs, and formatting will be a thing of the past.  It’s magical!  Furthermore, CSS opens up formatting for pieces of the application that have no GUI.  In other words, the only way to format it is with CSS.

Now, it is bound to happen that as you get better at CSS, you write more of it.  At that point, it might make sense to store the CSS in a separate file and reference the file in the Text Area, but not if you need to edit frequently.  I’ve always just kept my CSS in the DXP.  There is also the option of creating a CSS style sheet with JavaScript.  This is demonstrated in this Data Shop Talk post.  Scroll down to “Insert a Style Sheet”.

This blog post is going to focus on CSS in a style tag.  I will break it down into 4 parts.

  1. Example of CSS in a style tag
  2. Explanation of the basic syntax and rules
  3. Other syntax and rules
  4. Explanation of how to decipher the “Spotfire” elements

CSS Example

Let’s start off with an example so you have a frame of reference.  Download this template NFL Expectancy Win Calculator.  (Note: The button says subscriber-only, but click it anyway.  It will take you to a different website.  You might have to create an account, but the template is free.).  Go to the Expected Wins Page.  In the Pythagorean Win Expectancy Text Area, right-click and select Edit HTML to see the code… A LOT of code.  Scroll down in the sample template to make sure you know where the end is.  I’ve taken a small screenshot below.  This was all written by Lucas Wood of

In this example, the code is controlling the appearance of the entire template.  It can be copied and pasted into other DXPs to achieve the same look and feel.  Next, let’s look at the rules and structure for writing this type of code.

CSS Syntax

I’ve mentioned them before, and I’ll mention them again — W3Schools is a great resource for learning HTML, CSS, and JavaScript.  The image below is from their site that demonstrates the basic syntax.

It’s very simple syntax that consists of a selector and a declaration block.  The declaration block uses property-value pairs where the property and value are separated by a colon and multiple property-value pairs are separated by semi-colons.  The declaration block itself is wrapped in squiggly braces.

Now, selectors are important.  They find HTML elements and format all elements of that type on a page (or in our case, in a Text Area or DXP file).  This is the efficiency I have been talking about.  CSS formats everything with one block of code so you don’t have to format individual elements (like buttons) or add attributes to all HTML tags to format them.

There are many different types of CSS selectors, and you should definitely review them at  W3Schools .  Here is a simple example of an element selector.  The “p” references the <p> tag, and the selector is selecting all of the <p> tagged content and formatting it.


Here is an example of a class selector from the template.  The selector is looking for the .sf-element-page-tab class.  It will select all page tabs and change the border and padding accordingly.


Now that you know the basic syntax, let’s look at some specific code in the template that might not yet make sense.  For example, you may be wondering what @import and !important are doing.

Other Rules & Syntax


CSS also utilizes “at-rules”.  The “@import” is an example of an “at-rule”.  At-rules are special instructions that control how styles are applied.  In the case of this example, @import is pulling in a Google font.  Other examples include @media, @font-face.


Each line of CSS in the template has “!important” at the end of it.  “!important” establishes priority.  It is telling SPotfire this code takes precedence over any other formatting that might be in the template, such as formatting in HTML tags or formatting from the set theme.  The exclamation mark is called a delimiter token, and “important” is a keyword.


You may also have noticed that a line can be commented out with a forward slash and an asterisk.

Okay, that was a lot of talk about syntax.  However, there is still more to learn.  Next, we are going to talk about how to decipher the classes used by Spotfire. For example, if we want to change the active page tab color, how do we know to write “.sf-element-page-tab.sfpc-active”?

CSS for Spotfire

To figure this out, you can use the Developer Tools native to the application.  Developer Tools are NOT turned on by default, so to even see the menu, go to Tools > Options > Application > Scroll to the bottom and check the box for Show Development menu.  Now, you will see this menu in Tools.

Select Developer Tools, and a popup window appears. Click on the button that looks like this  to inspect page elements.  Now, move the mouse around the DXP and hover over elements to get the element names. I’ve taken some screenshots below for example.  I realize these screenshots aren’t the best.  I actually tried to make a video, but when you move and hover, stuff is constantly flashing on the screen.  It was painful to watch.





Now, take note that an element can have multiple classes.  Each class is denoted by a period, such as “.sf-element” and “.sf-element-visual-title”.  The element “.sf-element” is a referring to something less specific than “.sf-element.sf-element-visual-title”, and “sf.element.sf-element-visual-title.sfpc-top” is even more specific.

For example, for the element shown below, to format the text box, use “sf-element-text-area”.  You don’t need to dig all the way into “sfpc-first.row”.


You’ll get better identifying the right element and class with practice and trial and error.

Final Notes

I know this is turning out to be quite a long post, but just hold on.  I’m about to wrap it up.  There are just a few more things to note.  First, in order to have CSS apply to an entire DXP, you need to have the <style> tag and accompanying CSS in at least one Text Area on each page. With that said, be careful when you edit.  You might drive yourself crazy trying to figure out why the CSS isn’t doing what you want when there are conflicting pieces of code on different pages.

Well, that wraps it up.  Thanks for sticking with me to the end.  Clearly, there is much more to learn about CSS than one blog post can handle, but this will get you started.





2 thoughts on “CSS in the Style Tag — Part 6

  1. Anagha Tasgaonkar Reply


    I want to use the rest Button, But instead of creating traditional button , just want to create cutomized button with logo / icon on it in Spotfire text area. Can I do it

    • Julie Sebby Post authorReply

      You might be able to use CSS to apply the action of the button to an image, but I don’t know how to do that without research. You could just use an action control image instead of a button, but that would depend upon what you want the button to do.

Leave a Reply

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