---
title: "Examples of CSS style code for tabs"
canonical: "https://support.appfire.com/space/CT/1561987669/Examples%20of%20CSS%20style%20code%20for%20tabs"
format: markdown
---
> Macro (aura-html)

| **Custom CSS for HTML Macro** | **Macro Structure** | **Result** |
| --- | --- | --- |
| ```html
<style>
.tabs-menu>.menu-item.active-tab a {font-family:Lucida Console; font-style: italic; background-color: lightblue; font-size: 20px;}
.tabs-menu>.menu-item a {font-family: verdana; background-color:#F30289; color:white; font-size: 20px;}
</style>
``` | ![image](media://1ab4854c-1f42-4871-9cd4-f0d2ac20628f) | ![image](media://dc9e2719-aac3-403c-8227-4e797fa26be0) |
| ```html
<style>
.tabs-menu>.menu-item.active-tab a {border:2px black; background-color:#1282C5; color:white;}
.tabs-menu>.menu-item a {border:2px black; background-color:#1282C5; color:white;}
</style>
``` | ![image](media://0e8a9dac-814b-4261-b3c7-e3faa8dda1af) | ![image](media://eec29c9e-84eb-40a8-bb7b-647ed4c60ebb) |
| ```html
<style>
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {padding: 20px 50px 20px 20px}
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a {padding: 20px 50px 20px 20px}
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a:hover {padding: 20px 50px 20px 20px}
</style>
``` | ![image](media://c37ec9c3-d8d2-4854-b13c-0b7827cf22f3) | ![image](media://0c7029ff-82e0-462f-8a97-669da84015e4) |