We can specify the style of the element that we are working on whenever we want to change the way that a specific element is to look. Using CSS in this way is not very efficient and will only change the styles of the specific element we are working on. For example, if we want all the h1 heading elements in our dashboard to use a specific color, we need to make this same change every time we use the h1 element. It would be a lot easier to set up the CSS as part of the header or as part of an external CSS file, so we can use it for all our HTML code.
Defining styles inline would only be used for one off corrections or changes, and it would be very limited in the instances that you would be using this type of rule definition. In our example, we will make a quick change to the way our heading is currently displayed to give you an idea of how the Splunk HTML code will use an inline style definition. Log back into your development environment and we will get started:
- Move into the
htmldirectory of our Stock Market Splunk App, so we can make the change to our heading that we have just set up:cd $SPLUNK_HOME/etc/apps/stock_market/default/data/ui/html/ - Move down to line 21 of our HTML code and you will see that we have set out our
h2element for theYahoo Stock Valuesheading. We are going to make a minor change to specify some style, and change it to the following line:21 <h2 style="color:blue;margin-left:30px;">Yahoo Stock Values</h2> - In our example, we have set the color as
blue, but we could also specify it as a three value hexadecimal value. We have also set the distance of the heading from the left margin at 30 pixels. As you can see, we use thestyleattribute to declare the rules for thish2element. Text color in blue usually implies an unvisited link, so this example is not something that you would want to implement unless you had this text linked to adhere to web standards. - Save the code changes that you have made and refresh the Splunk cache in your development environment. Reload the raw dashboard and you should now see that we have a heading for our dashboard that is a lot clearer to read when compared against the new United theme that we implemented.
Not much of a change, but it's still useful to know. There are few times that you would use this type of CSS definition, so we will try to limit the times that we use this type of style definition. We will continue to work with our raw Splunk dashboard but move onto more efficient ways of working with CSS.