CSS Tutorial

CSS LAYOUTS

Flexbox

• Flexbox guide
• Flexbox Cheatsheet
• FlexboxFroggy Exercise

Grid Layout

• Grid: a simple visual cheatsheet
• Grid Layout
• CssGridGarden Exercise

.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* general usage */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* more responsive approach */
grid-template-rows: 1fr;
grid-gap: 10px;

/*to center grid items horizontally, using 'auto-fit'*/
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
justify-items: center;
}

CSS SELECTORS

Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter.

• .class
• #id
• *
• element
• element, element
• element element
• element > element
• element + element
• :hover
• :last-child
• :first-child
• !important (not recommended)

What selectors win out in the cascade depends on:

• Specificity
• Importance
• Source Order

CSS BASICS

The box model properties

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

The Box Model Fix

html {
  box-sizing: border-box;
}

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

The display Property

The display property specifies if/how an element is displayed. It is the most important CSS property for controlling layout.

Syntax

display: value;

Property Values

• block, inline, inline-block, contents, flex, grid, none, etc...

Difference between display:none and visiblity: hidden

• visibility:hidden hides the element, but it still takes up space in the layout.
• display:none removes the element from the document. It does not take up any space.
• Example from w3schools.com

The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static - this is the default value, all elements are in order as they appear in the document.
• relative - the element is positioned relative to its normal position.
• fixed - the element is positioned related to the browser window. It always stays in the same place even if the page is scrolled.
• absolute - the element is positioned absolutely to its first positioned parent.
• sticky - the element is positioned based on the user's scroll position. It basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view.

Elements are then positioned using the following properties:

• top, bottom, left, right

However, these properties will not work unless the position property is set first. The position property can be used (depending on the position value) to arrange elements relative to its current position, its containing element, or the browser viewport.