CSS3

To Bottom

Cascading Style Sheets

/* Adobe Color Wheel */

/* Canva Colors */

/* Coolors */

/* CSS Lint */

/* CSS Reference */

/* CSS Selectors */

/* Eric Meyers Reset */

/* Google Fonts */

/* Huemint */

/* PX to EM */

/* W3C CSS Validator */

To Top

The Cascade

• Determines which rules apply to the element
• Sort relevant rulesets according to the origin (inline over external) and !important
• Sort by the selector specificity
• If rulesets are conflicting, apply ruleset that was declared last
• Specificity trumps the cascade

To Top

Fonts

Web safe fonts (e.g. Arial, Helvetica, and Georgia) vs. web fonts

    @font-face {  
        font-family: "Emblema One";
        src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
    }
    

To Top

Box Model

Width, height, padding, border and margin.

    /* To have the box model respect the widths we explicitly set */
    html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
        /* This will make it easier to change the box-sizing in plugins or other components that leverage other behavior */
    }
    

To Top

Display

Inline element e.g. a, strong, em, span - dimensions are determined by contents.

Block level elements get displayed on a new line, takes the width of the container and may contain additional block level / inline elements.

Inline-block elements display inline like a span but can be given explicit width, height, margin, or padding.

    .some-parent {
        /* Remove whitespace between inline-block elements */
        font-size: 0;
    }
    

To Top

Position

• position: static; /* Normal flow */
• position: fixed; /* Outside normal flow */
• position: relative; /* Normal flow but with offset properties */
• position: absolute; /* Outside normal flow, offset in relation to the first parent container with a non-static position */

To Top

Flexbox

To Top

Responsive Grid

e.g. Flexbox, inline-block, Twitter, Bootstrap

To Top

HTML/CSS/JS Input

To Top

HTML Output

To Top