CSS notes

CSS notes

HTML vs CSS

HTML:

  • structure of content
  • semantic meaning

CSS

  • Appearance
  • styling

    Typography

    Typefaces

    Grouping of fonts

  • Serif: letters with decorative short lines
  • Sans Serif: with out the short lines
  • Script: hard to read
  • Decorative: stylish
  • Monospace Typeface: Each character uses same amount of horizontal space, popular for displaying code

Fonts

  • Web-safe Fonts: preinstalled on most computers

resource: cssfontstack.com

  • Use a Font stack, a serial of font families that falls back if ones are not found.
    • Use similar looking ones for font stack
    • Use commas to separate
    • use generic font family so system falls back to default, e.g. sans-serif. generic font is always without quotes
  • Generic Font Options:
    • Serif
    • Sans serif
    • Cursive: for script or decorative
    • Fantasy for decorative
    • Monospace
  • Web Fonts
    • internal
      • downloaded, included in project, declare and link usign @font-face
    • External
      • online 3rd party services
      • e.g.
        • google fonts - free
        • Adobe typekit - paid

Too many fonts slow down the page, 2 fonts is pretty standard

The font-size property

Different units * relative values calculated based on nearest ancestor - em + named after m + relative + 1em = inherited font size + if no font size is declared, 1em = default = 16px - rem + newer unit, similar to em + if no font size is declared, 1rem = 1em = default = 16px + relative but only to the root element, i.e. HTML * absolute values: - px: + absolute and accuracy + use whole numbers, avoid decimals + Browser default 16px

html {
    font-size: 10px
}
div {
    font-size: 2em
    div1 {
        font-size: 2em
    }
        div2 {
        font-size: 2 rem
    }
}

div1 would end up with 4em, div2 would be 2 rem = 2 HTML font size.

Both are inherited by descendents

Font properties

font-weight

100 to 900 normal = 400 bold = 700 bolder/lighter

font-style

Used to add/remove an italic style

  • italic
  • oblique
  • normal

others find on MDN

color, line-height, text propreties

color

text color

line-height

height of space between two lines

  • px, %, em, rem, unitless
  • closely related to font-size
  • at least larger than font-size, 150% or 1.5 will be relative to font-size.

text-decoration

underline

text-transform

capitalize, uppercase, lowercase, none

text-align

center align text

  • inherited by descendants
  • add to HTML element or parent

Resource: Codrops: CSS reference

Layouts

Block vs Inline

Two types of elements:

  • block:
    • height = content
    • width = 100% container
    • always start on a new line
    • block elements can wrap block or inline elements
    • e.g. most HTML tags: div, p, h1, h…
  • inline
    • height and width = content
    • align left side by side, in a line
    • Inline lements can only nest other inline elements, exception anchor tag a, can wrap block, when you want to group more than one block as one link
    • e.g. a, span, strong

Easy ways to check: add background color, or a border style, and check width.

By default, adding height and width works on block elements, but not inline element.

Custom elements are display:inline by default, so be mindful to set the display style explicitly, if needed.

But by using changing display property, we can change these default behaviors of block and inline.

display

  • block: make inline element behave as block element
  • inline: the other way
  • inline-block: make inline or block element to behave as inline block…
  • none: will hide the element from visual

The Box Model

Every HTML is a rectangle box. 5 Properties of box model.

  • width
  • height
  • padding
  • margin
  • border

Height and Width

These properties can be used to change the default size of block and inline elements:

to review, default size of

  • block element: height = content, width 100% container
  • Inline element: height, width = content

For inline element, display: block; or display: inline-block is required to have the height and width effective.

width values

https://developer.mozilla.org/en-US/docs/Web/CSS/width width, min-width, max-width

  • auto: browser default
  • max-content: intrisic preferred width
  • min-content: intrinsic minimum width
  • fit-content(<length-percentage>): min(max-content, max(min-content, )). if used with empty argument, this is equivalent to min-content

min-content, max-content, fit-content may have browser limitations, be sure to check safari, firefox, and use their prefixed properties if needed.

Padding

space inside of element, uses background color.

  • long hand syntax
  • shorthand syntax,
    • 4 values: follow clockwise order starting from the top

Margin

space outside of element longhand & shorthand

use margin to auto align: element with a fixed width and left-right margin as auto, will auto align to center.

div {
    width: 950px;
    margin: 0 auto;
}

Border

between padding and Margin width, style, color.

background doesn’t expand into margin

top and bottom margin doesn’t work on inline elements, because they are inline, they don’t push other elements vertically, only horizontally.

more on Margin

By default, block elements stack on top of each other, based on HTML order.

Negative values

Use negative margin values to move the box out side of it’s stacking order. Only small values are recommended.

auto-align

Margin auto will auto center the element margin: 0 auto;

max-width

  • when container larger then max, use max-width
  • when container less then max, use 100%
  • Thus responsive.
  • More flexible/responsive then width.
  • Similarly for min-width, max-height, min-height

text-align not only works on text, also applies to img

Page Layout - Float

Default page Flow

  • block
  • inline

float will disrupt the element order, and change the adjacent elements. The elemtns following the floated element, will aligh left/right following the floated element. float affects both the

  • stacking element
  • parent element:
    • will not recognize the (height of) floated element, and will only wrap the nonfloated child elements
    • if all chidren are floated, parent will be collapsed.
    • any element following the collapsed container will stack underneth it, with out recognizing the floated element

Clearing Floats for stacking element

To have the elements to stop following the float flow, and follow the default flow clear: both;, clear:left, clear: right

Clearing floats for parent element

If there is no element inside the container to clear the float, the parent will need to self-clear the float. Then the parent can contain any floated child elements. Two ways to do this:

  • overflow: auto; or overflow: hidden;
  • Clearfix Hack: add following CSS to parent of floated element. basically adding more space to the element.
  • flexbox a newer technique, check docs 
    .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

    https://css-tricks.com/snippets/css/clear-fix

overflow property is normally used when the element’s contents flows over it’s height. not limited to clearing float. in case of clearing, when we don’t give a height to it, it won’t show the scroll, and at the same time respects the floated element.

flexbox a newer technique

caniuse.com for browser compatibility for new features

Online image editor: pixlr.com

border-radius 50% change square to circle setting width on image, will also change height since the aspect ratio will be kept

box model fix

box-sizing: is how the browser calculates the size of a box.

  • box-sizing: content-box: default box-sizing, padding and border are not included in sizing the box.
  • box-sizing: border-box: includes padding and border, so with specified width or height, if we increase border and padding, width and height won’t grow, but content will get pushed inward

Use following snippet, padding and border will no longer effect the size of the content box.

html {
    box-sizing: border-box
}
\*, \*: before, \*: after {
    box-sizing: inherit;
}

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Other CSS notes

Flex box

A quick reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Container attributes

  • display: flex;: establishes a flex context,
  • justify-content: used in flex container and grid container. It defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
    • positional alignment
      • center
      • start
      • end
      • flex-start
      • flex-end
      • left
      • right
    • no baseline alignment
    • Normal alignment: normal
    • Distributed alignment: distribute itmes evenly, with different scheme of space distribution
      • space-between
      • space-around
      • space-even
      • stretch: stretch ‘auto’ sized item to fit container. Not supported by flexbox
    • Overflow alignment, [alignment keyword] is one of the above.
      • safe [alignment keyword]
      • unsafe [alignment keyword]
    • Global values
      • inherit
      • initial
      • unset

Item attributes

Flex

combination of

  • flext-grow, defaults to 0, negative values are invalid. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).,
  • flex-shrink, defaults to 1.
  • flex-basis, defaults to auto. It sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

Common values

  • auto = 1 1 auto: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
  • initial = 0 1 auto: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
  • none = 0 0 auto: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.

Gotchas

Child expands to more than the width allowed by the parent

Short version: immediate flex child need to specify one of the following

  • setting overflow
  • setting min-width: 0 to override min-width: auto

Long version and more detailed scenarios: CSS Flex positioning gotchas: child expands to more than the width allowed by the parent

Grid box

Focus-trap

Focus-trap is a common behavior for modals/dialogs. The common way that I have seen is programmatically achieve it.

  • when loading the modal, initialize and activate focus trap
    • pass in the root component for focus trap, and options like a list of selectors(selectorList), so focus will only be used on these elements
    • focus trap will get a list of tabbable elements under the root component
    • tabbable can be a util on it’s own. Fall back to a default selectorList like var candidates = el.querySelectorAll(selectorList || 'input, select, a[href], textarea, button, [tabindex]');
  • on tabbing, a handleTab function under focustrap will understand the index of current element and know the next/prev element
  • focus is looped within the tabbable elements
  • when modal is closed, focus-trap is deactivated.

Key components

  • root container component(the modal)
  • focusTrap util
  • tabbable util

Example: https://github.com/focus-trap/tabbable

Terms

###

How to write maintainable CSS classes

  • BEM: https://css-tricks.com/bem-101/#article-header-id-0