CSS Definitions

  • selector: use to identify which component the styles will apply to
  • property: the style property to be applied to the selected component
  • value: the value of the style property to be applied
  • property: value: declaration statement; a complete style rule that consists of a selector, property, and value
    • Each declaration statement is ended by semi-colon
{selector} {
  {property}: {value}; /* This is a CSS declaration statement */
}

Commenting in CSS

CSS comments are not displayed in the browser, but they are displayed in the browser's DevTools

/* This is a comment */

CSS Selectors

  • Element: <table> or <body>
  • Class: .className
  • ID: #idName
  • Descendant: parent child; div img or div > img
  • Multiple: separated by commas; div, article, section
  • Attribute: [attribute='value'] input[type='submit']
  • Pseudo-Class:
    • :nth-child(): e.g. li:nth-child(even) \/*Every other list item*/or td:nth-child(4n) \/*Every 4th column*/
    • :hover
    • :active
    • :focus
    • :first-child
    • :nth-child(n)
  • Pseudo-Element: div::first-line
    • ::before
    • ::after
    • ::first-letter
    • ::first-line
    • ::selection

Length Units

  • Absolute:
    • px (pixels) - most commonly used in web design
  • Relative to Font Size:
    • em: scale to the font size of the element itself (e.g. 2em = 2 * font size)
    • rem (root em): scale to the root element's font size (e.g. 2rem = 2 * root font size)
  • Relative to Viewport:
    • vw: represents a % of the viewport's width (e.g. 100vw is 100% of the viewport's width)
    • vh: represents a % of the viewport's height (e.g. 100vh is 100% of the viewport's height)
    • vmin: represents % of the smaller of the viewport's height or width
    • vmax: represents % of the larger of the viewport's height or width
  • Percentage:
    • %: define a size relative to the parent's size (e.g. width: 50%; - width will be 50% of the parent's width)
  • Calculating at Runtime:
    • calc(): use it to calculate length value at runtime
    • e.g. height: calc(100vh - var(--top-nav-height));

CSS Variables

Use the :root {--variable-name: 100px} block to save variables in a css sheet to be used or change later.

  • To use the variable, call on it with var(--variable-name)
:root {
  --max-width: 1440px;
  --main-content-min-width: 500px;
  --main-color: #3498db;
}

.container {
  max-width: var(--max-width);
}

Calculating with CSS

You can dynamically calculate the value in CSS by using calc()

:root {
  --top-nav-height: 50px;
}

.container {
  height: calc(100% - var(--top-nav-height));
}

Modifying Color

Use the function oklch() to modify a color's oklab, lightness, chroma, and hue

:root {
  --primary-color: blue;
}

.container {
  /* Make the primary color 1.5x brighter */
  background-color: oklch( from var(--primary-color) calc(l * 1.5) c h);
}

Hover Effect

#hoverExample:hover {
  background-color: lightcoral;
}
Hover over me