Text style of tabset in Flexdashboard using css

Question

I'm trying to adjust the font style, size and color of the titles of my .tabset pages in a flexdashboard app.

Here's a sample of the layout I'm using:

---
title: Sample Layout  
output:
  flexdashboard::flex_dashboard:
    orientation: columns
    theme: cerulean
    vertical_layout: scroll
runtime: shiny
---

<style>
.navbar {
  background-color:blue;
  border-color:black;
  font-family: "Times New Roman", serif;
}
.navbar-brand {
  color:white;
  font-size: 25px;
}

body {
    font-family: "Times New Roman", serif;
    font-size: 18px;
    color:black;
}
.chart-title {
    font-family: "Times New Roman", serif;
    font-size: 22px;
    color:black;
}
.nav-tabs-custom > nav.tabs > li.active {
    font-family: "Times New Roman", serif;
    font-size: 22px;
    color:red;
}


</style>

Page 1
=========================================

Column 
-----------------------------------------

### Introduction


Page 2 
========================================

Column {data-width=175}
----------------------------------------

### Sidebar


Column {.tabset}
----------------------------------------
### 1st title I want to change 


### 2nd title I want to change 

Does anyone know which css style argument I need to use to change the font size and color for these tabset titles? Thank you!

Answer 1

You will need one for the active tab and one for the non active tab.

<style>
.nav-tabs-custom .nav-tabs li.active a {
  color: blue;
}

.nav-tabs-custom .nav-tabs li:not(.active) a {
  color: red;
}
</style>