➲➲
➲➲
➲➲
➲➲
➲➲
➲➲
➲➲
➲➲
➲➲
➲➲
➲➲

crafting-css crafting with CSS a pure CSS presentation

HTML primer: familiar tags

block elements

inline elements

other elements

HTML primer: additional tags

block elements

inline elements

other elements

Moral of the Story: Pick the right element for your content!

the box model

  • Width and height are set on the content.
  • Padding is the space between the content and the border.
  • Margin is the space between the border and external elements.
  • Notice margins collapse for vertically stacked elements.
  • When box-sizing: border-box; you'll notice the width and height set for the element now include padding and border rather than just the content.
  • outline: is generally used to indicate focus and does not affect the size of the element. To hide a focus outline on an already styled attribute, you can put outline:none;.
Inspect My Parent!
box-sizing
content-box
box-sizing
border-box

cascading rules: specificity

When multiple rules match, specificity score is calculated based on the composition of the selectors.

Selector Types Instances in Example Value per Instance Total
Inline Style 1000
ID selectors 100
Class Selector, Attribute Selector, Pseudo-class Selector 10
Element Selector, Pseudo-element Selector 1
Total Specificity
  • In the event of tied specificity, the rule that comes last wins.
  • Adding !important to a declaration adds 10,000 to that specific property. It is like a sledge-hammer: effective, but messy. Only use when absolutely necessary.

Click a rule to see it's score!

Check out MDN for more information about specificity.

position

static
Default Places document in normal document flow
relative
Allows for changes in position relative to the static position. Static position is left in document flow.
absolute
Allows for changes in position relative to the closest ancestor not statically positioned. Static position is removed from the flow.
fixed
Allows for changes in position relative to the viewport. Static position is removed from the flow.
sticky
Hybrid of static and fixed. Static position until the element is at the top of the viewport, then fixed to the top of the viewport when scrolled past. Static position is left in document flow.

z-index

  • Z-Index represents an arbitrary depth level repsective to the current stacking context
  • A stacking context is created by several elements
    • <html> or the root stacking context
    • Basically any element with z-index: <integer>
    • Element with position: fixed | sticky
    • Element with transform: or filter: set
  • Any child of one of these elements will only compare z-index with it's siblings
  • The heirarchy of stacking contexts is a subset of the DOM tree
    • An element's stacking context is determined by the closest ancestor with a stacking context

flexbox

Controlling Flex from Parent

align-items:
justify-content:
flex-direction:
flex-wrap:
align-content:

Controlling Flex from Child

order:<integer>
flex:<flex-grow> <flex-shrink> <flex-basis>
align-self:

Every third box has a different line-height giving it a different baseline than the others.

centering things

with flexbox

parent {
    display:flex;
    align-items: center;
    justify-content: center;
}
or 
parent {
    display: flex;
}

child {
    align-self: center;
    justify-self: center;
}

with position

parent {
    position: relative;
}

child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

with text-align

child {
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
    /* heights must match */
    text-align: center;
}

Note: Only works on single line text in block element of defined height

vertical-align: middle; only works on specific elements. You will only really use it on table cells.

CSS variables

Themes on Root

Select A Theme:

Applying the Theme

code {
    background-color: var(--code-background-color);
    color: var(--code-text-color);
    font-family: var(--code-text-font);
}

Rules to Remember

  • :root refers to the root of the document, in HTML, the <html> element
  • Setting a variable below the root will only be available on the element selected and its decendants
  • A CSS variable can contain an entire property value, or a partial value, e.g.: 
    --default-size: 5px;
main {
    border: var(--default-size) solid #000;
}

resources

Disclaimer: This presentation is entirely CSS, no javascript. Do I recommend that? No! Use the right tool for the right job. This exercise was done simply to show that you can do a lot with css.