CSS

How I Learned to Stop Worrying and Love the Quirks

Part I

The Elements of Style

What is CSS?

A Brief History

1989 1994 1995 1996 1997 2014

HTML first proposed by Tim Berners-Lee

CSS first proposed by Håkon Wium Lie

HTML standardized (HTML2)

JavaScript first proposed by Netscape

CSS standardized (CSS1)

JavaScript standardized (ECMAScript 1)

Current version of HTML (HTML5)

Before CSS: Chaos

  • All styling was woven into the content
  • <font /> tags everywhere
  • Nothing was reusable
  • Very hard to update
W to go UP A to go LEFT S to go DOWN D to go RIGHT 
            <font color="gray" face="monospace">W</font>
            to go <b><font color="blue">UP</font></b>
            <font color="gray" face="monospace">A</font>
            to go <b><font color="blue">LEFT</font></b>
            <font color="gray" face="monospace">S</font>
            to go <b><font color="blue">DOWN</font></b>
            <font color="gray" face="monospace">D</font>
            to go <b><font color="blue">RIGHT</font></b>

After CSS: Better?

  • Separating style from content
  • Themes shared across site
  • Complex layouts
  • Steeper learning curve
W to go UP A to go LEFT S to go DOWN D to go RIGHT 
            <span class="key">W</span>
            to go <span class="direction">UP</span>
            <span class="key">A</span>
            to go <span class="direction">LEFT</span>
            <span class="key">S</span>
            to go <span class="direction">DOWN</span>
            <span class="key">D</span>
            to go <span class="direction">RIGHT</span>

Part II

The Good, the Bad, and the Weird

Block Anatomy

  • A selector selects content to apply to
  • A rule sets a property to a value
  • A block contains one or more rules
W to go UP A to go LEFT S to go DOWN D to go RIGHT 
            .key {
              color: gray;
              font-family: monospace;
            }
            .direction {
              color: blue;
              font-weight: bold;
            }

The Cascade

Cascading Sources

  • Source

    1. Inline
    2. Embedded
    3. External
    4. Client
    5. Browser
            <span style="color: red;">Hello, world!</span>
          
            <style type="text/css">
              span {
                color: red;
              }
            </style>
          
            <link href="style.css" rel="stylesheet" type="text/css"></link>

Specificity: Add It Up

  • IDs (#about)
  • Classes, pseudo-classes (.row, :hover)
  • Elements, pseudo-elements (a, ::before) 
            <div id="about">
              <a class="row" href="tel:5558675309">Phone: (555) 867-5309</a>
              <a class="row" href="mailto:noreply@example.com">Email: noreply@example.com</a>
            </div>
          
            #about a.row:hover::before {
              /* specificity 1-2-2 */
            }
            a:hover {
              /* specificity 0-1-1 */
            }

The Box Model

  • Every layout engine is still built around the box model
  • Basic concepts established in CSS1
  • It makes sense considering what CSS was designed for

Flow

Layering

  • z-index only works with set position—a new stacking context
  • z-index orders within the context
  • Alternatives: float and negative margin
6
5
3
4
2
1

The order here is 2 > 1 > 4 > 3 > 5 > 6.

Reminders

  • Don't underuse CSS
  • Track selector specificity
  • Track stacking contexts
  • Stay in flow (no position) if possible
  • Check browser compatibilities

Part III

In Case of Emergency, Break Rules

Don't Underuse It

  • HTML provides the structure and content
  • CSS provides the styling
  • JavaScript provides the functionality

Do unto others twenty-five percent better than you expect them to do unto you. The twenty-five percent is for error.

Linus Pauling

Doing It Right

            <div class="quote">
              <div class="quote-text"> ... </div>
              <div class="quote-author">LINUS PAULING</div>
              <div class="quote-mark">“</div>
            </div>
            <script type="text/javascript">
              $('.quote').hover(function() {
                $('quote-author').show();
              }, function() {
                $('quote-author').hide();
              });
            </script>
          
            <blockquote class="quote">
              <p>Do unto others twenty-five percent better than you expect them to do unto you. The twenty-five percent is for error.</p>
              <cite>Linus Pauling</cite>
            </blockquote>
            <style type="text/css">=
              .quote::before {
               content: '\201c';
               font-size: 4em;
              }
              .quote cite {
                height: 0;
                opacity: 0;
                text-transform: uppercase;
                transition: height 400ms, opacity 400ms;
              }
              .demo-quote:hover cite {
                height: 1em;
                opacity: 1;
              }
            </style>

Maybe Overuse It?