1.1 Demonstrate knowledge of HTML and CSS

HTML and CSS

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 and What is CSS Specificity?

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.

For Example:

  <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)

Other Resources

Code Academy Hands on Learning course for HTML and CSS W3C definition of Html and CSS