Review CSS selector precedence.
HTML- HyperText Markup Language and CSS - Cascading Style Sheets as defined by W3C, are the two core fundamental technologies for building websites.
HTML is the structure and CSS defines the visual layout.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
CSS selector precedence is the order in which CSS styles will apply to your HTML markup.
Precedence is evaluated according to these rules:
Inline CSS takes precedence over any other CSS (outdated form of styling, typically still used in email templating).
More specific selectors take precedence over less specific ones.
ID selectors take precedence over class selectors.
<header id="header" class="header head-section" role="banner" aria-label="Site header"><div id="page" class="section layout-container clearfix"> Header Text </div></header>
#header would take precedence over
.head-section (because ID selectors take precedence over class selectors)
#header.head-section would take precedence over
#header (because more specific selectors take precedence over less specific ones)