Position

The position property determines how an element is positioned in the document. Options include static (default), relative, absolute, fixed, and sticky. This property allows elements to be precisely placed relative to their normal position, parent, or the viewport.

position:relative - Setting the top, right,bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position

div.relative {
  position: relative;
  left: 30px;
} /* The element will appear left indented by 30px */

position: absolute - the element is positioned relative to the nearest positioned ancestor(i.e. the nearest ancestor with position set torelative, absolute, or sticky)

• position: absolute elements are removed from the normal flow of the document and can overlap.

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
} /* The element will be below the top by 80px and right align relative to its ancestor element */

position: fixed - the element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

• position: fixed elements are removed from the normal flow of the document and can overlap.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
} /* The element is fixed to the bottom and right and moves along with page scrolling */

position: sticky - the element is a combination of relative and fixed positioning. It behaves like a relatively positioned element until the user scroll to a certain point, at which point it becomes fixed.

• position: sticky elements are NOT removed from the normal flow of the document, unlike position: fixed

div.sticky {
  position: sticky;
  top: 50px;
  right: 0;
  width: 300px;
} /* Once the user scroll down enough, the element will maintain a fixed position of below the top by 50px while sticking to the right edge */

Notes

• % for top|left|right|bottom are relative to parent's dimensions

Examples: www.w3schools.com/css/css_positioning.asp

Z-Index

z-index: 1000;

• Define the draw order/ stack order of the element
• Higher number means the element is on top/ in front
• z-index accepts negative numbers

Display

The display property affects how the element flow in the layout. Common values includeinline, block, flex, inline-block, gridand none.

• The property visibility: hidden is also useful.
• column-count: x should NOT be used with flex and grid

More Examples: www.w3schools.com/css/css_display_visibility.asp

display: block|inline|inline-block|flex|grid|none;
visibility: hidden;
column-count: x;

Width & Height

width: length|%;
height: length|%; 
min-width: length|%;
max-width: length|%;
min-height: length|%;
max-height: length|%;

• % value is relative to the parent container
• Setting width: 100%; and max-width: 1440px; on the container is very useful for responsive layout
• min-width: useful for preventing the content-container from getting too narrow relative to other containers

Spacing

• white-space: normal|nowrap|pre: specifies how white-space and text wrapping inside elements are handled
• margin: length: sets the space outside the element's border
• padding: length: sets the space between the content and border of the element
• gap: length: shorthand for row-gap and column-gap; sets the space between the children elements
• Only used for multi-column, flex, and grid elements
• In multi-column, gap defines the gaps between columns
• In flex, gap defines the space between flex items and flex lines
• In grid, gap defines the gaps between rows and columns
• box-sizing: border-box: includes the border when calculating an element's total width and height
• Extremely useful for setting up layout and makes it easier to calculate width and height
• With box-sizing: border-box, the width of 2 columns element can be set to 50%
• Without box-sizing: border-box, the width of 2 columns element has to be 48% to account for the padding and border

* {
  box-sizing: border-box;
}
margin: length;
padding: length;
gap: length;

Scrolling

overflow-x: visible|hidden|scroll|auto;
overflow-y: visible|hidden|scroll|auto;

• visible (default): the content is not clipped and it may be rendered outside the content box
• hidden: the content is clipped, but no scrolling mechanism is given

Background

/* background property is shorthand form */
background: none;

background-color: color|transparent;

background-image: url("image.jpg")|none;
background-position: left top|right|center|...|center bottom|x% y%;
background-size: auto|cover|contain|width height;
background-clip: border-box|padding-box|content-box;
background-attachment: scroll|fixed|local;

background-repeat: repeat|repeat-x|repeat-y|no-repeat;
background-origin: padding-box|border-box|content-box:

• background-clip: specifies how far the background should extend within element
  • border-box: extends behind the border
• background-attachment: sets whether the background image will scrolls with the page
• background-origin: specifies the starting point of the background image
  • border-box: within the border area of the box

Examples: www.w3schools.com/cssref/css3_pr_background.php

Border

border-radius: 1-4 length|%;
box-shadow: none|h-offset v-offset blurRadius spreadRadius color;

/* border property is a shorthand property, but not for border-radius */
border: border-width border-style border-color;   

border-width: medium|thin|thick|length;
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-color: color|transparent;

Font

font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold|normal|lighter|bolder|900;
font-style: italic|normal|oblique|oblique 40deg;

bolder and lighter values are relative to the parent's.

Examples: developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Text

/* Text color */
color: red;
/* Text spacing */
white-space: nowrap|pre|normal;

text-align: left|right|center|justify;
text-transform: none|capitalize|uppercase|lowercase;
text-shadow: h-shadow v-shadow blurRadius color|none;

/* text-decoration is the shorthand property */
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

text-decoration-color: color;
text-decoration-line: none|underline|overline|line-through;
text-decoration-style: solid|double|dotted|dashed|wavy;
text-decoration-thickness: auto|from-font|length/percentage;

Notes for Wrapping Text

• white-space: pre|pre-wrap|pre-line preserve white-space and act like the HTML tag <pre>
• pre : preserve all spaces and line breaks without wrapping text similar to <pre> block
• pre-wrap : preserves spaces and line breaks, but also wraps text
• pre-line : preserves line breaks, but collapses extra spaces and wraps text
• overflow-wrap: normal|anywhere|break-word determines how browser should break up long text that doesn't contain spaces

Inherit & Initial Values

The inherit and initial values can be used on almost any properties.

• inherit: the property will inherit its value from its parent element
• initial: return the property to its default value

background-color: inherit;
color: initial;

Transition

/* transition property is the shorthand form */
transition: property duration timing-function delay;

transition-property: none|all|property;
transition-duration: time;
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n);
transition-delay: time;

• transition-property: specifies the name of the CSS property the transition effect is for (default is all)
• transition-duration: determines how many seconds (s) or milliseconds (ms) the effect takes to complete
• transition-timing-function: sets the speed curve of the transition effect, allow changes in speed over its duration
• ease (default): slow start, then fast, and finally end slowly
• linear: same speed from start to finish
• ease-in: slow start
• ease-out: slow end
• transition-delay: determines how many seconds (s) or milliseconds (ms) before the transition starts

// Useful transition values
.nav-menu {
    transition: transform 0.3s ease;
    OR
    transition: transform 0.3s ease, opacity 0.3s ease;
}

Examples:

• transition: 0.3s ease is useful for menu transitions (0.3s duration and ease timing-function)
• Do NOT use display: none along with transition because it prevents the animation from running
• Instead, use opacity: 0 to hide the element and opacity: 1 to show it

More Examples: www.w3schools.com/css/css3_transitions.asp

Transform

transform: none|transform-functions;

Transform Functions:

• translateX(x): move across x-axis
• translateX(-50%): move element to the left by 50% of its own width, NOT its parent
• translateY(Y): move across y-axis
• translate(x,y): move element across x- and y-axis
• translate3d(x,y,z): allow 3D translation
• scale(x): scale in the x- and y-directions by the same amount
• scale(1.5): make element 1.5x larger
• scale(150%): make element 1.5x larger
• scale(x,y): scale in the x- and y-directions
• rotate(angle): rotate element by angle

For more transform functions: www.w3schools.com/cssref/css3_pr_transform.php

Examples:

.card-image:hover {     
  transition: transform 0.3s ease;
  transform: scale(1.03);
}

• scale(x) can be used for more interactive image gallery

.leftNavMenu {
    display: none;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
}    
.leftNavMenu.open {
    display: fixed;
    top: 0;
    transform: translateX(0);
}

• translateX(-100%) hides the menu to the left by 100% of its width (whole menu)
• translateX(0) moves the menu from -100% to 0, the left edge of the viewport

.centerElementHorizontally {     
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

• left: 50% moves the left edge of the element to the right by 50% of its parent's width
• translateX(-50%) moves the element to the left by 50% of its width; effectively centering it horizontally