Intro to CSS

CSS

Cascading Style Sheets

Cascading

HTML elements inherit their styles in a "cascading" manner, according to a very specific set of priorities, from lowest to highest.

learn-html.org

Reasons for cascading

The browser default styles
Where style is defined (on page, on element, in external sheet)
When style is defined (order of styles)
Specificity of selector (ID, class, element)
Specificity of selector (child, sibling, etc.)

Defining styles

on one element
on one page
external stylesheet

On one element

              
                
                  HTML

On one page

External stylesheet

              
                h2 {
                  font-family: serif;
                }

Anatomy of a rule

            
              h2 {
                font-family: serif;
              }

Kinds of selectors

            
              h2 {
                /* element selector */
              }

              .small {
                /* class selector */
              }

              #headline {
                /* ID selector */
              }