Using {category_name} as an CSS class

Question

I am trying to use the parameter {category_name} a css class on my site click here

on the slide show, you'll notice a green tag which says, "sport" underneath that tag is another tag labelled "energy" I am using the category name's to call out this css properties. I have noticed in inspector all the category names are appearing in the script however i only want one category name to appear.

I have applied the following code: `

            {exp:channel:categories channel="blog" style="linear" show_empty="no" }
    <div class="cat-box-tab {category_name}"></div>
    {/exp:channel:categories}`

what other parameters do i need to apply to only display one category name per post?

Answer 1

If you want to show the category a post is in, then you'll want to use the {categories} (doc link) tag instead.

{exp:channel:entries channel="blog"}

<div class="cat-box-tab {categories}{category_name}{/categories}"></div>

{/exp:channel:entries}

Answer 2

Specifically add limit=1 if you only want 1 category. {categories limit="1"}{category_url_title}{/categories}