Skip to main content

Introduction

Welcome to this section. I hope at this point you have have a good grasp of HTML. Overall, HTML is boring and looks boring. With CSS will be able to spice things up!

CSS stands for Cascading Style Sheets. On it's own CSS can't be used. You can think of CSS as a layer that builds on top of HTML. The main purpose of CSS is to give pizazz to your HTML pages, it can make your web pages look "prettier".

With CSS you can add background colors, borders, spacing, manipulate how text looks like, and move or shift things around a web page.

One way to think of CSS is ass making a newspaper look pretty, which is basically a magazine. Magazines are colorful, the layouts are interesting, and the typography in them is fascinating.

Adding CSS​

Three ways to add CSS:

  1. HTML global attribute style=""
  2. using <style></style> tag in your HTML file
  3. creating a new file with the extension .css and then referencing it with <link> tag in your HTML file

properties available

Selectors​

  • universal
  • element/type
  • class
  • id
  • pseudo-class - see list
  • pseudo-element - see list
  • attribute

Try in Playground

Combinators​

  • grouping
  • direct child
  • descendant
  • general sibling
  • adjacent sibling

Box Model​

todo

Background images and gradients​

todo

Box Sizing​

todo

Positioning​

todo

::before vs ::after​

todo

Hiding Content​

  • visibility: hidden; vs display: none; vs opacity: 0;

Inheritance​

  • value set will be automatically inherited by all it's descendants

Cascade origins​

spec, user agent, author, and user style sheets

  • all
  • initial
  • inherit
  • unset
  • revert
danger

!important - avoid it, history for its creation

Block vs Inline elements​

Physical vs logical properties​

Units of Measurement​

Relative vs Absolute units​

Independent​

  • px - not a real pixel
  • cm - (note: on screen will not be accurate, only if printed)
  • mm - (note: on screen will not be accurate, only if printed)
  • in - (note: on screen will not be accurate, only if printed)
  • pt -
  • pc -

Dependent, always based on something else.​

  • em - based on parent (compounds)
  • rem - based on root (html)
  • % - based on parent
  • vw - based on viewport width
  • vh - based on viewport height
  • vmin - smallest of either vw and vh
  • vmax - largest of either vw and vh
  • ch - based on width of the character 0
  • ex - based on height of the character x

Color formats​

Specificity​

Precedence (weight)​

  • !important (highest precedent)
    • try to avoid at all costs!
  • style=""
  • id
  • class, pseudo-class, attributes
  • element and pseudo-element (lowest precedent)

Tie Breakers (equal weight)​

  • style="" (highest precedent)
  • <style></style>
    • within same style tag, rules that come last within style tags win
  • .css file (lowest precedent)
    • within same file, rules that come last in file win

Text styling​

  • color
  • font-family, font-size, font-weight, font-style, etc
  • text-decoration, text-transform, text-align, text-shadow, etc
  • line-height
  • letter-spacing, word-spacing
  • columns

List styling​

Hover styling​

a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Floats​

  • made for image alignment
  • old technique for layouts
  • clear fix
  • bfc

Display property​

  • outer inner

Block Formatting Context - a "mini layout"​

Margin collapsing​

Stacking Context​

Animations​

Simple animations using transition property​

Advanced animations using animation property and @keyframes​

Layouts​

Flex vs Grid​

flex can either be vertical (column) or horizontal (row). Horizontal is the default. For Grid, it's both horizontal and vertically at the same time.

Flex - flexible layouts​

  • grow
  • shrink
  • basis - falls back to width (for row direction) or to height (for column direction) if set to auto, content if neither. min-width/max-width or min-height/max-height can affect it

Grid​

Media Queries​

  • screen vs print

Responsive design​

  • mobile first vs desktop first
  • breakpoints
  • @media min-width or max-width

User preferences - dark/light mode, less motion, etc​

Check for property support​

CSS resets vs normalizations​

CSS variables​

Organizing: OOCSS vs BEM vs SMACSS​

Debugging techniques​

  • * { }
  • borders
  • outlines
  • specificity
  • transparent backgrounds