初歩的で大変恐縮でございます。

サイト作成のテンプレートで以下の様に横一列に並ぶ設定にした二つの文字の字体を一つ目は太字にして、二つは普通の字体にしたいのですが、cssでの設定、あるいはテンプレートに直接設定するなど、どのような方法があるか(最適か)お教え願いませんでしょうか。

スポーツ：野球

```

        <p>スポーツ：</p><p>野球</p>
    
```
CC BY-SA 3.0
2016-12-09T03:12:49.443
31039
2017-01-16T16:40:07.970
19211
question
css smarty
二つの文字を横一列に並べたテンプレートの設定で一つめと二つめの字体を変える方法
直接エレメントにスタイルを指定する場合。

```

    <p style="font-weight:bold">スポーツ：</p>
    
```

クラス付けをして別途スタイルシートで指定する場合。  
要素：

```

    <p class="category">スポーツ：</p>
    
```

スタイルシート：

```

    .category {
        font-weight:bold;
    }
    
```
CC BY-SA 3.0
2016-12-09T03:26:39.197
31040
2016-12-09T03:26:39.197
5044
31039
answer