Combing CSS class and Selector

you can target elements that have combinations of classes and IDs by combining those selectors together without spaces. 

Syntax

#header.callout { }

#header .callout { }

#header .callout:
Select all elements with the class name callout that are decendents of the element with an ID of header.

#header.callout:
Select the element which has an ID of header and also a class name of callout.

Given Below is the example

Exercise 

This webpage describes one classification of elements in the periodic table: metals, non-metals, and semi-metals. It uses CSS rules with class selectors to color those words, both in the top paragraph and the headings.
<br><br>
Using what you have learnt, style the headings so that their background is the same color as their text. Then change the text color to white so that you can read it. For this step, start by styling the headings with the *’metal’* class.